À l'aide de jQuery UI icônes

Question

jQuery UI vient à portée de main des icônes dans une image sprite; voir le themeroller.

J'ai un input élément pour lequel je veux l'icône de l'horloge (avec la classe .ui-icon-clock) comme image d'arrière-plan. Comment puis-je avoir une icône sur fond d'un input?

Answer 1

il suffit d'utiliser une vide span et ajouter le jQuery UI classes.

<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />

Vous devez remplacer le style d'affichage pour le rendre inline-block plutôt que de bloquer sinon, l'entrée sera poussé à la ligne suivante.

Autre que cela, je ne suis pas sûr exactement ce que vous êtes après, quand tu dis faire de l'horloge l'image d'arrière-plan.

Answer 2

Vous pouvez le faire avec JQuery UI script.

JS:

$(function() {
   $("input").button({
     icons: {
       primary: ".ui-icon-clock"
     },
     text: false
   })
});

HTML:

<input>some text</input>

Voir http://jqueryui.com/button/#icons

Answer 3

$( "span").css({ 
width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px; 
});