所以我目前有一个jQuery对话框有两个按钮:保存和关闭。我使用下面的代码创建对话框:
$dialogDiv.dialog({ autoOpen: false,modal: true,width: 600,resizable: false,buttons: { Cancel: function() { // Cancel code here },'Save': function() { // Save code here } },close: function() { // Close code here (incidentally,same as Cancel code) } });
但是,当使用此代码时,两个按钮的颜色相同。我想我的取消按钮是一个不同于我的保存的颜色。有没有办法这使用一些内置的jQuery选项?我没有从文档中得到很多帮助。
注意,我创建的取消按钮是一个预定义类型,但’保存’我定义自己。不知道这是否会对这个问题有任何影响。
任何帮助将不胜感激。谢谢。
更新:共识是有两条路在这里旅行:
>使用Firefox检查HTML
插件像firebug,并注意
jQuery是CSS类
应用于按钮,并采取
刺住他们。注意:在
我的HTML,两个按钮都用了
完全相同的CSS类,没有唯一
ID,所以这个选项出来了。
>在对话框打开时使用jQuery选择器
抓住我想要的按钮,
然后添加一个CSS类。
我使用第二个选项,并使用jQuery find()方法,因为我认为这比使用更合适:first或:first-child b / c我想更改的按钮不一定是列出的第一个按钮标记。使用find,我可以只指定按钮的名称,并添加CSS的方式。我最后得到的代码如下:
$dialogDiv.dialog({ autoOpen: false,open: function() { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass'); } close: function() { // Close code here (incidentally,same as Cancel code) } });
解决方法
我再转发
my answer一个类似的问题,因为没有人似乎已经在这里给它,它更干净,更整洁:
使用替代buttons属性语法:
$dialogDiv.dialog({ autoOpen: false,buttons: [ { text: "Cancel","class": 'cancelButtonClass',click: function() { // Cancel code here } },{ text: "Save","class": 'saveButtonClass',click: function() { // Save code here } } ],same as Cancel code) } });