Question

我正熟悉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>

Answer 1

实际上，搜索正确的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实现。

Answer 2

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

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

似乎没有更好的方法，虽然我没有找到任何解释背后的演示/目录...

Answer 3

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

我建议你浏览一下演示的来源，找出css ID和类。或者使用Firebug（对于firefox）或IE Developer Tools（对于Internet Explorer 7/8）计算id / classes，然后使用自己的CSS对它们进行样式化。

如何将CSS应用于Google Closure库中的组件？

3 个答案: