您如何最轻松地在JQuery Mobile(JQM)嵌入式/内部页面之间传递URL参数/数据? [英] How can you most easily pass URL arguments/data between JQuery Mobile (JQM) embedded/internal pages?

问题描述

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

即我有一个HTML页面(index.html)，其中有两个页面"(页面ID)在文章列表"和文章详细信息"中，我想将ID传递到文章列表页面(即索引). html#article-list?id = 12345并再次阅读.

I.e. I have a single HTML page (index.html) with two "pages" (page-id) in it "article-list" and "article-detail" and I want to pass an ID into the article-list page i.e. index.html#article-list?id=12345 and read it again.

我们知道框架本身不支持它( http ://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html ).曾经有一个名为jqm.page.params的插件，但多年来没有受到太多关注，它无法与JQuery 1.3一起使用.然后是jQuery Mobile路由器插件，但这似乎令人困惑和过度使用.

We know the framework doesn't support it natively (http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html). There used to be a plugin called jqm.page.params but it hasn't had much love over the years and it does not work with JQuery 1.3.. Then there's jQuery Mobile router plugin but that seems confusing and overkill.

有什么办法解决此问题并在嵌入式页面之间传递数据/参数吗?

推荐答案

根据

Acording to help docs to jqm 1.3.2 (latest release - you have checked docs for older version) there still no way to pass query parameters to an embedded page.
But you can use one of the next three plugins for passing query params to internal pages:

• 轻量级页面参数插件(您已经提到在jqm 1.3中不起作用)
• 功能更全面的 jQuery Mobile路由器插件，可与骨干.js或spine一起使用. js.
• 一个非常简单的 Routerlite插件

• A lightweight page params plugin (you have mentioned that is not worked in jqm 1.3)
• A more fully featured jQuery Mobile router plugin for using with backbone.js or spine.js.
• A very simple Routerlite plugin

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

Also you can pass parameters by using:

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

可以找到有关前两种方法的原始答案

Original answer about the first two methods can be found here. I modified a little bit examples (example with url params has not worked).

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

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

仅在sessionStorage上的localStorage上示例中重复

这篇关于您如何最轻松地在JQuery Mobile(JQM)嵌入式/内部页面之间传递URL参数/数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！