Wie füge ich einem standardmäßigen jQuery UI-Design ein benutzerdefiniertes Symbol hinzu?

Question

Es ist einfach eines der Symbole aus dem Standard-Icon-Set zur Verfügung zu verwenden:

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

Aber was, wenn ich einen meiner eigenen Icons hinzufügen möchten, die nicht Teil des Rahmens Icon-Set ist?

Ich dachte, es so einfach sein würde, wie es Ihre eigene CSS-Klasse mit einem Hintergrundbild zu geben, aber das funktioniert nicht:

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

Irgendwelche Vorschläge?

Answer 1

Ich könnte auch empfehlen:

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

dann geben Sie einfach in den JS-Code:

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

Es ist für mich gearbeitet und hoffen, dass es für Sie arbeitet auch!

Answer 2

Ich glaube, der Grund, warum sein nicht funktioniert, ist, weil Sie die background-image Eigenschaft des Symbols wird von der jQuery UI Standard Sprite Symbol Hintergrundbild überschrieben werden. Der Stil in Frage:

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

Dies hat eine höhere Spezifität als Ihr .fw-button-edit Selektor, so dass die Hintergrund-Bild proerty überschrieben. Da sie Sprites verwenden, enthält das Regelwerk .ui-icon-locked nur die background-position, die benötigt wird, um die Position des Sprite-Bildes zu erhalten. Ich glaube, die Verwendung würde funktionieren:

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

Oder etwas anderes mit genug Spezifität. Erfahren Sie mehr über CSS Spezifität hier: http://reference.sitepoint.com/css/specificity

Answer 3

Dies ist auf den von Yi Jiang und Panayiotis oben angegebenen Informationen basieren, und die jquery ui button sample code:

Wie ich eine frühere JSP-Anwendung wurde die Migration, die eine Symbolleiste mit Bildern pro Button hatte ich in das Bild haben wollte die Schaltfläche Deklaration selbst, anstatt eine separate Klasse für jede Symbolleistenschaltfläche zu erstellen.

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

Natürlich gab es viel mehr Tasten als nur die beiden oben. Der s-Tag ist über einen struts2 Tag, aber man konnte es nur mit einem beliebigen URL ersetzen

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

Das folgende Skript sucht nach dem Attributdatum-img vom Button-Tag, und setzt dann, dass als Hintergrundbild für die Taste.

Es setzt vorübergehend ui-icon-bullet (irgendeinen beliebigen vorhandenen Stil), der später geändert wird.

Diese Klasse definiert den temporären Stil (besser, um weitere Selektoren für die spezifische Symbolleiste hinzuzufügen, wenn Sie diesen verwenden möchten, so dass der Rest Ihrer Seite davon unberührt bleibt).Das aktuelle Bild wird durch das folgende Javascript ersetzt:

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

und die folgende 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

Meine Lösung benutzerdefinierte Symbole zu JQuery UI (mit Sprites) hinzuzufügen:

CSS:

.icon-example definiert die Position des Symbols in der benutzerdefinierten Symboldatei. .ui-icon.custom definiert die Datei mit benutzerdefinierten Symbolen.

Hinweis: Möglicherweise müssen Sie auch andere JQuery UI-Klassen (wie .ui-state-hover) definieren.

JavaScript:

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

Answer 5

Aufbauend auf msanjay Antwort, die ich dies für benutzerdefinierte Symbole für beide jquery ui Tasten und Radio-Buttons und arbeiten erweitert:

<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

Die Lösung wird bei dieser Link funktionierte gut für mich: 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

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

in HTML

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

in JavaScript

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