gpt4 book ai didi

javascript - 如何将 CSS 应用于 Google Closure 库中的组件?

转载 作者:数据小太阳 更新时间:2023-10-29 06:13:53 26 4
gpt4 key购买 nike

我正在接触 Google 的闭包库。我创建了一个带有 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>

最佳答案

在实践中,搜索正确的 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规则来保证demo页面的外观是一致的,所以css/demo.css中的大部分代码是针对demo的,而不是widget的,所以应该不包括在您的申请中。不要忘记查看 css/common.css,其中包含许多小部件使用的显示内联 block xbrowser 实现。

关于javascript - 如何将 CSS 应用于 Google Closure 库中的组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1963394/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com