jQuery temas múltiples en una página

¡Esto me está impulsando NUTS! He seguido el post aquí, que no parece estar funcionando: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/jQuery temas múltiples en una página

que tienen un tema de base, por causa de los ejemplos es el tema de la suavidad de la galería jQuery UI. Luego tengo un tema 'rojo' que básicamente colorea los botones de color rojo. Here is the theme I created.

Así que voy a descargar mi tema. Elija Configuración avanzada, establezca el alcance en 'rojo' y el nombre de mi carpeta de temas en 'rojo' y descárguelo. En primer lugar, no estoy 100% seguro de qué carpeta debo copiar a mi proyecto, ¿es la carpeta 'paquete de desarrollo \ temas' (que contiene mi carpeta roja) o la carpeta '\ css \ red'?

He intentado ambos. La publicación anterior parece sugerir que si copio mi carpeta de temas y el enlace a mi tema en el CSS, funcionará cuando agregue una clase de 'rojo' a un elemento o divisor de envoltura. Así que me he vinculado los temas como lo que en mi archivo:

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />

Las cargas del tema básico y hace todas las doorey lechoso, pero el tema de color rojo no lo hace. Tengo un botón con el estilo de esta manera:

<input type="submit" id="btn" value="A submit button" class="red" />

También he intentado:

<div class="red"> 
    <input type="submit" id="btn" value="A submit button" /> 
</div>

Ni trabajo. Cuando elimino el enlace del archivo CSS 'themes/base/jquery.ui.all.css', los botones no tienen ningún estilo. ¡Loca! Me estoy sacando el pelo. ¿Dónde estoy equivocado? Seguramente deberían simplemente facilitar la descarga JUSTA de la carpeta de temas y hacer referencia al archivo ui.all.

Fuente

2010-06-01 lloydphillips

No lo he probado, pero sé que jQuery puede romperse en cosas pequeñas. ¿Pusiste '.red' como el alcance y no solo' rojo'? Además, intente 'themes/red/ui.all.css" 'en lugar de' themes/red/jquery.ui.all.css "'. – Skoder

Probé .red ayer antes de publicar y eso no ayudó (tuve que ir y editar el archivo css que themeroller creó para cambiarlo a .red). Probaré el cambio en el nombre del archivo en un momento y te lo haré saber. – lloydphillips

Skoders derecho.

Debe usar el elemento id, class o tagname en la notación JQuery.

Para una clase: .class
Para un id: #id
Para el nombre de etiqueta: mesa

Será mejor que elegir la forma de clases, ya que no es sólo más elegante que los otros, pero mucho más útil (se puede usar en múltiples objetos) y no estropea ningún elemento de diseño como divs o tablas. Después de todo, css scope justs agrega el valor provisto a cada definición de css. es decir

.ui-icon { ... }

convierte

.scope .ui-icon { ... }

Editar: Asegúrese de que haya incluido la hoja de estilo correcto, tengo todo lo que trabaja con el siguiente código

<html> 
    <head> 
     <title>JQuery UI Theme Scope</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
     <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
     <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     <div class="red"> 
      <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     </div> 
    </body> 
</html>

no enlazan a la hoja de estilo En el directorio "developement-bundle", use el que está en el directorio "css".

Fuente

2010-06-01 20:28:08

Estoy usando clase. El problema es que no puedo obtener el alcance rojo para cargar y anular el tema base al establecer el nombre de la clase. – lloydphillips

Eche un vistazo a mi edición. –

He añadido una nueva clase css para los iconos rojos:

Icons 
---------------------------------- 


/* states and images */ 

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

Y cambiar también aquí:

/* states and images */ 

.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); } 

.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }

Tengo una carpeta con las imágenes rojas y azules. Cuando quiero tomar una imagen roja, solo hago referencia al icono de clase Rojo, así:

<img class="ui-iconRed ui-icon-bullet" title="Vendido" style="float: left;" /> 

//if want a blue just put the normal icon like this: 

<img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;" />

Fuente

2011-11-14 20:00:39

jQuery temas múltiples en una página

Respuesta

Cuestiones relacionadas