2012-04-16 10 views
2

jQuery Mobile ThemeRollerを使って、私が取り組んでいる新しいモバイルウェブサイトのテーマを作成しました。一般的にテーマはうまくいきますが、ThemeRollerに表示されるリストディバイダはアプリケーションでは使用されません。jQueryモバイルリストディバイダが間違った見本を使用していますか?

ここでの問題を示すスクリーンショットです:

ThemeRoller problem 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> 

私も私がで見つかったいくつかのことを追加しようとしましたテーマローラーのマークアップ:

<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-bui-bar-aに変更することができます。

何か間違っていますか?これはおそらくjqmバグですか?

jqm 1.1.0とjquery 1.7.0を使用しています。

答えて

6

data-role="listview"要素にdata-dividertheme="a"属性を追加して、除外リスト項目に特定のスウォッチを使用させることができます。デフォルトでは、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://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

http://jsfiddle.net/8aZpQ/(ディバイダーのために、このデモ軍のテーマ e

そして、ここでは、このためのドキュメントです

関連する問題