14

listview非常に長いリストであり、正常に動作する日付に基づく自動分割機能に取り組んでいますが、日付で折りたたみ可能に data-autodividers='true'することでさらに改善したいと考えています。listview

これは、バックエンドから c# (私は asp.net webform モバイル Web サイトで作業しています) を使用して行うことができます。そこでは、月-年に基づいてリストをグループ化し、各グループを折りたたみ可能にします。

しかし、私がautodivider. 私はjsFiddleで同じように設定しました。

http://jsfiddle.net/5PnBT/10/

コード ビハインド ファイル (c#) から実行せずに、jQuery を使用してこれらの自動分割器を折りたたみ可能にするにはどうすればよいですか?

jquerymobile が組み込みオプションとしてこれを持っている場所がわかりませんでした。

$(document).on("pageinit", "#page-wrapper", function () {
    $("#hp-latest-articles").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('date');
            return out;
        }
    }).listview('refresh');
});
4

4 に答える 4

1

私があなたの問題を理解していれば、$.mobile.listview.prototype.options.autodividersSelectorオプションを使用するだけでよいと思います。同様の問題があったため、単一要素の日付属性に従ってそれらをリストする必要がある場合は、次のようにします。

 $( document ).on( "mobileinit", function() {
  $.mobile.listview.prototype.options.autodividersSelector = function( element )       {
    return (element.attr('date'))       

  };
});

そのためにjsbinを用意しました：http://jsbin.com/enuwoj/1/edit

于 2013-04-20T10:39:36.243 に答える
1

あなたの問題には2つの解決策があります。

  1. jQuery Mobile 側で折りたたみ可能なリスト セットを使用すると、探しているものに正確に到達できます。リストビューのように見せるには、CSS を使用して要素の外観を編集する必要がある場合があります。

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>
  1. 2 番目の解決策は、リストビュー コントロールのクリック イベントにカスタム イベント ハンドラーを適用することです。リスト ディバイダーでクリック イベントが発生するたびに、次の自動ディバイダーまで次のリスト要素を非表示にすることができます。このソリューションには、少しコーディングが必要です。この解決策があなたに合っている場合は、そのコードを書いてお知らせください。
于 2013-07-07T11:03:05.940 に答える
0

グループ化するかどうかに応じて、<div data-role="collapsible">またはのいずれかが必要になります。<div data-role="collapsible-set">

デフォルトで事前に折りたたむ場合は、data-collapsed="true"属性も含めます。

于 2013-07-22T21:16:55.330 に答える