¿Cómo aplicar el tema jQuery UI a mi html normal?

Question

Uso jQuery UI para los diferentes widgets, como cuadros de diálogo, botones, etc. Deseo continuar utilizando el tema para mis otros elementos de página web, como avisos de error/alerta y resaltar estilos. Así que fui a la página ThemeRoller para ver lo que utilizan para el css en torno, por ejemplo, un aviso de alerta:

<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> 

Hay un div contenedor, palmo con el fondo icono, etc. No acabo de copiar estos o hace jQuery UI javascript crea algo para mí? ¿Cuál es la forma correcta de aplicar temas a html que no sean widgets?

Answer 1

Simplemente aplique eso a su propio HTML. No se necesita Javascript (a excepción del estado de vuelo estacionario).

Cuando está utilizando el widget de jQueryUI, el Javascript crea todo ese HTML con esas clases.

Si necesita el estado de desplazamiento, tendrá que alternar la clase ui-state-hover. Para que usted necesita Javascript:

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

Answer 2

Usted puede por defecto sólo utilizar el ThemeRoller-elementos pre-definidos en su sitio: botones, iconos, barras de título, etc., y todos los widgets jQuery como datepicker, diálogos, resaltar/error: prácticamente todo lo que ves al http://jqueryui.com/themeroller/#themeGallery.

para archivar esto, debe copiar el html y las clases apropiadas para las etiquetas html, y el navegador aplicará los estilos desde su themeroller.css incluido.

sin embargo, esto también significa que está un poco limitado con su diseño. Todavía puede incluir otros elementos que no sean Themeroller siempre que aplique las clases correctas de css (.ui-state-default, .ui-state-hover, .ui-state-disabled, icons etc.) a su html para que sea capaz de usar el temswitch - ver http://jqueryui.com/docs/Theming/API para la lista completa de las clases aplicables.