如何在JQuery Mobile(JQM)嵌入/内部页面之间轻松传递URL参数/数据？

Question

如何在嵌入式JQuery Mobile页面之间传递/访问URL参数(或简单数据)？

即我有一个单独的HTML页面(index.html),其中包含两个"页面"(页面标识)"文章列表"和"文章详细信息",我想将一个ID传递到文章列表页面即索引.html#article-list？id = 12345并再次阅读.

我们知道该框架本身不支持它(http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html).曾经有一个名为jqm.page.params的插件,但多年来它并没有太多的爱,它不适用于JQuery 1.3 ..然后有jQuery Mobile路由器插件,但这似乎令人困惑和矫枉过正.

知道如何解决这个问题并在嵌入页面之间传递数据/参数吗？

Answer 1

根据帮助文档 jqm 1.3.2(最新版本 - 您已检查旧版本的文档),仍然无法将查询参数传递给嵌入页面.
但是您可以使用接下来的三个插件之一将查询参数传递给内部页面:

• 一个轻量级的页面params插件(你提到它在jqm 1.3中不起作用)
• 一个功能更全面的jQuery Mobile路由器插件,可与backbone.js或spine.js一起使用.
• 一个非常简单的Routerlite插件

您还可以使用以下方法传递参数:

• Html属性
• 网址参数
• 本地存储(永久存储)
• 会话存储(仅在会话期间启用日期)

关于前两种方法的原始答案可以在这里找到.我修改了一些例子(例如url params没有用).

属性

HTML:

<div data-role="page" id="article-list">
    <div data-role="content">
        <ul data-role="listview" data-theme="c">
           <li><a data-parm="123" href="#article-detail">123</a></li>
           <li><a data-parm="321" href="#article-detail">321</a></li>
        </ul>
    </div>
</div>
<div data-role="page" id="article-detail">
    <div data-role="content">
        <div id="paramId" data-extParam=""></div>
    </div>
</div>

JS:

$("a").on("click", function (event) {    
   var parm = $(this).attr("data-parm");
   $('#paramId').attr( 'data-extParam',parm);    
});    
$("#article-detail").on("pageshow", function onPageShow(e,data){
     alert($('#paramId').attr( 'data-extParam'));
});

示例也在jsfiddle上

Url params

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Home Page</li>
            <li><a href="?cid=1234#page2" rel="external">Page 2</a></li>
        </ul>                
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Page 2</li>
            <li><a href="?cid=4321#home">Home Page</a></li>
        </ul>
    </div>
</div>

JS:

$("#page2").on("pageshow", function onPageShow(e,data){

    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

关于jsfiddle的相同示例

本地存储:

HTML:

<div data-role="page" id="home">
    <div data-role="content">
        <a href="#page2" data-role="button" id="buttonPage">Page2</a>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="content"></div>
</div>

JS:

$("#page2").on("pageshow", function onPageShow(e,data){
    alert(localStorage.getItem("localId"));
});

$('#buttonPage').click(function(e) {
    localStorage.setItem("localId", 111);
});

来源可以在jsfiddle上找到

会话存储

例如,在刚repace上述localStorage上sessionStorage