L'interfaccia utente jQuery è dotata di icone pratiche in un'immagine sprite; vedere lo themeroller.Utilizzo delle icone dell'interfaccia utente jQuery
Ho un elemento input per il quale voglio l'icona dell'orologio (con classe .ui-icon-clock) come immagine di sfondo. Come posso avere un'icona di sfondo su input?
basta usare uno span vuoto e aggiungere le classi dell'interfaccia utente jQuery.
<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />
si deve ignorare lo stile di visualizzazione per rendere inline-block, piuttosto che blocco altrimenti l'ingresso sarà spinto alla riga successiva.
Oltre a ciò, non sono sicuro di cosa stai cercando quando dici di rendere l'orologio l'immagine di sfondo.
$("span").css({
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px;
});
si dovrebbe scaricare un tema jqueryui da http://jqueryui.com/themeroller/ Fare clic sulla scheda Galleria sul ThemeRoller e scegliere quello che ti piace –
È possibile farlo con lo script dell'interfaccia utente JQuery.
JS:
$(function() {
$("input").button({
icons: {
primary: ".ui-icon-clock"
},
text: false
})
});
HTML:
<input>some text</input>
è davvero questo la risposta giusta? Ho pensato che definire in modo esplicito gli stili in html fosse fortemente scoraggiato dall'unione dei problemi di "contenuto" e "visualizzazione". –
Hai ragione, ma le best practice CSS sono un esercizio per il lettore. La risposta identifica ciò che serve per visualizzare un'icona jQuery. Le classi 'ui-icon' e' ui-icon-clock' e fanno sì che il tuo elemento html occupi spazio. – BZink
-1 Le migliori pratiche sono per tutti. Nessun motivo per non mettere la migliore risposta possibile qui. –