0

JQMコンポーネントを操作するイベントをアタッチしようとしていますが、コンポーネントへの参照を取得すると、どのアクションを適用できるかわかりません。たとえば、新しい折りたたみ可能なリストビューでは、ボタンをクリックするだけですべてのアイテムを折りたたむことができますか？折りたたみ可能なリストビューのデモは次のとおりです。http：//jquerymobile.com/demos/1.2.0-alpha.1/docs /lists/lists-collapsible.html

4

1 に答える 1

1

折りたたみ式の場合は、expandおよびcollapseイベントを利用できます。

$('.ui-collapsible').trigger('expand');

たとえば、次のように、現在の状態に基づいて、DOM内のすべての折りたたみ可能なウィジェットを折りたたみ/展開できます。

//attach the code to an event (click on a link)
$('a').on('click', function () {

    //cache all the widgets
    var $all       = $('.ui-collapsible');

    //iterate through each widget
    $.each($all, function () {

        //if the widget has the "collapsed" class, then expand it
        if ($(this).hasClass('ui-collapsible-collapsed')) {
            $(this).trigger('expand');
        } else {

          //otherwise collapse it
          $(this).trigger('collapse');  
        }
    });
});​

これがデモです：http：//jsfiddle.net/HLEss/1/

「折りたたみ」クラスで選択できることを確認するための折りたたみ可能なウィジェットのHTMLの例を次に示します。

<div data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">
    <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-active ui-btn-hover-null ui-btn-down-null" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="null" data-mini="false">
            <span class="ui-btn-inner ui-corner-top ui-corner-bottom">
                <span class="ui-btn-text">Zero
                    <span class="ui-collapsible-heading-status"> click to expand contents</span>
                </span>
                <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span>
            </span>
        </a>
    </h3>
    <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
        <p>Woohoo!</p>
    </div>
</div>

それがお役に立てば幸いです。

アップデート

これらのイベントのドキュメントは次のとおりです（そのまま）：http：//jquerymobile.com/demos/1.1.1/docs/content/content-collapsible-events.html

于 2012-08-09T18:59:55.010 に答える