jQuery Mobileの初期化処理 (4/5)
作成:2012-02-20 08:01
更新:2012-03-29 10:31
更新:2012-03-29 10:31
■プッシュボタンの初期設定を変更する
では、プッシュボタンの初期設定を操作してみましょう。下のリスト欄に、その例を挙げておきました。ページにアクセスすると、プッシュボタンが、角の丸みのない黄色いテーマで表示されます。今度は、<a>タグによるボタンはデフォルトのまま変化しません。<input type="button">のプッシュボタンだけが変化していることがわかります。
ここでは、まず$(document).bindでイベントのバインドをしていますが、今回利用するのはpagecreateではありません。今回は、ページに何かの操作をするのではなく、jQuery Mobileの初期設定そのものを書き換える処理です。したがってjQuery Mobile自身を初期化するためのイベント「mobileinit」を利用します。
（……いや、まぁpagecreateを使ってもちゃんとページに表示されるウィジェットは変わるんですが、やはり形としてページ単位でのイベントより、jQuery Mobileそのものの初期化イベントを利用するのが筋でしょう）
ここでは、buttonの初期設定を変更していますね。以下の部分です。
これらのプロパティ名を見ればわかるように、先ほどbuttonMarkupメソッドで使ったものと同じですね。このようにjQuery Mobileでは、それぞれのウィジェット用に$.mobileのオブジェクトに用意されているプロパティがそのままそのウィジェット用のメソッドなどで用いられるようになっているのです。
ここでは、まず$(document).bindでイベントのバインドをしていますが、今回利用するのはpagecreateではありません。今回は、ページに何かの操作をするのではなく、jQuery Mobileの初期設定そのものを書き換える処理です。したがってjQuery Mobile自身を初期化するためのイベント「mobileinit」を利用します。
（……いや、まぁpagecreateを使ってもちゃんとページに表示されるウィジェットは変わるんですが、やはり形としてページ単位でのイベントより、jQuery Mobileそのものの初期化イベントを利用するのが筋でしょう）
ここでは、buttonの初期設定を変更していますね。以下の部分です。
$.mobile.button.prototype.options.corners = false;先に述べたように、プッシュボタンの設定は$.mobile.button.prototype.optionsにまとめられています。ここではその中のcorndersとthemeというプロパティに値を設定しています。それぞれに値を設定しているだけで、ウィジェットを生成するなどの処理はまったくありません。そのあたりはjQuery Mobileが行なってくれるのですから。
$.mobile.button.prototype.options.theme = "e";
これらのプロパティ名を見ればわかるように、先ほどbuttonMarkupメソッドで使ったものと同じですね。このようにjQuery Mobileでは、それぞれのウィジェット用に$.mobileのオブジェクトに用意されているプロパティがそのままそのウィジェット用のメソッドなどで用いられるようになっているのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1">
<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("mobileinit", function(){
$.mobile.button.prototype.options.corners = false;
$.mobile.button.prototype.options.theme = "e";
});
</script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p id="msg">サンプル</p>
<div>これはサンプルのページです。</div>
<a href="#" data-role="button">link</a>
<input type="button" value="button">
<hr>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る