Changer l'icône d'un bouton UI jQuery avec sa propre image
actuellement j'ai le bouton Suivant jQuery UI:
$('#button').button(
{
label: 'Test',
icons: {primary: 'ui-icon-circle-plus', secondary: null}
}
);
je souhaite utiliser sa propre image pour le bouton " personnalisés.png".
Comment puis-je y parvenir?
7 réponses
définissez vous-même un style, comme ceci:
.ui-icon-custom { background-image: url(images/custom.png); }
alors utilisez - le quand 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 images sous votre CSS...le même endroit que la carte de L'icône de jQuery UI est typiquement. Lorsque l'icône est créé, il obtient une classe comme ceci: class="ui-icon ui-icon-custom" et ui-icon classe ressemble à ceci (peut-être une image différente, en fonction du thème):
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
donc dans votre style vous êtes juste dominant que background-image si nécessaire, modifier la largeur, la hauteur, etc.
jetez un coup d'oeil au commentaire de Nick Craver. J'ai essayé sa réponse telle quelle, mais ça ne m'a pas aidé. Le problème (je suppose) était que le ui-icon-custom class était à la fin de la liste des classes, et ne semblait pas l'annuler à l'original ui-icon image d'arrière-plan de la classe.
Ce que j'ai fait pour le faire fonctionner a ajouter !important à la fin de l'icône css comme
.ui-icon-custom { background-image: url(images/custom.png) !important; }
vous pourriez avoir à changer les propriétés de hauteur et de largeur, mais cela a fonctionné pour moi.
peut-être que je manque quelque chose dans L'opération, mais cela fonctionne pour moi sans beaucoup de problème. Vous pouvez définir le bouton comme un DIV et mettre une table à l'intérieur. Aucun dépassement de css et vous pouvez toujours utiliser les 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>
recherche dans le fichier CSS de jQuery ui pour le ui-icon-circle-plus classe puis copiez-le pour votre propre image.
Si seulement une image à afficher sur le bouton, sans étiquette ou d'un 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 l'étiquette ou le texte, l'explication de tschlarm ci-dessus est meilleure.
Vérifier 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 juste ce que vous voulez et jquery va créer la classe pour vous.
facile ou facile
#bildwechseln {
background-image: url('../images/my-png/bild.png');
width: 140px;
height: 140px;}
<button id="bildwechseln"></button>
Salutations de l'Allemagne