Saturday, 15 January 2011

Apply CSS to jQuery Dialog Buttons -


So I currently have a jQuery dialog with two buttons: Save and close I use the code given below I create dialogs:

dialog.div.dialog ({autoOpen: false, modal: true, width: 600, resizable: false, button: {Cancel: function} // Cancel code Here}, 'Save': function () {// Save code here}}, close: function () {// Close the code here (coincidentally, similar to cancellation code)}});

However, both codes are the same color when this code is used. I want a different color from my save button my save. Is there any way of using jQuery to use some of these options? I did not receive much help from the document

Note that I am canceling button is a pre-defined type, but I am not defining myself to 'save' myself to ensure that there will be no effect on this issue.

Any help would be appreciated. Thank you. Update It was agreed that there were two rides to travel here:

  1. Inspecting HTML using a Firefox plugin such as Make and note CSS classes that are applying for jQuery buttons, and override them takes a stab. Note: In my HTML, both buttons were not exact same CSS classes and no unique IDs, so this option was out.
  2. Use a jQuery selector for the dialog, I want that button, and then add a CSS class.

I went with the second option, and using the jQuery search () method, I think it is more appropriate to use: First or: first child B / C The button I wanted to change did not necessarily have the first button listed in the markup. Using Search, I can simply specify the name of the button and thus I can add CSS. Code I has ended with:

dialog.div.dialog ({autoOpen: false, Model: true, width: 600, resizable: incorrect, button: {Cancel: jobs) } // cancel code here}, 'save': function () {// save code here}}, open: function () {$ ('.ui-dialog-buttonpane'). ('Button: Cancel ") '. AddClass (' cancelButtonClass');} Close: function () {// Close code (coincidentally, similar to cancellation code)}});

I am posting again as a question because no one can post it Here's and it's very cleaner and nipper:

Use the optional button property syntax:

  $ dialogDiv.dialog ({autoOpen : False, modal: {Text: "Cancel", "class": 'cancelButtonClass', click: function () {// cancel code here}}, {text: "save": true, width: 600, resizable : False, button: Click "Class": 'saveButtonClass', click: function () {// save code here}}, close: function () {// here Close the code (coincidentally, similar to the cancellation code)}});  

No comments:

Post a Comment