back
jQuery Mobileの初期化処理 (2/5)
■<a>タグを自動的にボタン化する
では、実際に初期化を行ってみましょう。まずは、ページの初期化からです。これは、「pagecreate」というイベントとして用意されています。$(document).bindでpagecreateに関数をバインドし、その中で初期化処理を行なう形になるでしょう。
下のリスト欄に簡単なサンプルを挙げておきます。これは、<a>タグのボタンをレンダリングする例です。<a>タグは、data-role="button"を設定することでボタンとして表示できますが、いちいちこれを書かないといけないのは面倒臭いですね。そこで、<a>タグをすべて初期化時にレンダリングするようにしてみました。
ここでは、まず$(document).bindでpagecreateに関数をバインドするのでしたね。これは以下のようなかた地で記述されます。
$(document).bind("pagecreate", function(){……略……});
これで、第２引数の関数定義で初期化処理を記述しておけば良いわけです。今回の「<a>タグを全部ボタンにレンダリングする」というのは、以下のようにしています。」
実際にやってみるとわかりますが、<a>タグのボタンは角の丸みがないブルーグレーの表示になりますが、普通の<input type="button">のボタンはそのままです。ボタンがみんな変わるわけではないのですね。
下のリスト欄に簡単なサンプルを挙げておきます。これは、<a>タグのボタンをレンダリングする例です。<a>タグは、data-role="button"を設定することでボタンとして表示できますが、いちいちこれを書かないといけないのは面倒臭いですね。そこで、<a>タグをすべて初期化時にレンダリングするようにしてみました。
ここでは、まず$(document).bindでpagecreateに関数をバインドするのでしたね。これは以下のようなかた地で記述されます。
$(document).bind("pagecreate", function(){……略……});
これで、第２引数の関数定義で初期化処理を記述しておけば良いわけです。今回の「<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>
| << 前へ | 次へ >> |