5

我对 Google 的 Closure Library 感到很困惑。我创建了一个带有Select Widget的简单页面，但它显然需要一些样式（元素看起来像纯文本，并且在下面的示例中，菜单项在按钮下方弹出）。

我假设库支持样式——我怎样才能融入它们？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>
4

3 回答 3

3

在实践中，搜索正确的 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 实现。

于 2011-02-08T08:18:27.303 回答
2

我只是使用像（对于你的情况）这样的咒语：

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

似乎没有更好的方法，虽然我还没有找到任何解释在 demos/dir 中拥有样式的背后......

于 2010-01-04T20:03:18.893 回答
1

Closure 向 HTML 节点添加了一系列 CSS 类，并且库提供了几个 CSS 来为组件提供样式。

我建议您浏览演示的源代码并找出 css id 和类。或者使用 Firebug (for firefox) 或 IE Developer Tools (for Internet Explorer 7/8) 找出 id's / classes，然后使用您自己的 CSS 设置它们的样式。

于 2010-03-19T00:28:30.613 回答