Come applicare il tema dell'interfaccia utente jQuery al mio normale html?

Question

Uso l'interfaccia utente jQuery per i vari widget come finestre di dialogo, pulsanti, ecc. Voglio continuare a utilizzare il tema per i miei altri elementi della pagina Web come avvisi di errore/avviso e stili di evidenziazione. Così sono andato alla pagina themeroller per vedere che cosa usano per il css in giro, per esempio, una notifica di allarme:

<div class="ui-widget"> 
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
     <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> Sample ui-state-error style.</p> 
    </div> 
</div> 

C'è un div involucro, arco con sfondo icona, ecc Posso solo copiare questi o fa l'javascript dell'interfaccia utente jQuery ne crea alcuni per me? Qual è il modo corretto di applicare temi a html non widget?

Answer 1

Applicalo semplicemente al tuo codice HTML. Non è necessario alcun javascript (ad eccezione dello stato hover).

Quando si utilizza il widget di jQueryUI, il Javascript crea tutto questo HTML con tali classi.

Se è necessario lo stato di passaggio del mouse, è necessario alternare la classe ui-state-hover. Per questo avrete bisogno di Javascript:

$('.ui-state-error').hover(function(){ 
    $(this).toggleClass('ui-state-hover'); 
}); 

Answer 2

È possibile per impostazione predefinita solo utilizzare il themeroller pre-definiti elementi sul tuo sito: pulsanti, icone, barre del titolo, ecc e tutti i widget jQuery come DatePicker, finestre di dialogo, evidenzia/errore - praticamente tutto il numero che vedi a http://jqueryui.com/themeroller/#themeGallery.

per archiviarlo è necessario copiare l'html e le classi appropriate per i tag html e il browser applicherà gli stili dal file themeroller.css incluso.

tuttavia, questo significa anche che il layout è un po 'limitato. Puoi ancora includere altri elementi non-themeroller a condizione di applicare le classi css corrette (.ui-state-default, .ui-state-hover, .ui-state-disabled, icone ecc.) Al tuo html per essere in grado di utilizzare il themeswitcher - vedi http://jqueryui.com/docs/Theming/API per l'elenco completo delle classi applicabili.