Wie kann CSS auf Komponenten von Google Closure Library angewendet werden?

Ich bekomme meine Füße nass mit Google Closure Library. Ich habe eine einfache Seite mit einer Select Widget erstellt, aber es braucht eindeutig etwas Styling (Element sieht wie einfacher Text aus, und im Beispiel unten erscheinen die Menüpunkte unterhalb der Schaltfläche).Wie kann CSS auf Komponenten von Google Closure Library angewendet werden?

Ich nehme an, die Bibliothek unterstützt Stile - wie kann ich in ihnen einhaken? Jede Beispielseite in SVN scheint ein eigenes CSS zu verwenden.

Verkürzte Beispiel folgt:

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

Quelle

2009-12-26 Jason

Ich benutze Beschwörungen wie (für Ihren Fall):

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

Es gibt nicht einen besseren Weg zu sein scheint, obwohl ich nicht gefunden haben, Jede Erklärung hinter den Stilen in demos/dir ...

Quelle

2010-01-04 20:03:18 Nickolay

Dies ist die einzige Lösung, die ich gefunden habe, auch. –

Closure fügt den HTML-Knoten eine Reihe von CSS-Klassen hinzu, und die Bibliothek stellt mehrere CSS bereit, um den Komponenten einen Stil zu geben.

Ich schlage vor, Sie gehen durch die Quelle der Demos und finden Sie die CSS-IDs und Klassen. Oder ermitteln Sie die IDs/Klassen mithilfe von Firebug (für Firefox) oder IE-Entwicklertools (für Internet Explorer 7/8) und stylen Sie sie dann mit Ihrem eigenen CSS.

Quelle

2010-03-19 00:28:30 user297006

In der Praxis sollte die Suche nach dem richtigen CSS mit der Demoseite für das Widget beginnen, das Sie verwenden möchten. Durch die Überprüfung des HTML-Codes der Seite sollte es einfach sein, die Stylesheets zu identifizieren, von denen die Demo abhängig ist, indem die Tags gefunden werden. Im Fall von goog.ui.HoverCard die entsprechenden Elemente aus hovercard.html sind:

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

css/demo.css ignorieren, die CSS-Regeln definiert, um sicherzustellen, dass das Aussehen der Demo-Seiten konsistent ist, so Der Großteil des Codes in css/demo.css ist spezifisch für die Demos, nicht für das Widget, daher sollte es nicht in Ihrer Anwendung enthalten sein. Vergessen Sie nicht, css/common.css zu betrachten, das eine Inline-Block-xbrowser-Implementierung enthält, die von vielen Widgets verwendet wird.

Quelle

2011-02-08 08:18:27

Wie kann CSS auf Komponenten von Google Closure Library angewendet werden?

Antwort

Verwandte Themen