Language: HTML
Styling jQuery.ui dialog buttons
<!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>
Tags:
Report Abuse
Subscribe
Discuss
What's new
What is it
New Snippet
Recent Snippets
My Snippets
Web Code
Search

