CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
LCJ
LCJ

Reputation: 22652

Customizing jQuery UI dialog

For learning jQuery UI dialog, I have the code defined below.

I need to do following three tasks

1) Use my image as “OK” button and “Cancel” button

2) Use my custom image as the close button on right top end of dialog

3) Background of the whole dialog should be “gray” (including title, and place for OK button.)

The important point is the style should be applied only to my dialog. All other widgets should have default behavior. For content area, I could achieve it using #myDiv.ui-widget-content.

Can you please suggest code for this?

Note: Please use the best practices, if possible. (E.g. 1. use a variable $myDialog 2. use autoOpen: false)

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title> </title>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>


 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet" 
        type="text/css" />


     <link href="Styles/OverrideMyDialog.css" rel="stylesheet" 
        type="text/css" />-



<script type="text/javascript">

    $(document).ready(function () {
        var $myDialog = $(".addNewDiv").dialog(
                                    {
                                        autoOpen: false,
                                        title: 'My Title',
                                        buttons: { "OK": function () {
                                            $(this).dialog("close");
                                            ShowAlert();
                                            return true;
                                        },
                                            "Cancel": function () {
                                                $(this).dialog("close");
                                                return false;
                                            }
                                        }

                                    }
                                           );





        $('#myOpener').click(function () {
            return $myDialog.dialog('open');


        });
    });

    function ShowAlert() {
        alert('OK Pressed');
    }

</script>


<body>
    <div>
    <input id="myOpener" type="button" value="button" />
</div>
<div class="addNewDiv"  id="myDiv" title="Add new Person" >
    <table>
        <tr>
            <td>
                Name
            </td>

        </tr>
        <tr>
            <td>
                Age
            </td>

        </tr>
    </table>
</div>
</body>
</html>

Also, I made a css class to override the widget functionality only for my dialog

    /*
   *File Name: OverrideMyDialog.css
   * jQuery UI CSS is overriden here for one div
  */


/* Component containers
----------------------------------*/

#myDiv.ui-widget-content 
{ 
border: 5px solid Red;
background: Gray url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
color: Green; 
}

Upvotes: 3

Views: 8170

Answers (3)

Yorgo
Yorgo

Reputation: 2678

you should customize the css file. class are: 

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

Upvotes: 1

LCJ
LCJ

Reputation: 22652

I have upvoted the above answer. Still dialogClass: 'myDialogCSS' was the key I was looking for.

HTML and jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-
    1.4.4.js"></script>
    <script type="text/javascript"
        src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/Sunny/jqueryui.
    css"
        rel="stylesheet" type="text/css" />
    <link href="Styles/MyStyleSheet.css"
        rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function () {
            var $myDialog = $(".addNewDiv").dialog(
            {
                modal: true,
                autoOpen: false,
                dialogClass: 'myDialogCSS',
                title: 'My Title',
                closeOnEscape: false,
                open: function(event, ui)
                {
                    //Disable OK Button
                    $(".ui-dialog-buttonpane
                        button:contains('OK')").attr("disabled", true).addClass("ui-state-disabled");
                },
                buttons: { "OK": function ()
                {
                    $(this).dialog("close");
                    ShowAlert();
                    return true;
                },
                    "Cancel": function ()
                    {
                        $(this).dialog("close");
                        return false;
                    }
                }
            }
            );
            $('#myOpener').click(function ()
            {
                return $myDialog.dialog('open');
            });
        });
        function ShowAlert() {
            alert('OK Pressed');
        }
    </script>
</head>

<body>
    <div>
        <input id="myOpener" type="button" value="button" />
    </div>
    <div class="addNewDiv" id="myDiv" title="Add new Person">
        <table>
            <tr>
                <td>Name

                </td>
            </tr>
            <tr>
                <td>Age
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

MyStyleSheet.css

   /*Title Bar*/
   .myDialogCSS .ui-dialog-titlebar
     {
       /*Hide Title Bar*/
       /*display:none; */
     }

   /*Content*/
   .myDialogCSS .ui-dialog-content
     {
       font-size:30px;
     }

Upvotes: 5

Amar Palsapure
Amar Palsapure

Reputation: 9680

For this you will have to over-ride default css provided by jQuery UI (jquery.ui.theme.css).

  1. Image for Ok button: You need to change .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default background image.
  2. Close Button: Change .ui-widget-header .ui-icon
  3. Background of Dialogue: Change .ui-widget-content background property.

Hope this works for you.

Upvotes: 1

Related Questions