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>
