CodePaste Logo
New Snippet New Snippet Recent Snippets Recent Snippets My Snippets My Snippets Web Code Search Snippets Search
Sign inor Register
Language: HTML

Styling jQuery.ui dialog buttons

783 Views
Copy Code Show/Hide Line Numbers
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Html Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
    <style type="text/css">
        .primary { background-color: green; }
        .secondary { background-color: blue; }
        .thirdary { background-color: red; }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#to_dialog_a").click(function() {
                $("#to_dialog").dialog("open");
            });
            
            $("#to_dialog").dialog({
                autoOpen: false,
                buttons : {
                    ok: function() {
                        alert("you clicked me!");
                    },
                    what: function() {
                        alert("you clicked me!");
                    },
                    cancel: function() {
                        alert("you clicked me!");
                    }
                }
                ,
                open: function(event, ui) {
                    // Get the dialog
                    var dialog = $(event.target).parents(".ui-dialog.ui-widget");
 
                    // Get the buttons
                    var buttons = dialog.find(".ui-dialog-buttonpane").find("button");
 
                    var okButton = buttons[0];
                    var whatButton = buttons[1];
                    var cancelButton = buttons[2];
 
                    // Add class to the buttons
                    // Add class to the buttons
                    $(okButton).addClass("primary");
                    $(whatButton).addClass("secondary");
                    $(cancelButton).addClass("thirdary");
                }
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <a id="to_dialog_a" href="javascript:void(0);">click me</a>
        <div id="to_dialog" style="border: 1px solid gold; background-color: #336699"></div>
    </div>
</body>
</html>
by jwwishart
  June 16, 2010 @ 4:02pm
Tags:

Add a comment


Report Abuse
brought to you by:
West Wind Techologies



If you find this site useful and use it frequently please consider making a donation to support this free service.
Donate