Geek Answers Handbook

How can CSS be applied to components from the Google Closure Library?

I urinate my feet in the Google Closure Library. I created a simple page with Select Widget , but it clearly needs some kind of style (the element looks like plain text, and in the example below the menu items appear under the button).

I assume the library supports styles - how can I connect to them? Each example page in SVN seems to use its own CSS.

The following is a shortened example:

<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>
+5
source share
3 answers

CSS , . HTML- , , , . goog.ui.HoverCard hovercard.html:

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

css/demo.css, CSS, , , css/demo.css , , . css/common.css, xbrowser , .

+3

( ):

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

, , demos/dir...

+2

Closure adds a series of CSS classes to HTML nodes, and the library provides several CSS to give the components a style.

I suggest you familiarize yourself with the source of the demos and find out the identifiers and classes of css. Or specify id / classes using Firebug (for firefox) or IE Developer Tools (for Internet Explorer 7/8), and then create them using your own CSS.

+1
source

More articles:


All Articles