2

私はウェブ全体（そしてここ）を検索してきましたが、何が起こっているのか理解できないようです。リストビューにいくつかのアイテムがあるjquerymobile（1.2）ページがあります。各[li]タグにカスタム属性を追加し、jqueryモバイルデモに従って自動除算器として設定しました。

HTML

<div data-role="page" id="ScheduleDay">
<div data-role="header">
    <a href="#HomePage" data-icon="home" data-direction="reverse">Home</a>      
    <h1 id="ScheduleDayText">Schedule</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" id="ScheduleList">
        <li time="3:30PM"><a href="#">Event 1</a></li>
        <li time="3:30PM"><a href="#">Event 2</a></li>
        <li time="4:30PM"><a href="#">Event 3</a></li>
   </ul>
</div>
</div>

JQUERY

$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function ( li ) {
    var out = li.attr('time');]
    return out;
}
});
$('#ScheduleList').listview('refresh');

達成しようとしていることを示すためにjsfiddleを作成しました。

仕切りを表示させることができないようで、かなりマイナーなものを見落としていると確信しています（または、ボートを完全に見逃しています-私はまだjqueryにかなり慣れていません）。

どんな助けでも大歓迎です。

4

1 に答える 1

8

それを機能させるには：

  1. まだあなたに使用する必要がありdata-autodividers="true"ます<ul>
  2. コードを適切なjQMハンドラーに配置するpageinit()か、pagebeforeshow()
  3. <にタイプミスがありvar out = li.attr('time');]ます-最後に角かっこは必要ありません

そうは言っても、リストビューのマークアップは次のようになります。

<ul data-role="listview" id="ScheduleList" data-autodividers="true">
</ul>

JSコードは次のようになります。

$(document).on("pageinit", "#ScheduleDay", function(){
    $("#ScheduleList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("time");
            return out;
        }
    }).listview("refresh");
});

これがjsFiddleです

于 2013-02-07T06:53:31.170 に答える