2009-12-26 4 views
5

Je me mouille les pieds avec la bibliothèque de fermeture de Google. J'ai créé une page simple avec un Select Widget, mais il a clairement besoin d'un style (élément ressemble à du texte brut, et dans l'exemple ci-dessous les éléments de menu apparaissent sous le bouton).Comment CSS peut-il être appliqué aux composants à partir de Google Closure Library?

Je suppose que la bibliothèque prend en charge les styles - comment puis-je les raccorder? Chaque page d'exemple dans SVN semble utiliser son propre CSS.

exemple abrégé suit:

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

Répondre

2

je viens d'utiliser comme des incantations (pour votre cas):

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

Il ne semble pas être une meilleure façon, même si je ne l'ai pas trouvé toute explication derrière avoir les styles dans démos/dir ...

+0

C'est la seule solution que j'ai trouvée, aussi. –

1

La fermeture ajoute une série de classes CSS aux nœuds HTML et la bibliothèque fournit plusieurs CSS pour donner un style aux composants.

Je vous suggère de parcourir la source des démos et de trouver les identifiants et les classes css. Ou trouvez les id/classes en utilisant Firebug (pour firefox) ou IE Developer Tools (pour Internet Explorer 7/8) et ensuite les styler en utilisant votre propre CSS.

3

En pratique, la recherche du bon CSS devrait commencer par la page de démonstration du widget que vous voulez utiliser. En examinant le code HTML de la page, il devrait être facile d'identifier les feuilles de style dont dépend la démo en trouvant les balises. Dans le cas de goog.ui.HoverCard, les éléments appropriés de hovercard.html sont:

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

Ignore css/demo.css, qui définit les règles CSS pour faire en sorte que l'apparence des pages de démonstration est cohérente, donc La plupart du code dans css/demo.css est spécifique aux démos, pas au widget, il ne doit donc pas être inclus dans votre application. N'oubliez pas de regarder css/common.css, qui contient une implémentation de xbrowser de bloc en ligne, que de nombreux widgets utilisent.

Questions connexes