1

jQuery Mobile Docsによると、コンテナ内のすべてのフォーム要素はdata-theme、そのコンテナのを採用します。

Query Mobile には豊富なテーマ システムがあり、ページとフォームのスタイルを完全に制御できます。デフォルトでは、コンテナー内のすべてのフォーム要素は、親と同じテーマの色見本を自動的に採用します。これにより、最小限の作業でフォーム要素をレイアウトに溶け込ませることができます。data-theme 属性を個々のフォーム要素に適用して、文字テーマの色見本を適用して、デザインのコントラストと強調を作成できます。

しかし、jQuery Mobile (1.2) の最新リリースでは、これはもはや当てはまらないようです。フォーム要素が、直接の親data-themeではなく の を継承するようになったことに気付きました。page

たとえば、次のマークアップが与えられた場合

<div data-role="page">
<div data-role="header"><h3>Header</h3></div>
<div data-role="content" data-theme="a">
      <ul data-role="listview" data-inset="true" data-theme="c">
        <li>
            <input type="button" value="test" />
        </li>
        <li>
            <select >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </li>
         <li>
           <div data-role="fieldcontain"  data-theme="c" >
         <fieldset data-role="controlgroup"  data-theme="c"  data-type="horizontal" >
            <legend>Group Size</legend>

            <input type="radio" name="testRdoGrp" id="testRdoGrp1" checked="checked" value="1" />
            <label for="testRdoGrp1">1</label>       
            <input type="radio" name="testRdoGrp" id="testRdoGrp2" value="2" />
            <label for="testRdoGrp2">2</label>

         </fieldset>
        </div>
        </li>
    </ul>
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

Jsbin:

JQM1.1で

JQM1.2で

JQM 1.1 を使用すると、入力、選択、およびラジオ グループはc テーマスウォッチ (から継承listview) を使用しますが、JQM 1.2 を使用する場合、入力、選択、およびラジオ グループは代わりにaスウォッチを使用します。

これは、`data-role="fieldcontain" を持つコンテナー (私が提供した例のラジオ グループなど) にも当てはまるようです。

要素に を直接設定してdata-themeも機能しますが、それ以外に、私の場合、以前の動作によりマークアップがよりクリーンになると思います。かなりの量のマークアップがあり、各要素を調べて個別に を追加する必要はありませんdata-theme。

1.1 の動作に戻す方法を知っている人はいますか?

4

1 に答える 1

0

この動作の変更についてはまだどこにも文書化されていませんが、この問題の部分的な回避策を見つけました。ui-body-(および) クラスを使用して見本を追加するswatchと、要素は親から data-theme を継承します。

例えば

<ul data-role="listview" class="ui-body-c" data-inset="true" data-theme="c">
    <li>
        <input type="button" value="test" />
    </li>
</ul>
于 2012-11-08T22:06:22.383 に答える