Comment ajouter une icône personnalisée à un thème jQuery UI standard ?

Question

Il est facile d'utiliser l'une des icônes disponibles dans le jeu d'icônes standard :

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

Mais que faire si je veux ajouter une de mes propres icônes qui ne fait pas partie du jeu d'icônes du cadre ?

Je pensais que ce serait aussi simple que de lui donner sa propre classe CSS avec une image d'arrière-plan, mais cela ne fonctionne pas :

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

Des suggestions ?

Answer 1

Je pourrais aussi vous recommander :

.ui-button .ui-icon.you-own-cusom-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.you-own-cusom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

puis tapez simplement le code JS :

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

Cela a marché pour moi et j'espère que cela marchera pour vous aussi !

Answer 2

Je crois que la raison pour laquelle il ne fonctionne pas est que votre icône background-image est remplacée par l'image d'arrière-plan de l'icône du sprite par défaut de jQuery UI. Le style en question est :

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

Cela a une plus grande spécificité que votre .fw-button-edit et remplace ainsi la propriété background-image. Comme ils utilisent des sprites, les .ui-icon-locked ne contient que l'ensemble de règles background-position nécessaire pour obtenir la position de l'image du sprite. Je pense qu'utiliser ceci fonctionnerait :

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

Ou quelque chose d'autre avec suffisamment de spécificité. Pour en savoir plus sur la spécificité des CSS, cliquez ici : http://reference.sitepoint.com/css/specificity

Answer 3

Ceci est basé sur les informations fournies par Yi Jiang et Panayiotis ci-dessus, ainsi que sur les données de l'enquête de la Commission européenne. exemple de code pour les boutons de l'interface utilisateur jquery :

Lors de la migration d'une ancienne application JSP qui comportait une barre d'outils avec des images par bouton, je voulais que l'image soit intégrée à la déclaration du bouton lui-même plutôt que de créer une classe distincte pour chaque bouton de la barre d'outils.

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

Bien sûr, il y avait beaucoup plus de boutons que les deux ci-dessus. Le tag s ci-dessus est un tag struts2, mais vous pourriez le remplacer par n'importe quelle URL

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

Le script ci-dessous recherche l'attribut data-img de la balise du bouton, puis le définit comme image d'arrière-plan pour le bouton.

Il définit temporairement ui-icon-bullet (n'importe quel style arbitraire existant) qui sera modifié plus tard.

Cette classe définit le style temporaire (il est préférable d'ajouter des sélecteurs supplémentaires pour la barre d'outils spécifique si vous prévoyez de l'utiliser, afin que le reste de votre page ne soit pas affecté). L'image réelle sera remplacée par le Javascript ci-dessous :

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

et le Javascript suivant :

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

Ma solution pour ajouter des icônes personnalisées à JQuery UI (en utilisant des sprites) :

CSS :

.icon-example {
    background-position: 0 0;
}

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

.icon-example définit la position de l'icône dans le fichier d'icônes personnalisées. .ui-icon.custom définit le fichier avec des icônes personnalisées.

Remarque : il se peut que vous deviez définir d'autres classes JQuery UI (telles que .ui-state-hover ) également.

JavaScript :

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

Answer 5

En m'appuyant sur la réponse de msanjay, j'ai étendu cette méthode pour qu'elle fonctionne avec des icônes personnalisées pour les boutons jquery ui et les boutons radio :

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