私は比較的jQuery Mobileに慣れていません。なので、フレームワークの機能を隅々まで知っているわけではありません。
現在、履歴と動的なページ ナビゲーションに関するいくつかの問題に直面しています。
基本的に、私は次のことを達成したいと考えています。
ボタンのクリックでコンテンツを変更する Web ページがあります。「ホーム」ページに<div data-role="page" id="list_root">...</div>. ボタンをクリックすると、ページが に移動し<div data-role="page" id="list_123">...</div>ます。戻るボタンでdiv「#list_root」の内容に戻れるようにしたいです。
jQuery を使用する前に、私はこれを自分で実装しhistory.pushState(divContent, null, "#list_<id>")、古いコンテンツを新しいコンテンツに置き換えました。ただし、pushState プラグインは、jQuery モバイルを使用してデフォルトで非アクティブ化されています。
ナビゲートするために押されるボタンは、次のように定義されます。
<a href='#list_<id>' class='...'>...</a>
「onhashchange」のコールバックを実装して、新しい div コンテンツ (list_ 用) の作成を実装しようとしました。しかし、このイベントは呼び出されません。
さらに、リンクがクリックされたときにコンテンツを作成できれば<div id="list_<id>">、以前のコンテンツを置き換えて、 のコンテンツを表示したいと考えています。
アプリケーションは大量のデータを提示するため、jQuery モバイルのネストされたリストを使用したくありませんでした。
フレームワーク機能を使用してこれを実装する方法について何かヒントはありますか?
編集：
次のような状況があります。
<div data-role="page" class="type-interior" id="main_window">
<div id="current" class="ui-content" data-role="content" role="main">
<div id="list_root" data-url="list_root">
<div id="list_123" data-url="list_123" data-role="page">
</div>
</div>
ご覧のとおり、「list_root」はデフォルトの「開始ページ」であり、意図したとおりに表示されます。
click() のイベント リスナーを追加して、<div id="list_123">viaのコンテンツを動的に作成しました。
document.addEventListener('click', function(e) {
... create it ...
e.stopPropagation();
}, true)
これは機能します。
ボタンは次のように作成されます。
<a href="#list_123" data-role="button">List_123</a>
div コンテンツが正常に作成された後、URL のハッシュが #list_123 に変更されます。しかし、ページが表示されません。ここに問題がありますか、それはタグ<div data-role="page" id="list_123">...</div>内にありますか? <div data-role="page" class="type-interior" id="main_window">次にやってみます！