将参数传递给jQuery Mobile中的page-id
我正在尝试将一些参数传递给jQuery Mobile中的页面ID。
该站点由带有链接的列表视图组成,每个链接都有编码的哈希,如下所示:
Puerto Natales
我已经绑定了pagebeforechange
以捕获URL中的哈希值,执行参数检测并根据传递的参数量采取措施。
现在,使用cookies,我一直在尝试这个:
$(document).one("pageinit", function(event, data) { if (location.hash.search(/^(#ciudades|#pronostico)/) === -1) { if ($.cookie("recordar")) { $.mobile.changePage($("#pronostico"), { data: "region=" + $.cookie("region") + "&ciudad=" + $.cookie("ciudad") }); } } });
但它只是将我传递给#pronostico
page-id,哈希中没有参数。 结果,我得到一个没有它应该显示的信息的页面。
提前致谢。
是的,默认情况下不支持散列上的参数。 我一直在使用以下插件给我这个,到目前为止它一直很好用;-)
jqm.page.params
更新 – 如何使用:
在包含jqm.page.params.js之后我添加了以下代码:
$(document).bind("pagebeforechange", function( event, data ) { $.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null; });
例如,一个被调用的页面如:index.html #search?id = mysearchkeyword现在可以在任何页面事件中访问此信息,我觉得:
$(document).on("pagebeforeshow", "#firstpage", function(e, data){ if ($.mobile.pageData && $.mobile.pageData.id){ console.log("Parameter id=" + $.mobile.pageData.id); } });
将“mysearchkeyword”打印到您的日志记录控制台。
希望这可以帮助!
PS:请注意,我与插件或其作者没有任何关系
编者注:作者将此作为第二个代码块。 在Jquery 1.9中,live被删除,所以我用.on语法更新了上面的示例。 这是原件:
$("#firstpage").live("pagebeforeshow", function(e, data){ if ($.mobile.pageData && $.mobile.pageData.id){ console.log("Parameter id=" + $.mobile.pageData.id); } });
但该插件不支持书签。 如果你添加一个pagechange处理程序,你可以通过在jQM完成之后将params放回url来修复它:
// list of inner pages where you want to support params AND bookmarking // maybe better to use a CSS class name to mark them var $paramPages; $(document).ready(function() { $paramPages = $('#book, #order'); }); // put the params back into the location once jQM is done // $( document ).bind( "pagechange", function( e, data ) { if (data.toPage.is($paramPages) && data.absUrl) { window.location.replace(data.absUrl); } });
看起来在页面之间实现传递URL参数的一种方法是在jQuery Mobile文档中使用此示例中的哈希处理方法: http : //demos.jquerymobile.com/1.4.1/navigation-hash-processing/
此解决方案似乎是理想的,因为与其他解决方案不同,它会更新浏览器地址栏中的URL,以便在页面之间进行更改时包含URL参数。 这种方法也消除了使用任何插件的需要,例如’jqm.page.params’。