web-dev-qa-db-fra.com

Changer l’icône d’un bouton jQuery UI avec sa propre image

Actuellement, j'ai le bouton suivant de l'interface utilisateur jQuery:

$('#button').button(
  {
    label: 'Test',
    icons: {primary: 'ui-icon-circle-plus', secondary: null}
  }
);

Je souhaite utiliser sa propre image pour le bouton appelé 'custom.png'.

Comment je peux y arriver?

jqueryimagejquery-uibuttonuibutton
24
Ivelin Nikolaev

Définissez vous-même un style, comme ceci:

.ui-icon-custom { background-image: url(images/custom.png); }

Ensuite, utilisez-le lorsque vous appelez .button(), comme ceci:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

Cela suppose que votre icône personnalisée se trouve dans le dossier des images sous votre CSS ... au même endroit que la mappe d'icônes de l'interface utilisateur jQuery. Lorsque l'icône est créée, elle obtient une classe comme celle-ci: class="ui-icon ui-icon-custom", et cette classe ui-icon ressemble à ceci (peut-être une image différente, selon le thème):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

Donc, dans votre style, vous remplacez simplement ce background-image, modifiez si nécessaire la largeur, la hauteur, etc.

32
Nick Craver

Regardez le commentaire de Nick Craver. J'ai essayé sa réponse exactement telle quelle, mais cela ne m'a toujours pas aidé. Le problème (je suppose) était que la classe ui-icon-custom était à la fin de la liste des classes et ne semblait pas la remplacer par l'image d'arrière-plan de la classe ui-icon d'origine.

Ce que j’ai fait pour que cela fonctionne est d’ajouter! Important à la fin du css de l’icône,

.ui-icon-custom { background-image: url(images/custom.png) !important; }

Vous devrez peut-être modifier les propriétés height et width, mais cela a fonctionné pour moi. 

34
Jim Gilmartin

Peut-être que je manque quelque chose dans le PO, mais cela fonctionne pour moi sans trop de problème. Vous pouvez définir le bouton en tant que DIV et y insérer un tableau. Pas de substitution de CSS et vous pouvez toujours utiliser les deux icônes définies par jQuery et votre propre icône de taille personnalisée. Vous pouvez également placer l'icône n'importe où autour du texte (en haut, à gauche, à droite, etc.).

$(document).ready(function()
{
    $('#btn').button();
});

<div id='btn'>
<table>
<tr>
<td><img src='images/custom.png' width="24" height="24" /></td>
<td>Search</td>
</tr>
</table>
</div>
5
tschlarm

Si seulement une image à afficher sur le bouton, sans étiquette ni texte, je fais ceci:

$('#button').button();

pour remplacer cet élément d'image pour devenir un bouton:

<img src="images/custom.png" width="28" height="28" id="button">

Mais si vous préférez suivre avec une étiquette ou un texte, l'explication de tschlarm ci-dessus est préférable.

1
PutihTua

cherchez dans le fichier css jquery ui la classe ui-icon-circle-plus, puis copiez-le pour votre propre image.

1
Paul Creasey

Vérifiez ce lien:

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

.bouton-image { background: #004963; width: 80px; }
.ui-icon-wifi {
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;
}
<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

Dans "data-icon", mettez ce que vous voulez et jquery créera la classe pour vous.

0
jftremblay