jQuery Mobile逆引きリファレンス
モバイル端末を縦横回転させたときにレイアウトを調整するには？
端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。
orientationchangeイベントを利用することで、端末の回転を検知できます。例えば以下は、ラジオボタングループを、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<script>
// 端末の回転に応じてラジオボタングループを縦並び／横並びに変更
$(window).on('orientationchange', function(e) {
// 1端末の向きに応じて、変数typeをセット
if (e.orientation === 'portrait') {
var type = 'vertical';
} else {
var type = 'horizontal';
}
// 2ラジオボタングループの並びを再設定
$('[data-role="controlgroup"]').controlgroup('option', 'type', type);
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<form method="POST" action="">
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>使用環境：</legend>
<input id="entry_os_win" name="entry_os" type="radio" value="win" />
<label for="entry_os_win">Windows系</label>
<input id="entry_os_mac" name="entry_os" type="radio" value="mac" />
<label for="entry_os_mac">Mac系</label>
<input id="entry_os_lin" name="entry_os" type="radio" value="linux" />
<label for="entry_os_lin">Linux系</label>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
orientationchangeイベントリスナーでは、イベントオブジェクトのorientationプロパティを経由して、端末の現在の向きを参照できます。具体的な戻り値は、以下の通りです。
| 戻り値 | 概要 |
|---|---|
| portrait | 縦置き |
| landscape | 横置き |
1では、e.orientationプロパティが「portrait」／「landscape」いずれであるかによって、変数typeに「vertical」、または「horizontal」をセットしています。
変数typeは、Controlgroupウィジェット（＝ラジオボタンなどをまとめるためのウィジェット）のtypeオプションに設定するための値を表します（2）。Controlgroupウィジェットでは、typeオプションによってコントロールを縦並びにするか（vertical）、横並びにするか（horizontal）を決めています。マークアップ上では「data-type="horizontal"」のように指定していたオプションです。
これで端末の回転タイミングで、ラジオボタンの配置が動的に切り替わるようになりました。
補足：端末の向きを判定する方法
jQuery Mobileでは、デフォルトでwindow.orientationプロパティの情報に基づいて、端末の向きを判定しています。ただし、その環境がwindow.orientationプロパティをサポートしていない場合には、スクリーンのサイズ（縦横比）から端末の向きを推定します。よって、デスクトップブラウザーでもブラウザーサイズを変更することで、orientationcchangeイベントを発生させることができます。
もしも、常にスクリーンサイズでもって端末の向きを判別させたい場合には、以下のようにorientationChangeEnabledプロパティを設定してください。動作パラメーターの設定についての詳細は、別稿「jQuery Mobileの動作パラメーターを設定するには？」を参照してください。
|
$.mobile.orientationChangeEnabled = false;
|
ネイティブなwindow.orientationプロパティは、あくまで端末の向きを表すもので、画面領域が縦長であるかどうかを示すものではありません。ネイティブな判定で意図した動作を得られないようなケースでは、このパラメーターを利用してください。
※以下では、本稿の前後を合わせて5回分（第35回～第39回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
37. data-defaults／data-enhanced属性でページの描画を高速化するには？
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
38. スクロール時に追加的にコンテンツを読み込むには？
スクロールの開始／終了のタイミングで発生するscrollstart／scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
39. 【現在、表示中】≫ モバイル端末を縦横回転させたときにレイアウトを調整するには？
端末の回転を検知できるorientationchangeイベントを説明して、端末が縦置きの場合は縦並びに、横置きの場合は横並びに表示する方法を説明する。
