jQuery UI对话框button图标

是否有可能将图标添加到jQuery UI对话框上的button? 我试过这样做:

$("#DeleteDialog").dialog({ resizable: false, height:150, modal: true, buttons: { 'Delete': function() { /* Do stuff */ $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } }, open: function() { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel'); $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash'); } }); 

打开函数中的select器似乎工作正常。 如果我添加以下内容来“打开”:

 $('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red'); 

那么我会得到一个带有红色文字的删除button。 这并不坏,但我真的很喜欢那个垃圾桶也可以在删除button上精灵。

编辑:

我对接受的答案做了一些调整:

 var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")'); btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>'); btnDelete.width(btnDelete.width() + 25); 

添加一些顶部边距会将图标向下推,因此它看起来像是垂直居中。 将25像素添加到button的宽度使得button文本不会缠绕到第二行上。

试试这一行将垃圾桶图标添加到删除button。 精灵必须在一个单独的元素。

 $('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>'); 

为了防止图标出现在button的顶部:

 $('.ui-dialog-buttonpane') .find('button:contains("Delete")') .removeClass('ui-button-text-only') .addClass('ui-button-text-icon-primary') .prepend('<span class="ui-icon ui-icon-trash"></span>'); 

我'试过这个,它的作品:)

 [....] open: function() { $('.ui-dialog-buttonpane'). find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel' } }); [....] 

从jQuery UI 1.10开始支持

从jQuery UI版本1.10.0开始,可以清楚地指定button图标,而不需要open事件处理程序。 语法是:

 buttons: [ { text: "OK", icons: { primary: "ui-icon-check" } }, { text: "Cancel", icons: { primary: "ui-icon-closethick" } } ] 

也可以指定一个secondary图标。

看到它的行动

你也可以添加id或其他attrbutton,如下所示:

 buttons:[ { text: "Close", id: "closebtn", click: function() { $(this).dialog("close"); } } ], open: function() { $("#closebtn").button({ icons: { primary: "ui-icon-close" } }); } 

这个版本不需要担心button中的文字

 open: function() { $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({ icons: { primary: 'ui-icon-circle-close' } }); $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({ icons: { primary: 'ui-icon-circle-check' } }); } 

这是我使用的。 在初始对话框定义期间,为感兴趣的button分配一个ID:

  buttons: [ { id: "canxButton", text: "Cancel", icons: { primary: "ui-icon-cancel" }, click: function () { ... 

然后你可以像这样改变文本/图标:

 $("#canxButton").button("option", "label", "Done"); $("#canxButton").button({ icons: {primary: "ui-icon-close"} }); 

只是一个更新,因为我碰到需要自己做这个。

我有多个对话框,都有相同的closuresbutton,所以有必要谈谈如何将图标直接放置在您要影响的对话框上,以防万一您想在不同对话框中的button上显示图标相同的文字。

另外,选定的解决scheme实际上缺less一些已经定义的CSS类来解决位置问题。

下面的代码应该在原始问题中完成所需要的,精确度稍高一点。 如果你想通过Deletebutton把所有的对话框应用到同一个垃圾桶图标上,把$('#DeleteDialog'),parent()select器改为$('。ui-dialog-buttonpane')就可以实现这个目标:

 $('#DeleteDialog').parent() .find('button:contains("Delete")') .removeClass('ui-button-text-only') .addClass('ui-button-text-icon-primary ui-button-text-icon') .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>'); 

或者,如果您不想影响任何其他对话框,

 open: function() { $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({ icons: { primary: 'ui-icon-circle-close' } }); $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({ icons: { primary: 'ui-icon-circle-check' } }); } 

将高度分配给“.ui-dialog .ui-button”如下:

 .ui-dialog .ui-button { height:36px; } .ui-icon-kl_exit { height:32px; width:32px; display:block; background-image: url('../icons/exit32.ico'); } 

我跑了同样的问题。 看来jQuery将文本存储在button本身中称为“文本”的属性中,而不是button中的文本。

我解决了这个问题:

  $dialog.dialog({ resizable:false, draggable:false, modal:true, open:function (event, ui) { $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel'); //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel'); $(this).parents('.ui-dialog').find('.add.ui-button').text('OK'); }, buttons:[ { text:"OK", click:function () { }, "class":"add" }, { text:"Cancel", click:function () { }, "class":"cancel" } ] }); 

如何基于类的方法?

_layout.cshtml文件中join如下内容:

 <script type="text/javascript"> $(function () { stylizeButtons(); } function stylizeButtons(parent) { if (parent == undefined) { parent = $("body"); } // Buttons with icons $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} }); $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} }); $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} }); $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} }); $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} }); $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} }); $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} }); $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} }); $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} }); $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} }); $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} }); $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} }); $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} }); } </script> 

然后,在创build对话框的文件中,执行如下操作:

 $("#doStuff-dialog").dialog({ title: "Do Some Stuff", modal: true, buttons: [ { text: "Yes", class: "my-button-submit", click: function () { $(this).dialog("close"); } }, { text: "No", class: "my-button-cancel", click: function () { $(this).dialog("close"); } } ], open: function () { stylizeButtons($("#doStuff-dialog").parent()); } }); 

那么你永远不必依靠search文本,而且在对话框中只需要最less量的代码。 我通过我的应用程序来使用这个jquery UI样式/图标button只是给他们一个类。

按照Dialog>button的选项文档,你可以传递一个对象或一系列选项; 后者允许您自定义button:

纽扣

types:对象或数组
默认: []

支持多种types:

  • 对象 :键是button标签,值是单击相关button时的callback。
  • 数组数组的每个元素都必须是一个定义要在button上设置的属性,属性和事件处理程序的对象。 另外,可以使用icons的键来控制button的图标选项,并且可以使用showText的按键来控制button的文本选项。
 $(function() { var buttons = []; buttons.push({ text: "Yes", // icon options icons: { primary: "ui-icon-check" }, // attributes "class": "hawt-button", title: "Aye!" }); buttons.push({ text: "Yes to All", icons: { secondary: "ui-icon-check" } }); buttons.push({ text: "Please", icons: { primary: "ui-icon-notice" }, // text options showText: false }); buttons.push({ text: "Cancel", icons: { secondary: "ui-icon-close" }, // properties disabled: true }); $("#dialog").dialog({ width: "auto", buttons: buttons }); }); 
 @import url("ui/1.11.4/themes/smoothness/jquery-ui.min.css"); .ui-button.hawt-button { color: hotpink; } 
 <script src="jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="dialog" title="Confirmation"> <p>Delete all files from your hard drive?</p> </div>