久しぶりにjQuery Mobileをさわってみて、Collapsible（アコーディオン式のリスト）の制御で色々と試行錯誤したので、備忘録です。
イベントにコールバック関数をバインド
jQuery MobileのCollapsibleには、コールバック関数が使用できる3つのイベントが用意されています。
これによって、Collapsibleが作成された（準備ができた）時と、Collapsibleを開いた時、閉じた時に処理を実行する事ができます。
|
1 2 3 4 5 |
$( ".selector" ).collapsible({ create: function(event, ui) { ... }, // 作成された時 expand: function(event, ui) { ... }, // 開いた時 collapse: function(event, ui) { ... } // 閉じた時 }); |
使用例として、このイベントを利用して、アコーディオン式リストにslideDown、slideUpのアニメーション効果を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .ui-collapsible-content { display: none; } </style> <script> $( ".selector" ).collapsible({ expand: function() { $(this).find("div.ui-collapsible-content").slideDown(); }, collapse: function() { $(this).find("div.ui-collapsible-content").slideUp(); } }); </script> |
expand、collapseイベントは、heading（開閉の際にタップする要素）のclickイベントのタイミングで発生するのですが、スマートフォンのclickイベントは反応が遅いので、やや動作が緩慢になるのが難点です。
どうにかして、より反応の良いtapイベントなどに紐付けられるといいのですが。
要素を開く／閉じるメソッド
要素の開閉を、Javascriptから制御する事もできます。
|
1 2 |
$( ".selector" ). collapsible( "expand" ); // 開く $( ".selector" ). collapsible( "collapse" ); // 閉じる |
jQuery Mobile 1.4ではtriggerは使用できない
要素の開閉は、ネット上で見つけた大半のドキュメントでは、以下のように書かれていました。
しかしこの方法は、jQuery Mobile 1.4からは使用できなくなったようです。
|
1 2 3 |
// × これらはバージョン1.4から使用できなくなった $( ".selector" ). trigger( "expand" ); $( ".selector" ). trigger( "collapse" ); |