0

メッセージのリストを動的に作成しました。タグが<ul>あり、内部に動的にリストを生成しています。ただし、これにリスト仕切りを追加する方法がわかりません。リストを取得した後に仕切りを追加する、呼び出すことができるjsの更新メソッドはありますか？

これは私が持っているものです：

<ul id="messages" data-autodividers="true" data-role="listview" data-theme="c">

    //a list of <li> are dynamically generated here

</ul>

これは、リストの仕切りの一番上に追加するだけ<li>です。タグ内にいくつか必要です。私のリスト<li>はメッセージです。日付ごとに仕切りを付けて、使いやすくしたいです。

4

1 に答える 1

7

私はjsfiddle http://jsfiddle.net/yVtVE/2/を持っています

コードは少し異なりますが、動作します

このようなリストを想定して

<ul data-role="listview" id="MessagesList" data-autodividers="true">
                <li date="2013-03-20"><a href="#">Event 1</a></li>
                <li date="2013-03-20"><a href="#">Event 2</a></li>
                <li date="2013-03-19"><a href="#">Event 3</a></li>
           </ul>

あなたのコードは

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

オリジナル

JQM ドキュメントからhttp://api.jquerymobile.com/listview/

自動分割器

リストビューは、そのアイテムの仕切りを自動的に生成するように構成できます。これは、任意のリストビューに data-autodividers="true" 属性を追加することによって行われます。

デフォルトでは、仕切りの作成に使用されるテキストは、アイテムのテキストの最初の文字を大文字にしたものです。または、リストビューで autodividersSelector オプションをプログラムで設定して、区切り文字を指定することもできます。たとえば、id="mylistview" を持つ要素にカスタム セレクターを追加するには、次のようにします。

$( "#mylistview" ).listview({
autodividers: true,
// the selector function is passed a <li> element from the listview;
// it should return the appropriate divider text for that <li>
// element as a string
autodividersSelector: function ( li ) {
var out = /* generate a string based on the content of li */;
return out;
}
});

メッセージに日付があるとしましょう。コードは次のように機能します

$( "#mylistview" ).listview({
autodividers: true,
autodividersSelector: function ( li ) {
    var re = /\/\d{4}\/\d{2}\/\d{2}/i;
    var out = $(this).html().match(re);
    return out;
  }
});

私はこのコードをテストしていません。バグがあるかもしれませんが、試してみてください。

于 2013-03-20T15:19:09.270 に答える