jQuery Mobileの初期化処理 (1/5)
作成:2012-02-20 07:54
更新:2012-03-29 10:30
更新:2012-03-29 10:30
■jQuery Mobileの初期化の仕組み
jQuery Mobileでは、HTMLのコントロール類に独自の表示（ウィジェット）をかぶせてGUIを構築しています。これはこれでよくできているのですが、後からあれこれと追加しているため、「作った後で変更するのは難しい」という欠点があります。「デフォルトの表示じゃなくて、もっとこういう具合の表示にしたいんだけどな」と思っても、できてしまったら後の祭り、作ったものを修正するのはなかなか容易ではありません。
そこで、jQuery Mobileがコントロール類に装飾を付け加える前の段階で、「これはこんな具合に設定しておく」ということをあらかじめ決めておくことで、生成されるウィジェットを変更することができるようになっています。要するに「初期化処理」が備わっているわけです。
この初期化処理のためのイベントは、実はいくつか用意されていまが、おおまかにまとめると「jQuery Mobile本体の初期化」と「ページ生成時の初期化」にわかれるでしょう。
jQuery Mobileの初期化（mobileinitイベント）
これは、jQuery Mobile本体のさまざまな設定などを操作するためのものです。この段階では、まだページなどは生成されておらず、ページに表示されるコントロールなどの具体的な操作などは行えません。
ページに表示されるものの初期化（pagecreateイベント）
ページを読み込み、jQuery Mobileによるレンダリングを開始する前に何かの処理を行うものです。ページに実際に表示するウィジェットなどに関する処理が行われます。
これらの初期化処理を行うとき、最大のポイントは「どこでその処理を実行するか」でしょう。下に、jQuery Mobileの初期化処理の基本的な書き方の例をあげておきました。、初期化処理のスクリプトは以下のように記述をします。
1. スクリプトはjQuery Mobileのスクリプトを読み込む前に置く
jQuery Mobileを利用する場合、２つのスクリプトライブラリを読み込みます。１つはベースとなるｊQuery、そしてもう１つがjQuery Mobileですね。jQuery Mobileの初期化処理を行う場合、スクリプトは「ｊQueryライブラリを読み込んだ後、jQuery Mobileライブラリを読み込む前」に用意します。
2. イベントは、$(document).bindして組み込む
これらの初期化処理は、「イベント」として用意されている、という点を理解しておく必要があります。つまり、処理を書いたらその時点で直接実行されるのではなくて、「その処理を、こういうタイミングでイベントが発生して実行する」という形で用意するわけです。だからこそ、jQuery Mobileのライブラリを読み込む前に、jQuery Mobileの処理を書いておけるのですね。
このイベントのバインドは、$(document).bindを利用するのが一般的です。ドキュメントにバインドしておけば、その段階ではjQuery Mobileも読み込み完了しているわけですから、問題なく処理が動きます。
そこで、jQuery Mobileがコントロール類に装飾を付け加える前の段階で、「これはこんな具合に設定しておく」ということをあらかじめ決めておくことで、生成されるウィジェットを変更することができるようになっています。要するに「初期化処理」が備わっているわけです。
この初期化処理のためのイベントは、実はいくつか用意されていまが、おおまかにまとめると「jQuery Mobile本体の初期化」と「ページ生成時の初期化」にわかれるでしょう。
jQuery Mobileの初期化（mobileinitイベント）
これは、jQuery Mobile本体のさまざまな設定などを操作するためのものです。この段階では、まだページなどは生成されておらず、ページに表示されるコントロールなどの具体的な操作などは行えません。
ページに表示されるものの初期化（pagecreateイベント）
ページを読み込み、jQuery Mobileによるレンダリングを開始する前に何かの処理を行うものです。ページに実際に表示するウィジェットなどに関する処理が行われます。
これらの初期化処理を行うとき、最大のポイントは「どこでその処理を実行するか」でしょう。下に、jQuery Mobileの初期化処理の基本的な書き方の例をあげておきました。、初期化処理のスクリプトは以下のように記述をします。
1. スクリプトはjQuery Mobileのスクリプトを読み込む前に置く
jQuery Mobileを利用する場合、２つのスクリプトライブラリを読み込みます。１つはベースとなるｊQuery、そしてもう１つがjQuery Mobileですね。jQuery Mobileの初期化処理を行う場合、スクリプトは「ｊQueryライブラリを読み込んだ後、jQuery Mobileライブラリを読み込む前」に用意します。
2. イベントは、$(document).bindして組み込む
これらの初期化処理は、「イベント」として用意されている、という点を理解しておく必要があります。つまり、処理を書いたらその時点で直接実行されるのではなくて、「その処理を、こういうタイミングでイベントが発生して実行する」という形で用意するわけです。だからこそ、jQuery Mobileのライブラリを読み込む前に、jQuery Mobileの処理を書いておけるのですね。
このイベントのバインドは、$(document).bindを利用するのが一般的です。ドキュメントにバインドしておけば、その段階ではjQuery Mobileも読み込み完了しているわけですから、問題なく処理が動きます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" >
$(document).bind("イベント名", function(){
……ここに初期化処理を用意する……
});
</script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る