jQuery Mobileのイベント処理 (1/6)
作成:2011-06-13 07:43
更新:2012-03-29 10:23
更新:2012-03-29 10:23
■イベントをバインドするには？
jQuery Mobileは、HTMLのタグを独自のUIでラップすることでスマートフォンらしいGUIを構築しています。このことは、言い換えれば「画面に表示されているGUIは、HTMLのタグを使って作られていない」ということになります。
複数のタグを組み合わせることでGUIを構築するため、こうして作られたGUIをスクリプトから利用する場合、一体どうすればいいのかわからなくなってしまいます。今回は、「イベントに関する処理」について、いろいろと見ていくことにしましょう。
まずは、「イベントのバインド」からです。ここまで、例えばボタンをクリックして表示ページを変更するようなことは行って来ましたが、こうした場合、onclick属性をそのまま使ってきました。このように静的にイベントを設定するのでなく、スクリプトを使ってGUIにイベントを動的にバインドするようことも、jQuery Mobileでは簡単に行なえます。
jQuery Mobileは、何度もいうように「jQueryのプラグイン」として用意されています。従って、jQueryの機能をそのまま利用することができます。jQueryでは$ショートカット関数で簡単にオブジェクトを指定できます。これでイベントを割りつけるオブジェクトを取得し、その「live」メソッドでイベントの組み込みを行います。
まったく同じような働きをするものとして、jQueryの「bind」というものもあります。こちらを使ってバインドすることもできますが、jQuery Mobileでは「live」を使うようにドキュメントに記述されていますので、こっちを利用したほうがよいでしょう。
下のリスト欄に簡単な例をあげておきました。ボタンをクリックするとメッセージを表示するというごく単純なものです。ここでは、$('#btn1').bind('click',doAction);というようにしてイベントをバインドしています。
ここで注目すべきは、実は他にあります。それは「イベントのバインドを実行するタイミング」です。基本的には、ドキュメントを読み込み終わったところで実行するのですが、jQueryの場合、これにはページのオブジェクトにある「pagecreate」というメソッドを利用するのが基本です。
なお、jQueryには$(document).readyというメソッドも用意されています。これは、$(document)準備完了したときに実行する処理を設定します。つまり、すべての読み込みが完了し、DOMやjQueryオブジェクトが使える状態になった段階で処理が実行されるわけです。
jQueryを利用する場合の各種初期化処理は、たいていこの$(document).readyを利用しました。が、jQuery Mobile 1.0b2では、これの利用は推奨せず、ページのpagecreateイベントを使うことを推奨しています。今までreadyを使っていた人は、pagecreateを利用する形に書き換えておきましょう。
複数のタグを組み合わせることでGUIを構築するため、こうして作られたGUIをスクリプトから利用する場合、一体どうすればいいのかわからなくなってしまいます。今回は、「イベントに関する処理」について、いろいろと見ていくことにしましょう。
まずは、「イベントのバインド」からです。ここまで、例えばボタンをクリックして表示ページを変更するようなことは行って来ましたが、こうした場合、onclick属性をそのまま使ってきました。このように静的にイベントを設定するのでなく、スクリプトを使ってGUIにイベントを動的にバインドするようことも、jQuery Mobileでは簡単に行なえます。
jQuery Mobileは、何度もいうように「jQueryのプラグイン」として用意されています。従って、jQueryの機能をそのまま利用することができます。jQueryでは$ショートカット関数で簡単にオブジェクトを指定できます。これでイベントを割りつけるオブジェクトを取得し、その「live」メソッドでイベントの組み込みを行います。
$( オブジェクトの指定 ).live( イベント名 , 実行する処理 );第１引数には、イベント名をテキストで指定します。第２引数には、実行する処理（関数）を指定します。これにより、指定のHTML要素に動的にイベント処理を割りつけることができます。
まったく同じような働きをするものとして、jQueryの「bind」というものもあります。こちらを使ってバインドすることもできますが、jQuery Mobileでは「live」を使うようにドキュメントに記述されていますので、こっちを利用したほうがよいでしょう。
下のリスト欄に簡単な例をあげておきました。ボタンをクリックするとメッセージを表示するというごく単純なものです。ここでは、$('#btn1').bind('click',doAction);というようにしてイベントをバインドしています。
■jQueryロード時の処理について
ここで注目すべきは、実は他にあります。それは「イベントのバインドを実行するタイミング」です。基本的には、ドキュメントを読み込み終わったところで実行するのですが、jQueryの場合、これにはページのオブジェクトにある「pagecreate」というメソッドを利用するのが基本です。
$(ページのID).live('pagecreate', 実行する処理 );pagecreateイベントは、そのページが準備完了し使える状態になったときに実行される処理を指定するものです。このイベントが発生したときには、そのページ内にあるオブジェクトは準備完了しておりスクリプトから操作でいるようになっています。なお、jQueryには$(document).readyというメソッドも用意されています。これは、$(document)準備完了したときに実行する処理を設定します。つまり、すべての読み込みが完了し、DOMやjQueryオブジェクトが使える状態になった段階で処理が実行されるわけです。
jQueryを利用する場合の各種初期化処理は、たいていこの$(document).readyを利用しました。が、jQuery Mobile 1.0b2では、これの利用は推奨せず、ページのpagecreateイベントを使うことを推奨しています。今までreadyを使っていた人は、pagecreateを利用する形に書き換えておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>Sample</title>
<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"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$('#home').live('pagecreate',function(){
$('#btn1').live('click',doAction);
});
function doAction(){
$('#msg').text($(this).attr('id') + "をクリックしたぞ！");
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="content">
<p id="msg">※サンプル。</p>
<div data-role="fieldcontain">
<input type="button" name="btn1" id="btn1" value="Click" />
</div>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る