web-dev-qa-db-fra.com

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 une de mes propres icônes qui ne fait pas partie du jeu d’icônes de la structure?

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?

jquery-uibuttonicons
43
Brett

Je pourrais aussi recommander:

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

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!

62
Panayiotis

Je crois que la raison pour laquelle cela ne fonctionnera pas, c'est parce que la propriété background-image de votre icône est remplacée par l'image d'arrière-plan de l'icône Sprite par défaut de l'interface utilisateur jQuery. Le style en question est: 

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

Cela a une spécificité supérieure à celle de votre sélecteur .fw-button-edit, remplaçant ainsi la propriété background-image. Comme ils utilisent des sprites, le jeu de règles .ui-icon-locked contient uniquement le background-position nécessaire pour obtenir la position de l'image Sprite. Je crois qu'en utilisant ceci fonctionnerait: 

.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 la spécificité CSS ici: http://reference.sitepoint.com/css/specificity

14
Yi Jiang

Ceci est basé sur les informations fournies par Yi Jiang et Panayiotis ci-dessus, et le code d'échantillon du bouton jquery ui :

Lors de la migration d'une application JSP antérieure comportant une barre d'outils avec des images par bouton, je souhaitais que l'image soit insérée dans la déclaration du bouton, 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 précédents. La balise s ci-dessus est une balise struts2, mais vous pouvez simplement la 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 à partir de la balise button, puis le définit comme image d'arrière-plan du bouton. 

Il définit temporairement ui-icon-bullet (tout style existant arbitraire), qui est ensuite modifié ultérieurement.

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

La solution à ce lien a très bien fonctionné pour moi: 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();
});​
2
Amber

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

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

en HTML

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

en JavaScript

$("selector").button({
    icons: { primary: "custom-class" }
});
0
Wagne Medrado
// 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 } });
0
Vin

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 de l'interface utilisateur JQuery (telles que .ui-state-hover).

JavaScript:

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