1

現在、JQuery UI ウィジェット ファクトリhttp://wiki.jqueryui.com/w/page/12138135/Widget%20factoryは、カスタム ウィジェットを構築するためのすべての情報を提供していますが、ウィジェットを最初から作成して描画する方法をどこで見つけることができるか疑問に思っていました。必要に応じてウィジェット。さまざまな JQuery UI ウィジェットもゼロから構築されており、それらを添付するために使用するさまざまな html タグは機能上の目的のみに使用されているのでしょうか?

4

1 に答える 1

1

jQuery UI ウィジェットは通常、ウィジェットの基本的なニーズを持つ既存の DOM 要素で呼び出されます。ウィジェットが何であるかによっては、空の要素 (空の DIV など) になることもあります。

多くの場合、ウィジェットはそれをベースとして使用し、それ自体を正しくレンダリングするために多数の子要素を作成します。ウィジェットを呼び出さない限りdestroy、それらはそこに残り、いつでもスタイルなどをオーバーライドすることもできます.

完璧な例は、スライダー ウィジェットです。すべてのパラメーターをウィジェットに渡して、空の DIV などで呼び出すだけで、ハンドルやその他のパーツなどの必要なすべての子要素が作成され、jQuery UI の CSS フレームワークは、作成されたこれらの要素のスタイル設定を既に提供しています (ベースウィジェットが作成時に追加する CSS クラス)。

したがって、公式のスライダーの例のページでは、次のようになります。

<style>
    #demo-frame > div.demo { padding: 10px !important; }
    </style>
    <script>
    $(function() {
        $( "#slider" ).slider();
    });
    </script>

<div class="demo">

<div id="slider"></div>

</div>

それを生成します:

<div class="demo">

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a></div>

</div>
于 2012-05-21T06:13:50.250 に答える