2

セットの上に表示される単一のフィルターでフィルターしたい単純な折りたたみ可能なセットがあります。望ましい結果は、検索に一致するアイテムのみを表示することです（アイテムが表示される折りたたみ可能なブロック全体ではありません）。

このタスクの処理方法を教えてください...

<div data-role="content">
    <div data-role="collapsible-set">   
        <div data-role="collapsible" data-content-theme="c">
            <h3>Firs Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Second Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Chrysler</a></li>
                <li><a href="index.html">Dodge</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Third Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Ferrari</a></li>
                <li><a href="index.html">Ford</a></li>
            </ul>
        </div>
    </div><!--/content-primary -->
</div>
4

3 に答える 3

4

フィルター検索入力を自動的に作成する属性を持つことができる要素の list-item 内に要素を配置data-role="collapsible"できます。次に例を示します。data-role="listview"data-filter="true"

    <ul data-role="listview" data-filter="true" id="outer-ul">
        <li>
            <div data-role="collapsible" data-content-theme="c">
                <h3>Firs Collapsed list</h3>
                <ul>
                    <li><a href="index.html">Acura</a></li>
                    <li><a href="index.html">Audi</a></li>
                    <li><a href="index.html">BMW</a></li>
                </ul>
            </div>
        </li>
    </ul>

ここにデモがあります：http://jsfiddle.net/Awg8W/2/

対処しなければならない CSS の問題がいくつかあることに注意してください。その 1 つは、内部data-role="listview"要素を持つことで複数の検索入力が作成されることです。この CSS を使用して、最初のもの以外はすべて非表示にしました。

#page .ui-listview-filter:nth-child(n+2) {
    display : none;
}​

アップデート

次に、この jQuery コードを使用してアコーディオン効果を再現できます。

//wait for page to initialize
$(document).on('pageinit', '#page', function () {

    //find the headings we want to watch
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function () {

        //cache the parent collapsible widget
        var that = $(this).closest('.ui-collapsible')[0];

        //collapse all other collapsible widgets
        $(this).closest('ul').find('.ui-collapsible').filter(function () {

            //filter-out the collapsible widget that got clicked, so it functions
            return this !== that;
        }).trigger('collapse');

        //since we are messing around with the listview widget, let's refresh it
        $(this).closest('ul').trigger('refresh');
    });
});​​
于 2012-08-13T20:39:12.210 に答える
3

この質問は少し古いことは知っていますが、同じ問題に直面していました。JavaScript や CSS を記述する必要のないソリューションを見つけました。これが、この問題を抱えている他の人々に役立つことを願っています。 jsfiddle

編集： ネストされたリストを使用した更新

<div data-role="page" id="page">
    <div data-role="content">
        <h1>Collapsible set with search</h1>
        <div data-role="collapsible-set" data-filter="true">
            <div data-role="listview" data-inset="true" data-filter="true">
                <div data-role="collapsible">
                    <h1>Numero uno</h1>
                    <div>some text</div>
                </div>
                <div data-role="collapsible">
                    <h1>Number two</h1>
                    <div>some text</div>
                </div>
            </div>
        </div>
    </div>
</div>
于 2013-05-16T20:08:29.147 に答える
2

質問は少し古いですが、今日同じ問題に遭遇したため、回避策のデモを次に示します: http://jsfiddle.net/2Vg4z/。

JS については、元のリストビュー フィルターからコードをコピーして貼り付け、複数のリストビューに適用できるように少し変更しました。

ul検索フィールドの作成元となる は、2 つの属性を設定する必要があります。

  • data-x-filter、ブール値のようなdata-filter
  • id、検索フィールドを識別できるようにする

ulこの検索フィールドでフィルタリングする必要があるその他は、1 つの属性を設定する必要があります。

  • data-x-filter-id、前に設定された id

それを使用するには、jsfiddle のコードをこのペーストビンからコピーして貼り付けます。

デモでは、折りたたみ可能なグループの上に空のリストを追加しましたが、リストが空でない場合は、それ自体の項目もフィルター処理されます。

お役に立てば幸いです。

注:この解決策は完璧ではありませんが、すぐに解決したかっただけです。より良い解決策は、"検索フィールド ウィジェット" を作成して空のリストを不要にすることですが、もう少しコーディングが必要です。

于 2012-10-17T15:35:19.743 に答える