5

GoogleのClosureLibraryで足を濡らしています。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 は一連の CSS クラスを HTML ノードに追加し、ライブラリはいくつかの CSS を提供してコンポーネントにスタイルを与えます。

デモのソースを調べて、CSS ID とクラスを見つけることをお勧めします。または、Firebug (firefox の場合) または IE Developer Tools (Internet Explorer 7/8 の場合) を使用して id の / クラスを把握し、独自の CSS を使用してスタイルを設定します。

于 2010-03-19T00:28:30.613 に答える