jQuery モバイル アプリケーションには 2 つのページがあります。最初のページのリスト項目がタップされると、ユーザーは 2 番目の html ページに移動します。2 番目のページには、2 つのボタンを持つナビゲーション バーがあります。これらの 2 つのナビゲーション バー ボタンで、ページのコンテンツ領域に div を表示/非表示にします。使用するイベント処理メカニズムが見つかりませんでした。document.ready は機能しません。pageinit も機能しません。誰かが私をサンプルに誘導できますか?
質問する
6932 次
2 に答える
6
2 つ (またはそれ以上) の個別の HTML ファイルがある場合は、jQM でイベントを適切に処理する方法を理解する必要があります。
jQM は、AJAX によってそれらをロードすることにより、個別の HTML ファイルを単一の DOM に追加します
AJAX 経由でロードされる各ページは
pageinitおよびpageshowイベントを発生させます。違いは、ページに戻ったときに pageshow が再発生することです。最初のページの後のすべてのページは、
<div data-role="page/dialog"></div>要素内のコンテンツのみをロードします。したがって、後続のページに取り込ま<head/>れていないJS がある場合、2 番目のページの navbar JS コードが 2 番目のページの にある可能性があります。これは注意すべき重要なことです。では、どのように JS を管理し、整理しておくのでしょうか? 私たちの本番 jQM アプリでは、最初にすべての JS をロードします。1 つのエントリ ポイントがあり、JS コードはすべてのページに含まれているため、どのページから入力しても、必要なすべての JS が 1 回だけ読み込まれ、それ以上 JS が読み込まれることはありません。JS が含まれて
<div data-role="page"/>いる場合は、ページにアクセスするたびに再起動されることを警告します。エントリ ポイントは
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){、ロードされるすべてのページ/ダイアログがこのイベント ハンドラーをトリガーpageinitするpageshow単一の関数である必要がありevent.typeます。<div data-role="page" data-pageIdentifier="home etc.."></div>すべてのケースを処理するには、switch ステートメントを使用します。これで必要なすべての情報が得
thisられ、現在のページへの便利なリファレンスとなり、イベント リスナーを.on関数にバインドします。そのため、ナビゲーション バーなどのドキュメント ルートではなく、ページでリッスンします。- これを使用.liveすると、ドキュメント全体をリッスンします (ただし、すべてのページが DOM キャッシュされるわけではありません)。実際にはページ内では、常にページ.findから開始して使用します。たとえば、$this.find('div.something') を使用します。$('div.something) は使用しません。これにより、DOM 全体がクロールされ、他のページにヒットする可能性があり、さらに悪い結果が生じる可能性があります。現在のページ内にない誤った結果になるため、別の大きな間違いは次のようなことをすることです$('img.selectItem').bind('click'...別のDOMキャッシュページに img.selectItem がある可能性があるため、必要以上にバインドすることになります-私は次のようにします$this.find('img.selectItem').bind(($thisは現在のページです)
最終的に大量のコードが作成されたため、他の JS ファイルの関数を呼び出すハンドラー オブジェクトを作成しました。RequireJS を使用することもできますが、その必要はありませんでした
于 2012-06-08T17:26:48.480 に答える
0
この jsfiddle のコードを確認してください: http://jsfiddle.net/nirmaljpatel/6UbGp/
于 2012-06-07T11:44:06.227 に答える