5

jQuery Mobileで折りたたみ可能なセットにアニメーションを追加したいと考えています。これの簡単な例を示しましょう:

<div id="tiles" data-role="collapsible-set" data-iconpos="right">
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>

jQuery Mobileはこれを完全に処理し、折りたたみ可能な 3 つのアイテムのセットを表示します。私が欲しいのはアニメーションですが、ドキュメントには何も見つからないようです。

単純なCSS アニメーション(高さプロパティのアニメーション化) がどのように機能するかはまだテストしていませんが、内部フラグを回すようなjQuery Mobileの方法はありますか?

編集 単純なjQuery animateメソッドをテストしましたが、実際に機能します。他の誰かがこれを必要とする場合に備えて。私の 528MHz の Android フォンでも、デフォルトのブラウザでスムーズに動作します。私が追加したスニペットはとてもシンプルです:

$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});
4

4 に答える 4

6

ここに行く：

$('[data-role="collapsible"]').bind('expand collapse', function (event) {
    $(this).find('p').slideToggle(500);
    return false;
});​

私はあなたが目指していたアイデアが好きだったので、少し遊んでみました。これは、jQuery Mobileが折りたたみ可能なウィジェットを制御する方法にフックするため、見出し要素にバインドするよりも少しハックが少なくなります。

はデフォルトのreturn false;動作を停止し、他の行はjQuery slideUp/slideDownアニメーションを使用してコンテンツをビューの内外に切り替えます。.fadeToggle()独自のアニメーションを使用またはロールすることもできます。チェックevent.typeすると、発生したイベントに基づいてアニメーション化できます。

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

于 2012-05-03T23:52:32.457 に答える
2

jQuery Mobile 1.4 以降では、 andの代わりにcollapsibleexpandandcollapsiblecollapseイベントにバインドする必要があることに注意してください。したがって、完全なコードは次のようになりますexpandcollapse

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});
于 2014-08-29T07:31:58.463 に答える