CSS 如何应用于 Google Closure Library 中的组件？
我正在尝试使用 Google 的 Closure Library。我创建了一个带有选择小部件，但它显然需要一些样式（元素看起来像纯文本，在下面的示例中，菜单项在按钮下方弹出）。
我假设该库支持样式——我如何连接它们？ SVN 中的每个示例页面似乎都使用自己的 CSS。
缩写示例如下：
<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>
I'm getting my feet wet with Google's Closure Library. I've created 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在实践中，搜索正确的 CSS 应该从您要使用的小部件的演示页面开始。通过检查页面的 HTML，应该可以通过查找标签轻松识别演示所依赖的样式表。对于 goog.ui.HoverCard，hovercard.html 中的相应元素是：
Ignore css/demo.css，它定义了 CSS 规则以确保演示页面的外观一致，因此大部分代码都在 css/ 中demo.css 特定于演示，而不是小部件，因此不应将其包含在您的应用程序中。
不要忘记查看 css/common.css，其中包含许多小部件使用的显示内联块 xbrowser 实现。
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:
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.
我只是使用像（对于你的情况）这样的咒语：
似乎没有更好的方法，尽管我没有找到在 demos/ 目录中使用样式背后的任何解释...
I just use incantations like (for your case):
There doesn't seem to be a better way, although I haven't found any explanation behind having the styles in demos/ dir...
Closure 向 HTML 节点添加了一系列 CSS 类，并且该库提供了多个 CSS 来为组件提供样式。
我建议你仔细阅读演示的源代码并找出 css id 和类。或者使用 Firebug（对于 firefox）或 IE 开发工具（对于 Internet Explorer 7/8）找出 id/类，然后使用您自己的 CSS 设置它们的样式。
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.