如何將自定義圖標添加到標準jQuery UI主題？

Question

這是很容易利用現有的圖標從一個標準的圖標集：

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

但是，如果我想補充我自己的圖標是不是框架圖標集的第一部分是什麼？

我認爲這將是爲給它一個背景圖片自己的CSS類一樣簡單，但是，這並不工作：

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

有什麼建議？

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; 
} 

然後只需鍵入JS代碼：

 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-edit選擇較高的特異性，從而覆蓋背景圖像proerty。由於它們使用精靈，.ui-icon-locked規則集僅包含獲取精靈圖像位置所需的background-position。我相信使用這將工作：

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

或其他具有足夠的特異性的東西。瞭解更多有關CSS具體位置：http://reference.sitepoint.com/css/specificity

Answer 3

這是基於由姜毅及以上Panayiotis提供的信息，以及jquery ui button sample code：

當我在遷移較早JSP應用程序必須與每個按鈕圖像的工具欄，我想有內部的圖像按鈕聲明本身，而不是爲每個工具欄按鈕創建一個單獨的類。

<div id="toolbarDocs" class="tableCaptionBox"> 
    <strong>Checked Item Actions: </strong> 

    <button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button> 
    <button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button> 
</div> 

當然，還有更多的按鈕比上述兩個更多。上述s個標籤是一個Struts2的標籤，但你可以只用任何URL

 <button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button> 

以下腳本查找從按鈕標記的屬性數據IMG，然後設置一個作爲背景圖片更換按鈕。

它暫時設置ui-icon-bullet（任意現有的樣式），然後稍後進行更改。

該類定義了臨時樣式（如果您打算使用這個選項卡，以便您的頁面的其餘部分不受影響，最好爲特定工具欄添加更多選擇器）。

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

和下面的JavaScript：實際的圖像將通過下面的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

我的解決方案，以自定義圖標添加到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 5

大廈msanjay回答我延長這對於jQuery UI的按鈕和單選按鈕都自定義圖標以及工作：

<div id="toolbar"> 
    <button id="btn1" data-img="/images/bla1.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 6

// 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='/assets/images/" + 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 7

在這個問題的解決鏈接很適合我： 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 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" } 
});