jQuery Mobile逆引きリファレンス
ページレイアウトが変更したときに処理を実行するには？
ウィジェットのレイアウト状態が変化したとき（例えば開閉パネルが開いた／閉じたときなどに）、処理を実行する方法を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前の通り、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
updatelayoutイベントを利用することで、ページ上に配置されたウィジェットの状態（レイアウト）が変化したことをトリガーとして、処理を実行できるようになります。レイアウトの変化とは、例えば開閉パネルが開いた（閉じた）とか、検索条件の入力によってリストやテーブルの表示が絞り込まれた、などの状態を指します。
例えば以下は、Filterableウィジェットでリストをフィルタリングしたタイミングで、その時どきの表示件数を表示する例です。
|
<!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>
// 2ページ初期化時に初期表示件数を反映
$(document).on('pagecontainershow', function(e) {
$('#count').text($('#list li:visible').length);
});
// 1フィルタリングのタイミングで絞り込み件数を反映
$(document).on('updatelayout', function(e) {
$('#count').text($('#list li:visible').length);
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<form class="ui-filterable">
<input id="keywd" data-type="search" />
<div><span id="count"></span>件が表示されています。</div>
</form>
<ul id="list" data-role="listview" data-filter="true" data-input="#keywd">
<li><a href="#">Rails 4ポケットリファレンス</a></li>
<li><a href="#">Windows 8開発ポケットリファレンス</a></li>
<li><a href="#">10日でおぼえるjQuery入門教室</a></li>
<li><a href="#">10日でおぼえるPHP入門教室</a></li>
<li><a href="#">iPhone／iPad開発ポケットリファレンス</a></li>
<li><a href="#">AndroidエンジニアのためのモダンJava</a></li>
<li><a href="#">独習ASP.NET 第4版</a></li>
</ul>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
updatelayoutイベントのタイミングで、リストの表示件数を取得しているのは1の部分です。リストの表示件数は表示状態（visible）である<li>要素の個数から求めています。jQueryオブジェクトに含まれる要素セットの個数を知るには、lengthプロパティを利用します。
ただし、updatelayoutイベントはリストが初期化される前（ページの表示前）にも発生してしまい、このままでは初期状態で「0件」と表示されてしまうはずです。そこで2でpagecontainershowイベントリスナーを定義し、ページ表示が完了したタイミングでのリストの件数を表示するようにしています。ページイベントについては、別稿「ページのロード／切り替え時に初期化／後処理を実行するには？」も参照してください。
ウィジェットを自作する際の注意
updatelayoutイベントの発生タイミングは、フレームワーク本体ではなく、レイアウトそのものを生成するウィジェットやプラグインに委ねられている点に注意してください。標準で用意されているウィジェットを利用する分にはあまり気にしなくてもよい点ですが、プラグインなどを自作する場合、レイアウト変更のタイミングでupdatelayoutイベントを自らトリガーしなければならないということです（次のコード）。さもないと、そのプラグインによって行われたレイアウト変更を検知できません。
|
$('#hoge').＜レイアウト変更処理＞.trigger('updatelayout');
|
イベントをトリガーするのはtriggerメソッドの役割です。
※以下では、本稿の前後を合わせて5回分（第34回～第38回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
34. JavaScriptからjQuery Mobileページ間の移動を制御するには？
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
36. 【現在、表示中】≫ ページレイアウトが変更したときに処理を実行するには？
ウィジェットのレイアウト状態が変化したとき（例えば開閉パネルが開いた／閉じたときなどに）、処理を実行する方法を説明する。
37. data-defaults／data-enhanced属性でページの描画を高速化するには？
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
38. スクロール時に追加的にコンテンツを読み込むには？
スクロールの開始／終了のタイミングで発生するscrollstart／scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
