In che modo i CSS possono essere applicati ai componenti dalla Google Closure Library?

Mi sto bagnando i piedi con Google's Closure Library. Ho creato una semplice pagina con un Select Widget, ma ha chiaramente bisogno di un po 'di stile (l'elemento appare come testo normale, e nell'esempio sotto le voci del menu appaiono sotto il pulsante).In che modo i CSS possono essere applicati ai componenti dalla Google Closure Library?

Suppongo che la libreria supporti gli stili, come posso collegarli? Ogni pagina di esempio in SVN sembra utilizzare il proprio CSS.

esempio abbreviato segue:

<body> 

<div id="inputContainer"></div> 

<script src="closure-library-read-only/closure/goog/base.js"></script> 
<script> 
    goog.require('goog.dom'); 
    goog.require('goog.ui.Button'); 
    goog.require('goog.ui.MenuItem'); 
    goog.require('goog.ui.Select'); 
</script> 
<script> 
    var inputDiv = goog.dom.$("inputContainer"); 

    var testSelect = new goog.ui.Select("Test selector"); 
    testSelect.addItem(new goog.ui.MenuItem("1")); 
    testSelect.addItem(new goog.ui.MenuItem("2")); 
    testSelect.addItem(new goog.ui.MenuItem("3")); 
    var submitButton = new goog.ui.Button("Go"); 

testSelect.render(inputDiv); 
submitButton.render(inputDiv); 
</script> 

</body>

fonte

2009-12-26 Jason

mi basta usare incantesimi simili (per il vostro caso):

<link rel="stylesheet" href="closure-library/closure/goog/demos/css/menubutton.css">

Ci non sembra essere un modo migliore, anche se non ho trovato qualsiasi spiegazione dietro avere gli stili in demo/dir ...

fonte

2010-01-04 20:03:18 Nickolay

Questa è l'unica soluzione che ho trovato, anche. –

Closure aggiunge una serie di classi CSS ai nodi HTML e la libreria fornisce diversi CSS per dare ai componenti uno stile.

Ti suggerisco di passare attraverso la fonte delle demo e scoprire gli ID e le classi di css. Oppure scopri le id/classi usando Firebug (per firefox) o IE Developer Tools (per Internet Explorer 7/8) e poi modificale usando il tuo CSS.

fonte

2010-03-19 00:28:30 user297006

In pratica, la ricerca del CSS corretto dovrebbe iniziare con la pagina demo del widget che si desidera utilizzare. Esaminando l'HTML della pagina, dovrebbe essere facile identificare i fogli di stile da cui dipende la demo trovando i tag. Nel caso di goog.ui.HoverCard, gli elementi appropriati dal hovercard.html sono:

<link rel="stylesheet" href="css/demo.css"> 
<link rel="stylesheet" href="../css/hovercard.css">

Ignora css/demo.css, che definisce le regole CSS per garantire che l'aspetto delle pagine demo è coerente, in modo la maggior parte del codice in css/demo.css è specifico per le demo, non per il widget, quindi non dovrebbe essere incluso nella tua applicazione. Non dimenticate di guardare css/common.css, che contiene un'implementazione di blocco in linea del blocco xbrowser, che molti widget utilizzano.

fonte

2011-02-08 08:18:27

In che modo i CSS possono essere applicati ai componenti dalla Google Closure Library?

risposta

Problemi correlati