Monday, June 25, 2012

Asp.Net jQuery UI Dialog Buttons Alignment.


The jQuery UI Dialog Widget is a simple widget used to display information, it is similar to a message box, but we can customize the Dialog as required, we can add as many buttons as required to the Dialog and handle their events.


To know more about the basics of jQuery UI Dialog refer to the post Asp.Net jQuery UI Dialog Widget.

To align the buttons in the jQuery UI Dialog, add the following style tags to the Asp.Net page.

<style type="text/css">
    .ui-dialog .ui-dialog-buttonpane
    {
        text-align: left;
    }
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
    {
        float: none;
    }
</style>

Full Example

<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />

<style type="text/css">
    .ui-dialog .ui-dialog-buttonpane
    {
        text-align: left;
    }
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
    {
        float: none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#cmdShowDialog').click(function()
            {
                $('#myDialog').dialog
                (
                    {
                        buttons:
                        [
                            {
                                text: "Ok",
                                click: function() { $(this).dialog("close");}
                            },
                            {
                                text: "Cancel",
                                click: function() { $(this).dialog("close");}
                            }
                        ]                           
                    }
                );
            });
        $('#cmdHideDialog').click(function()
        {
                $('#myDialog').dialog('close');
        });           
    });
</script>

<body>
    <div id="myDialog" style="display:none;" title="Hello Dialog">
        This is a test Dialog box, using jQuery <br /><br />
    </div>
    <form id="frmDialog" runat="server">       
        <div>
            <input type="button"
                id="cmdShowDialog"                
                value="Show Dialog" />
           <input type="button"
                id="cmdHideDialog"                
                value="Hide Dialog" />
        </div>
    </form>
</body>

Run the application, click on the Show Dialog button, the Dialog will get displayed as follows.

Note that the buttons in the Dialog are left aligned instead of the default right alignment.







Search Flipkart Products:
Flipkart.com

No comments: