jQuery mobile の Collapsible (折りたたみ式コンテンツ)のイベントをハンドルする方法
以下のようなHTML(抜粋)の場合、
<div data-role="content">
<div data-role="collapsible" id="my-collaspible">
<h3 id="title">My Title</h3>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
</div>
</div>
次の JavaScript で Collapsible のイベントをハンドリングする。
$('#my-collaspible').bind('expand',function(){
alert('Expanded');
}).bind('collapse',function(){
alert('Collapsed');
});
注意すべきは、、
この JavaScript を、HTML <head>タグ内で書いても動作しない。
<div data-role="collapsible" id="my-collaspible">..</div>
の後に書かないと動作しない。
<div data-role="content">
<div data-role="collapsible" id="my-collaspible">
<h3 id="title">My Title</h3>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
</div>
<script type="text/javascript">
$('#my-collaspible').bind('expand',function(){
alert('Expanded');
}).bind('collapse',function(){
alert('Collapsed');
});
</script>
</div>
実用の為に適用する上で、もっと注意すべきことがある。
ページが開いた直後で、
初期状態が閉じた状態、→ <div data-role="collapsible" id="my-collaspible" data-collapsed="true">
の場合(もしくは、data-collapsed="true"を省略)
bind('collapse',function() が動く
初期状態が開いた状態、→ <div data-role="collapsible" id="my-collaspible" data-collapsed="false">
の場合
bind('expand',function()
が動作する。
つまり、今回のコードでは以下のように動作する。
ページを開くと
ページの初期表示、
クリックすると、、、
alert を閉じると、、、
となる。
検証した環境は、
Winsows Chrome
jQuery mobile 1.1.0
jQuery 1.7.2