jQuery più temi su una pagina

Questo mi sta spingendo NUTS! Ho seguito il post qui, che proprio non sembra funzionare: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/jQuery più temi su una pagina

Ho un tema di base, per l'amor esempi è il tema Smoothness dalla galleria jQuery UI. Poi ho un tema "rosso" che in pratica colora i pulsanti rossi. Here is the theme I created.

Quindi vado a scaricare il tema. Scegliere Impostazioni avanzate, impostare l'ambito su "rosso" e il nome della cartella del tema su "rosso" e scaricare. Prima di tutto non sono del tutto sicuro al 100% quale cartella devo copiare sul mio progetto è la cartella 'sviluppo-bundle \ themes' (che contiene la mia cartella rossa) o la cartella '\ css \ red'?

Ho provato entrambi. Il post sopra sembra suggerire se copio la mia cartella di temi e il link al mio tema nel css funzionerà quando aggiungo una classe di 'rosso' a un div o elemento wrapper. Così ho collegato i temi in questo modo nel mio file:

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

I carichi tema di base e di tutte le opere doorey honkey ma il tema rosso non lo fa. Ho un pulsante di stile in questo modo:

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

Ho anche provato:

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

Né lavoro. Quando rimuovo il collegamento file 'themes/base/jquery.ui.all.css', i pulsanti non hanno lo stile. Pazzo! Mi sto tirando i capelli. Dove sto andando male? Sicuramente dovrebbero semplicemente rendere abbastanza facile scaricare JUST la cartella dei temi e fare riferimento al file ui.all.

fonte

2010-06-01 lloydphillips

Non l'ho provato, ma so che jQuery può rompere alle piccole cose. Hai messo '.red' come scope e non solo' red'? Inoltre, prova 'temi/red/ui.all.css" 'invece di' themes/red/jquery.ui.all.css "'. – Skoder

Ho provato il .red ieri prima di postare e questo non ha aiutato (ho dovuto andare a modificare il file css che il themeroller ha creato per cambiarlo tutto in .red). Proverò la modifica del nome del file in un attimo e ti faccio sapere. – lloydphillips

Skoda destra.

È necessario utilizzare l'elemento id, class o tagname nella notazione JQuery.

Per una classe: .class
un ID: #id
Per il tagname: tavolo

Faresti meglio scegliere il modo di classe, dato che non è solo più elegante delle altre ma molto più utilizzabile (può essere utilizzato su più oggetti) e non si incasinano elementi di layout come div o tabelle. Dopotutto, lo scope css aggiunge il valore fornito ad ogni definizione di css. cioè

.ui-icon { ... }

diventa

.scope .ui-icon { ... }

Edit: Assicurarsi che è stato incluso il foglio di stile giusto, mi sono il tutto lavorando con il seguente codice

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

non collegare il foglio di stile nella directory "developement-bundle", usa invece quella nella directory "css".

fonte

2010-06-01 20:28:08

Sto usando la classe. Il problema è che non riesco a caricare l'ambito rosso e sovrascrivere il tema base impostando il nome della classe. – lloydphillips

Dai un'occhiata alla mia modifica. –

ho aggiunto una nuova classe CSS per icone rosse:

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

e cambiare anche qui:

/* 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); }

Ho una cartella con le immagini rosse e blu. Quando voglio prendere un'immagine rossa, mi riferisco solo alla classe iconaRed, in questo modo:

<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;" />

fonte

2011-11-14 20:00:39

jQuery più temi su una pagina

risposta

Problemi correlati