1

現在、JQuery Mobile 用の最初のプラグインの構築に取り組んでいます。基本的なコードを機能させることができましたが、テーマの適用方法を理解するのに苦労しています。無駄に 2 時間のグーグル検索を行った後、次にどこを見ればよいか途方に暮れています。

基本的に: JQM のテーマからスタイルを取得するプラグインを作成するにはどうすればよいですか? 私が使用できる機械的レベルでテーマがどこに/どのように適用されるかについての参照はありますか? 私が構築しているプラ​​グインは、多少カスタマイズされた進行状況バーの表示であり、バーの色と境界線にテーマを使用したいと考えています。

4

1 に答える 1

0

jQuery Mobile のテーマは、視覚特性に関連するクラスの標準セットに基づいています。たとえば、.ui-btnクラスをボタンに追加し、.ui-iconクラスをアイコンに追加して、jQuery Mobile のテーマ規則に従う必要があります。もう 1 つの例は、.ui-icon-shadowクラスを使用して要素にクラスを追加し.ui-icon、シャドウを与える方法です。

jQuery Mobile ボタンの例を次に示します。

<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="f" title="Home">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Home</span>
        <span class="ui-icon ui-icon-home ui-icon-shadow">&nbsp;</span>
    </span>
</a>

したがって、これらのクラスを手動で HTML マークアップに追加するか、jQuery Mobile が公開する関数を使用してウィジェットを作成できます。

$('<ul data-role="listview"><li>FOOBAR</li></ul>').listview();

ソース: http://jquerymobile.com/demos/1.1.0/docs/lists/lists-methods.html

すべてのウィジェットのような機能がありlistview()、それらのほとんどはオプションを取り込むことができるため、ウィジェットがボックスシャドウを取得するかどうかを設定できます。

アップデート

ウィジェットに最も近いテーマを継承させるには、次のようにします。

//assuming `this` is the widget element
var theme = $(this).closest('[data-theme]').attr('data-theme') || 'a';
于 2012-06-19T22:31:46.977 に答える