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中的組件？

回答

相關問題