jQuery Mobileの初期化処理 (2/5)
作成:2012-02-20 07:55
更新:2012-03-29 10:30
更新:2012-03-29 10:30
■<a>タグを自動的にボタン化する
では、実際に初期化を行ってみましょう。まずは、ページの初期化からです。これは、「pagecreate」というイベントとして用意されています。$(document).bindでpagecreateに関数をバインドし、その中で初期化処理を行なう形になるでしょう。
下のリスト欄に簡単なサンプルを挙げておきます。これは、<a>タグのボタンをレンダリングする例です。<a>タグは、data-role="button"を設定することでボタンとして表示できますが、いちいちこれを書かないといけないのは面倒臭いですね。そこで、<a>タグをすべて初期化時にレンダリングするようにしてみました。
ここでは、まず$(document).bindでpagecreateに関数をバインドするのでしたね。これは以下のようなかた地で記述されます。
$(document).bind("pagecreate", function(){……略……});
これで、第2引数の関数定義で初期化処理を記述しておけば良いわけです。今回の「<a>タグを全部ボタンにレンダリングする」というのは、以下のようにしています。」
実際にやってみるとわかりますが、<a>タグのボタンは角の丸みがないブルーグレーの表示になりますが、普通の<input type="button">のボタンはそのままです。ボタンがみんな変わるわけではないのですね。
下のリスト欄に簡単なサンプルを挙げておきます。これは、<a>タグのボタンをレンダリングする例です。<a>タグは、data-role="button"を設定することでボタンとして表示できますが、いちいちこれを書かないといけないのは面倒臭いですね。そこで、<a>タグをすべて初期化時にレンダリングするようにしてみました。
ここでは、まず$(document).bindでpagecreateに関数をバインドするのでしたね。これは以下のようなかた地で記述されます。
$(document).bind("pagecreate", function(){……略……});
これで、第2引数の関数定義で初期化処理を記述しておけば良いわけです。今回の「<a>タグを全部ボタンにレンダリングする」というのは、以下のようにしています。」
$('a').buttonMarkup({ corners: false, theme:"b"});buttonMarkupは、以前、リンクのイネーブル状態を操作したりするのに紹介しました。が、このように<a>タグにボタンのレンダリングを実行するのにも用いられます。引数には、レンダリングする際の設定情報を連想配列でまとめてあります。今回は「corners」と「theme」という値を用意してみました。cornersは、角の丸みに関するもので、trueにすると丸みを付け、falseだとつけません。themeはテーマに関するもので、デフォルトでは「a」~「e」のテーマ(正確にはスウォッチといいます)を指定します。
実際にやってみるとわかりますが、<a>タグのボタンは角の丸みがないブルーグレーの表示になりますが、普通の<input type="button">のボタンはそのままです。ボタンがみんな変わるわけではないのですね。
(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("pagecreate", function(){ $('a').buttonMarkup({ corners: false, theme:"b"}); }); </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="#">link</a> <input type="button" value="button"> <hr> </div> </div> </body> </html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る