3

JQM パネルにかなり複雑なメニューがあり、アプリケーションのすべてのページからアクセスできるようにする必要があるとします。これを実装する 1 つの方法は、Panel コードをすべてのサブページにコピー アンド ペーストすることです。

アプローチ 1 - 残忍な方法

これはうまくいきました。ただし、単純なパネルを使用した小さなアプリケーションにのみ適しています。Panel コードの大部分をコピーして他のすべてのページに適用するのは非常に面倒であり、後で DOM に読み込まれるページが増えると、パフォーマンスの問題が確実に発生します。

だから私はそれを別の方法でやろうとしました - 自分でパネルを操作しました。イベントをタップして、pagecreate読み込まれたページに Panel を追加しました。このようにして、DOM をきれいに保ち、常に 1 つの Panel を常に扱うことができます。

アプローチ 2 - 希望に満ちた方法

しかし、それはうまくいきませんでした。あるページから別のページに強制的に移動してpageContainer.trigger('refresh')orを呼び出した後、パネルが再初期化に失敗したようpageContainer.trigger('create')です。

だから私はこれをやった - Panel htmlをjs変数に保持し、前のページのパネルを削除せずに、ロードされたページにパネルhtmlを追加します。これは機能しているようです。

アプローチ 3 - 妥協の方法

このアプローチでは、DOM に Panel が 1 つしかないことを実際に処理することはできませんが、少なくともすべてのページにそれをコピーして貼り付ける必要はありません。

今はうまくいきますが、私はそれほど満足していません。この質問をここに投稿しています。アプローチ 2 が機能しなかった理由を誰かが説明してくれることを願っています。

** 私のアプリはマルチページ テンプレートを使用しています

乾杯

4

3 に答える 3

4

すべてのページに一意の ID を持つパネルでリストビューを使用します。そして、onpagecreate イベントを使用して、リストビューに JavaScript のデータを入力します。

私のブログで実際の例を確認してくださいhttp://teusink.blogspot.nl/2013/04/android-example-app-with-phonegap-and.html?m=1

于 2013-05-13T06:58:28.983 に答える
3

私はこのコードを使用しています 

$(":jqmData(role='page')").bind("pagebeforeshow", function()  {  
       $.mobile.activePage.find('#panel_menu').load("share/menu.html",
           function(data) {
                $.mobile.activePage.trigger("pagecreate");  
           });
});
于 2013-04-24T03:19:00.940 に答える
1

かなり遅いですが、3番目の方法があります

<div data-role="panel" id="mypanel">
    <!-- panel content goes here -->
</div>

<div data-role="page">
<!-- Blah blah blabh -->
</div>

そして、JavaScriptを使用して初期化します。$("#mypanel").panel();

于 2013-11-07T07:44:33.210 に答える