jQuery Mobile Docsで説明したように、jQuery Mobileは内部/埋め込みページへのクエリパラメーターの受け渡しをサポートしていませんが、この機能をサポートするためにプロジェクトに追加できるプラグインが2つあります。軽量のページパラメータプラグインと、backbone.jsまたはspine.jsで使用するためのより完全な機能を備えたjQueryMobileルータープラグインがあります。
異なるページで渡されるデータを実装する方法は他にもありますが、古いWebブラウザーではサポートされていない方法もあります。複数のブラウザーでのアプリケーションの相互運用性に影響を与えないように、実装方法を慎重に選択する必要があります。
Web Storageを使用して、異なるページ間でデータを渡すことができます。
W3schoolsサイトで述べたように、HTML5 Webページを使用すると、ユーザーのブラウザー内でデータをローカルに保存できます。以前は、これはCookieを使用して行われました。ただし、WebStorageはより安全で高速です。データはすべてのサーバー要求に含まれているわけではありませんが、要求された場合にのみ使用されます。ウェブサイトのパフォーマンスに影響を与えることなく、大量のデータを保存することも可能です。データはキーと値のペアで保存され、Webページはそれ自体で保存されたデータにのみアクセスできます。Webストレージは、Internet Explorer 8以降、Firefox、Opera、Chrome、およびSafariでサポートされています。Internet Explorer 7以前のバージョンは、Webストレージをサポートしていません。
クライアントにデータを保存するための2つのオブジェクトがあります。
- 有効期限なしでデータを保存するlocalStorage
- 1つのセッションのデータを格納するsessionStorage
例：
ローカルストレージの例：
ページ1：localStorage.carType = "test";
Page2では、localStorage.carTypeを使用してcarTypeを取得できます。
セッションストレージの例：
ページ1：sessionStorage.carNumber = 10;
Page2では、sessionStorage.carNumberを使用してcarTypeを取得できます。
あなたの場合、考えられる解決策は、各アンカーにIDを追加することです。次に、クリックイベントをキャッチし、IDを取得し、IDをWebストレージに保存して、ページ遷移を実行します。次のページで、WebストレージからIDを取得します。以下に実装を見つけることができます：
<ul id="menu_list" data-role="listview" data-theme="a">
<li><a id="1" href="#">Martin</a></li>
<li><a id="2" href="#">Johnny</a></li>
<li><a id="3" href="#">Luke</a></li>
</ul>
$('#menu_list').children().each(function(){
var anchor = $(this).find('a');
if(anchor)
{
anchor.click(function(){
// save the selected id to the session storage and retrieve it in the next page
sessionStorage.selectedId=anchor.attr('id');
// perform the transition
changePage();
});
}
});
編集：
複数ページのアプローチに従うときにパラメータを渡す別の方法
この例ではjQM changePage()、Ajaxページリクエストでデータを送信するために使用します。
$('#list-d a').on('click', function(e) {
e.preventDefault();
$.mobile.changePage('car-details.html', {
data: {
id: this.id
}
});
});
構築されたURLは.../car-details.html？id = my-id
完全な例については、このStackOverflowの回答を確認してください
これがお役に立てば幸いです。