2

jQuery Mobile ThemeRollerを使用して、作業中の新しいモバイルWebサイトのテーマを作成しました。一般的にテーマはうまく機能しますが、ThemeRollerに表示されるリストディバイダーは私のアプリケーションでは使用されていません。

これが問題を説明するスクリーンショットです：

ThemeRollerの問題http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png

問題のページに関連するHTMLは次のとおりです。

<div id="schedule" data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <ul data-role="listview">
            <li data-role="list-divider">8:00 am</li>
            <li><a href="#session">Welcome &amp; Keynote</a></li>
            <li data-role="list-divider">9:00 am</li>
            <li><a href="#session">Session title displayed here</a></li>
        </ul>
    </div>
</div>

ThemeRollerマークアップで見つけたものをいくつか追加してみました。

<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li>

これは効果がありません。私が何をしても、クラスはに設定されているようui-bar-bです。ChromeでHTMLをライブ編集してに変更ui-bar-bするui-bar-aと、期待どおりに表示されます。

私は何か間違ったことをしていますか？これはおそらくjqmのバグですか？

jqm1.1.0およびjquery1.7.0を使用します。

4

1 に答える 1

6

data-dividertheme="a"要素に属性を追加してdata-role="listview"、特定の見本を仕切りリストアイテムに使用するように強制できます。デフォルトでは、listviewがテーマに設定されている場合a、ディバイダーはテーマに設定されるbため、リストディバイダーを強制的に正しいテーマにするか、これを念頭に置いてテーマを作成する必要があります。

    <ul data-role="listview" data-dividertheme="a">
        <li data-role="list-divider">8:00 am</li>
        <li><a href="#session">Welcome &amp; Keynote</a></li>
        <li data-role="list-divider">9:00 am</li>
        <li><a href="#session">Session title displayed here</a></li>
    </ul>

これがデモです：http：//jsfiddle.net/8aZpQ/（このデモは仕切りのテーマeを強制します）

そして、これに関するドキュメントは次のとおりです：http: //jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

于 2012-04-16T17:31:25.347 に答える