43 votes

Comment ajouter une icône personnalisée à un thème standard de l'interface utilisateur jQuery?

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 se passe-t-il si je veux ajouter l'une de mes propres icônes qui ne fait pas partie du jeu d'icônes du framework?

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

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

Aucune suggestion?

62voto

Panayiotis Points 486

Je pourrais aussi 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 fonctionné pour moi et j'espère que cela fonctionnera pour vous aussi!

14voto

Yi Jiang Points 28098

Je crois que la raison pourquoi sa ne fonctionne pas c'est que vous êtes de l'icône de la background-image propriété est remplacée par l'INTERFACE utilisateur de jQuery par défaut sprite icône de l'image d'arrière-plan. 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 sélecteur, ce qui annulera le background-image propriété. Depuis qu'ils utiliser des sprites, l' .ui-icon-locked jeu de règles contient uniquement de l' background-position nécessaire pour obtenir l'image du sprite de la position. Je crois que l'aide ce serait le travail:

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

Ou quelque chose d'autre avec suffisamment de spécificité. En savoir plus sur les spécificités CSS ici: http://reference.sitepoint.com/css/specificity

3voto

msanjay Points 367

Ceci est basé sur les informations fournies par Yi Jiang et Panayiotis ci-dessus, et le jquery ui button exemple de code:

Comme je l'ai été la migration d'une version antérieure de JSP de l'application qui a une barre d'outils avec des images par bouton, je voulais avoir l'image à l'intérieur du bouton de la déclaration elle-même plutôt que de créer une catégorie distincte pour chaque bouton de 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 s tag ci-dessus est un struts2 tag, mais vous pourriez tout simplement de la remplacer avec une URL

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

Le script ci-dessous qui ressemble pour l'attribut data-img à partir du bouton de la balise, puis des ensembles comme l'image de fond pour le bouton.

Il définit temporairement ui-icon-balle (n'importe quel style existant) qui est ensuite modifié par la suite.

Cette classe définit la temporaire de style (il est mieux d'ajouter d'autres sélecteurs d'une barre d'outils spécifique si vous prévoyez de l'utiliser, de sorte que le reste de votre page reste inchangée). L'image réelle sera remplacé par le code Javascript ci-dessous:

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

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

0voto

Hubo Points 21

Ma solution pour ajouter des icônes personnalisées à l'interface utilisateur de JQuery (à l'aide de 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é. .ui-icon.custom définit le fichier avec des icônes personnalisées.

Remarque: Vous devrez peut-être également définir d'autres classes d'interface utilisateur JQuery (telles que .ui-state-hover ).

JavaScript:

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

0voto

user460084 Points 152

En m'appuyant sur msanjay answer, j'ai étendu cela pour qu'il 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');
      }
    });
}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X