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

我正在用Google的Closure Library弄湿我的脚。我用Select Widget创建了一个简单的页面，但它显然需要一些样式（元素看起来像纯文本，并且在下面的示例中按钮下方弹出菜单项）。CSS如何应用于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>

来源

2009-12-26 Jason

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

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

目前似乎没有更好的办法，虽然我还没有发现在演示/目录中有风格的任何解释...

来源

2010-01-04 20:03:18 Nickolay

这也是我发现的唯一解决方案。 – 2011-02-07 17:22:19

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

我建议你仔细阅读演示的源代码并找出css ID和类。或者使用Firebug（用于firefox）或IE Developer Tools（用于Internet Explorer 7/8）找出id的类，然后使用自己的CSS对其进行设计。

来源

2010-03-19 00:28:30 user297006

实际上，搜索正确的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-08 08:18:27

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

回答

相关问题