ヘッダー、コンテンツ、パネルを含む通常のjqueryページがあります
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
</div>
このページは、最初にパネル内のメニュー (カスタム ajax 呼び出しを使用) とコンテンツとしてのウェルカム テキストで読み込まれます。テキストのほかに、ヘッダーにはメニュー パネルを開くためのボタンも含まれています。
ユーザーがメニュー項目をタップすると、ページ全体ではなくコンテンツのみを置き換えたい。
私は試してきました
$.mobile.changePage('my/valid/url', {
pageContainer : $('#myPage')
});
JQM ajax 呼び出しから正しいコンテンツを取得したことをネットワーク ログで確認できます。しかし、DOM を見ると、空divが に追加されている#myPage、つまり ajax からのコンテンツが挿入されていないだけです。そして、古いコンテンツはまだそこにあります。下記参照：
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
<div data-role="content" data-url="my/valid/url">EMPTY</div>
</div>
もう 1 つのことは、ページ全体#myPageが非表示になっていること(display="none")です。JQM は、内部の 1 つの div のコンテンツを変更できるようにするだけでなく、新しいページ全体を表示したいと考えているようです#myPage。
JQMを使用してJQMページの一部だけを変更することはできますか?
私はカスタム ajax 呼び出しでそれを行い、マークアップを自分で DOM に追加しました。しかし、その後、強化、負荷インジケーターの表示/非表示など、他の多くのことを手動で行う必要があります.