jquery - example - sortable js

Cómo aplicar múltiples temas de jQuery UI

Question

¿Alguien tiene alguna técnica / sugerencia / trucos para ayudarme a organizar e implementar múltiples temas de jQuery UI en una sola aplicación?

He resultado en el uso de !important ya que parece ser la forma más segura de forzar anulaciones de estilo, pero este método no es muy deseable.

Answer 1

Hola, busqué durante horas, y finalmente encontré la manera de hacerlo desde FilamentGroup, con tutoriales y ejemplos de trabajo.
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

Answer 2

Sí, pero depende de lo que quieras decir.

Digamos que desea que el elemento A se aplique con el tema X y el elemento B con el tema Y. jQuery Theme Roller tiene esta característica incorporada. Cuando vaya a descargar un tema ( aquí ), haga clic en Configuración avanzada del tema a la derecha. Aquí puede establecer el "Alcance de CSS". Esto le permitirá aplicar las clases jQuery UI (es decir, ui-corners-all , etc.) de un tema específico. Aquí está la descripción que dan para esta opción:

Este campo le permite especificar un alcance de CSS para limitar su tema a una porción particular de una página. Esto es útil cuando se usan múltiples temas en una página. Si no proporciona un alcance CSS, su tema se aplicará a todos los elementos de la interfaz de usuario en una página.

En la mayoría de las situaciones, no necesitará especificar un alcance de CSS. Tenga en cuenta: si proporciona un alcance CSS, no obtendrá una página de ejemplo incluida en su descarga.

También puede cambiar el nombre de la carpeta del tema :

Este campo le permite especificar un nombre para la carpeta de temas en su descarga. Esto es útil si planea usar múltiples temas en una página. Por defecto es "tema".

Sin embargo, si desea crear un tema completamente nuevo, tomando prestados fragmentos de varias temáticas, tiene dos opciones: edite los archivos CSS y de imágenes usted mismo (no recomendado) o use la herramienta Rollo de temas para crear la suya propia.

Cómo utilizar:

CSS Scope es solo un selector de CSS. Digamos que el tema X debería aplicarse solo a todos los elementos con clase aClass . En este caso, su alcance de CSS sería .aClass . Por lo tanto, si desea agregar esquinas redondeadas desde el tema X a un elemento (suponiendo que su Ámbito CSS se haya establecido en .aClass ), su HTML desearía algo como esto:

<div class=''ui-rounded-corners aClass''>
    Content    
</div>

Answer 3

Tendrá algunos problemas si aplica esta técnica a widgets ui que se superponen y se anexan al cuerpo: diálogo, selector de fecha, autocompletar ...

en el caso de autocompletar, puede hacer lo siguiente para obtener un elemento padre con la clase de ámbito: no es suficiente agregar la clase de ámbito al UL de la autocompleta.

jQuery(''.autocomplete'').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery(''.ui-autocomplete'').wrap(''<span class="xxSCOPPEDCLASSxx"></span>'');
    }
});