How can CSS be applied to components from Google Closure Library?_问答_开发者

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

开发者 https://www.devze.com 2022-12-15 01:03 出处：网络

I\'m getting my feet wet with Google\'s Closure Library.I\'ve cr开发者_如何学JAVAeated a simple page with a Select Widget, but it clearly needs some styling (element looks like plain text, and in the

I'm getting my feet wet with Google's Closure Library. I've cr开发者_如何学JAVAeated a simple page with a Select Widget, but it clearly needs some styling (element looks like plain text, and in the example below the menu items pop up beneath the button).

I'm assuming the library supports styles -- how can I hook into them? Each example page in SVN seems to use its own CSS.

Abbreviated example follows:

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

In practice, the search for the right CSS should start with the demo page for the widget you want to use. By examining the HTML of the page, it should be easy to identify the stylesheets that the demo depends on by finding the tags. In the case of goog.ui.HoverCard, the appropriate elements from hovercard.html are:

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

Ignore css/demo.css, which defines CSS rules to ensure that the look of the demo pages is consistent, so most of the code in css/demo.css is specific to the demos, not the widget, so it should not be included in your application. Do not forget to look at css/common.css, which contains a display inline block xbrowser implementation, which many widgets use.

I just use incantations like (for your case):

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

There doesn't seem to be a better way, although I haven't found any explanation behind having the styles in demos/ dir...

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

I suggest you go through the source of the demos and find out the css ids and classes. Or figure out the id's / classes using Firebug (for firefox) or IE Developer Tools (for Internet Explorer 7/8) and then style them using your own CSS.