ソースコード
jQuery1.7以降では、イベント処理の定義は次のような書式で書くことができるようです。（jQuery1.6以前のbind、live、delegateにそれぞれ対応します）
$(セレクタ).on(イベント名, ハンドラ); $(document).on(イベント名, セレクタ, ハンドラ); $(セレクタ).on(イベント名, 子セレクタ, ハンドラ);
クリックしたときのイベントは"click"や"vclick"などが利用できるようですが、"vclick"は"click"よりもレスポンスが早いといった特徴があるようです。
ページ遷移は$.mobile.changePageで行えます。オプションにページの切替効果や送信データ等を指定できるようです。
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
// イベント処理定義
$(document).on("pageinit", "#index", function(e){
// アンカータグのクリックを検知
$(this).on("vclick", "a", function(e){
// アンカーのIDがnext-pageに一致したとき
if ($(this).attr("id").match(/next-page/)) {
// フリップスイッチの値を取得
var flipValue = $('#flip-a').val();
// フリップスイッチの値によって、ページ遷移分岐
if (flipValue=="off") {
$.mobile.changePage("#off-page");
} else if (flipValue=="on") {
$.mobile.changePage("#on-page");
}
}
});
});
</script>
<title>Hello World!</title>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<select name="slider" id="flip-a" data-role="slider">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
<a href="#" id="next-page" data-role="button">NEXT PAGE</a>
</div>
</div>
<div data-role="page" id="off-page">
<div data-role="content">
OFF
</div>
</div>
<div data-role="page" id="on-page">
<div data-role="content">
ON
</div>
</div>
</body>
</html>
これでNEXT PAGEボタンをクリックしたとき、フリップスイッチの状態によって画面遷移先を切り替えることができました。
0 件のコメント:
コメントを投稿