jQuery Mobileのイベント処理 (4/6)
作成:2011-06-13 07:49
更新:2012-03-29 10:24
更新:2012-03-29 10:24
■縦向きと横向きの切り替え
スマートフォンでは、もう１つ非常に重要なイベントがあります。それは「画面の向きの切り替え」イベントです。
AndroidやiPhoneでは、端末を縦向きにしたり横向きにしたりすると、自動的にアプリの向きが90度回転し、それにあわせて大きさなどが調整されます。jQuery Mobileには、この「向きの回転」に関するイベントが用意されています。「orientationchange」というイベントで、これをバインドすることで、回転時に必要な処理を行わせることができます。
下のリスト欄に、簡単な利用例を挙げておきます。画像を回転させると、その向きに応じて「縦向き（portrait）です。」「横向き（landscape）です。」とメッセージが表示されます。実は、やってみるとわかるのですが、このイベント、パソコンのWebブラウザでもちゃんと機能します。パソコンで、Webブラウザのウインドウサイズを横長にしたり縦長にしたりすると、「横向き」「縦向き」と判断するのです。（どうやら、リサイズイベントを利用して判断しているようですね）
このorientationchangeは、やはり今までのイベントと同様にbindでバインドをします。ただし、ちょっと注意すべき点があります。まずバインド部分ですが、以下のようになっていますね。
なお、$(window)にはliveでバインドするとうまく機能しないようです。どうもウインドウに関してはjQuery Mobileのコンポーネントへのイベントバインドとまったく同じというわけでもないようです。このため、ここではjQueryの$(document).readでバインドしてあります。
AndroidやiPhoneでは、端末を縦向きにしたり横向きにしたりすると、自動的にアプリの向きが90度回転し、それにあわせて大きさなどが調整されます。jQuery Mobileには、この「向きの回転」に関するイベントが用意されています。「orientationchange」というイベントで、これをバインドすることで、回転時に必要な処理を行わせることができます。
下のリスト欄に、簡単な利用例を挙げておきます。画像を回転させると、その向きに応じて「縦向き（portrait）です。」「横向き（landscape）です。」とメッセージが表示されます。実は、やってみるとわかるのですが、このイベント、パソコンのWebブラウザでもちゃんと機能します。パソコンで、Webブラウザのウインドウサイズを横長にしたり縦長にしたりすると、「横向き」「縦向き」と判断するのです。（どうやら、リサイズイベントを利用して判断しているようですね）
このorientationchangeは、やはり今までのイベントと同様にbindでバインドをします。ただし、ちょっと注意すべき点があります。まずバインド部分ですが、以下のようになっていますね。
$(window).bind('orientationchange',doAction);このorientationchangeイベントは、$(window)に対してバインドします。これは間違えないようにしてください。これ以外のオブジェクトにバインドしてもうまく機能しません。また実行される関数は、以下のような形で定義されます。なお、$(window)にはliveでバインドするとうまく機能しないようです。どうもウインドウに関してはjQuery Mobileのコンポーネントへのイベントバインドとまったく同じというわけでもないようです。このため、ここではjQueryの$(document).readでバインドしてあります。
function doAction(event){……}引数に、発生したイベントに関する情報をまとめたオブジェクトが渡されます。これは重要です。現在の画面が縦向きか横向きかは、この渡されたオブジェクトを使ってチェックする必要があるからです。if (event.orientation=="portrait"){……サンプルでは、このようにして向きをチェックしていました。引数オブジェクトのorientationというプロパティに、向きに関する情報が保管されています。縦向きならば"portrait"、横向きならば"landscape"というテキストが設定されているのです。これを調べることで現在の向きが分かります。(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">
$(document).ready(function(){
$(window).bind('orientationchange',doAction);
});
function doAction(event){
if (event.orientation=="portrait"){
$('#msg').text("縦向き（portrait）です。");
} else {
$('#msg').text("横向き（landscape）です。");
}
}
</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>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る