HOME>WEBプログラム覚書>[jQuery Mobile]初期化イベントメモ

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

mobileinit

jQuery Mobileがロードされた時に真っ先に発生するイベント。jQuery Mobileを読み込む前に記述しておくか読み込む。主にjQuery Mobileの各種設定を変更したりする場所。

jQuery.ready()よりも前なのでDOMの操作はおこなえないっぽい。

javascript

$(document).live('mobileinit',function(event){
$('.test ul').attr('data-role', 'listview');
});

HTML

実行結果

<div class="test" data-role="page">
<ul>
<li><a href="#">りすと1</a></li>
<li><a href="#">りすと2</a></li>
<li><a href="#">りすと3</a></li>
</ul>
</div>

このイベントと次のpagebeforecreateの間にjQuery Mobileは何をやっているのだろうか・・・。

pagebeforecreate

DOMの拡張前に発生するイベント。動的にdata属性を与えたい場合などここに記述する。このイベントが完了した時点でのHTMLマークアップに基づいてjQeury Mobileがclassつけたり要素をラップしたりすると思われる。

javascript

$(document).live('pagebeforecreate',function(event){
$('.test ul').attr('data-role', 'listview');
});

HTML

実行結果

<div class="test" data-role="page">
<ul>
<li><a href="#">りすと1</a></li>
<li><a href="#">りすと2</a></li>
<li><a href="#">りすと3</a></li>
</ul>
</div>

pagecreate

jQuery Mobileによるマークアップの拡張、ウィジェット化完了後に発生するイベント？

ベータ2より前は、jQuery Mobileにより拡張された後のページやウィジェットのマークアップを操作したい場合は pagecreate イベントにバインドすることが推奨されていました。しかしベータ2で内部的に大きな変更があり、各ウィジェットの初期化がが pagecreate イベントでバインディングされることで分離されました。jQuery UI ウィジェットファクトリーのライフサイクルに準拠すれば、初期化メソッドは create メソッドの後に呼ばれるべきです。そのため、拡張が行われたDOMやJavaScriptオブジェクトを操作するには pageinit イベントが最適なタイミングです。端的に言えば、以前 pagecreate を使ってページ表示前に拡張されたマークアップを操作していたならば、ほとんどの場合は pageinit に移してしまうべきです。

pageCreate() vs pageinit()

たぶんあんまり使わなそう。とりあえずこの時点でdata属性を与えてもスタイルは反映されない。

javascript

$(document).bind('pagecreate',function(event){
$('.bt1').attr('data-role', 'button');
$('.bt2').button({inline: true, icon: 'plus'});
});

HTML

実行結果

<div data-role="page">
<a href="#" class="bt1">ボタン1</a>
<a href="#" class="bt2">ボタン2</a>
</div>

ただ.live()を利用すると効果あり。

javascript

$(':jqmData(role="page")').live('pagecreate',function(event){
$('.bt1').attr('data-role', 'button');
$('.bt2').button({inline: true, icon: 'plus'});
});

HTML

実行結果

<div data-role="page">
<a href="#" class="bt1">ボタン1</a>
<a href="#" class="bt2">ボタン2</a>
</div>

pageinit

jQuery Mobileにおける$(document).ready()。このイベントが発生したときjQuery Mobileは初期化の仕事は終えているはず。

ajaxで要素を追加した場合、スタイルが反映される。

javascript

$('#StartPage').live('pageinit',function(event){
$("#ListPage").load("/codes/jqm/uldata.php ul");
});

HTML

実行結果

<div data-role="page" id="StartPage">
<a href="#ListPage">移動</a>
</div>
<div data-role="page" id="ListPage">
</div>

けどjavascriptでdata属性を追加した場合、スタイルは反映されない。

javascript

$('#ListPage').live('pageinit',function(event){
$("#ListPage ul").attr('data-role', 'listview');
});

HTML

実行結果

<div data-role="page" id="StartPage">
<a href="#ListPage">移動</a>
</div>
<div data-role="page" id="ListPage">
<ul>
<li><a href="#">りすと1</a></li>
<li><a href="#">りすと2</a></li>
<li><a href="#">りすと3</a></li>
</ul>
</div>

なんか混乱してきた。

とりあえずそれぞれのイベント発生時にDOMがどんな状態になっているのか(いつマークアップの拡張が終わって、いつウィジェット化されてんのか)がわかっていないということがわかった。

参照ページ

投稿日	2012年2月 1日 12:18
カテゴリ	JavaScript
タグ	jQuery \| jQuery Mobile
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1262

コメントする

Name

Email Address

URL

コメント(スタイル用のHTMLタグを使えます)

ログイン情報を記憶

[jQuery Mobile]初期化イベントメモ

mobileinit

javascript

HTML

pagebeforecreate

javascript

HTML

pagecreate

javascript

HTML

javascript

HTML

pageinit

javascript

HTML

javascript

HTML

参照ページ

コメント

コメントする

KANTENNA.COM

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

[jQuery Mobile]初期化イベントメモ

mobileinit

javascript

HTML

pagebeforecreate

javascript

HTML

pagecreate

javascript

HTML

javascript

HTML

pageinit

javascript

HTML

javascript

HTML

参照ページ

コメント

コメントする

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

PAGE RANK

TIME LINE

Tag