JQuery Mobile:使用 'data-rel="back"' 生成动态页面
Posted
技术标签:
【中文标题】JQuery Mobile:使用 \'data-rel="back"\' 生成动态页面【英文标题】:JQuery Mobile: Using 'data-rel="back"' with dynamic page generationJQuery Mobile:使用 'data-rel="back"' 生成动态页面 【发布时间】:2013-03-26 22:15:06 【问题描述】:在我的 jquery 移动应用程序中向后移动历史堆栈时遇到问题。
基本上,我有三个页面:
-
搜索表单(带有页面角色的预构建 div。有限导航:仅限结果列表页面)
结果列表(带有页面角色的预建 div,通过 ajax 添加结果信息。可以导航到任何记录页面)
记录页面(完全动态构建。可无限导航到相关记录页面)
记录页面是根据表格和记录ID动态创建的,每次选择新记录时都会附加到文档正文中。
var page_id = table + record_id;
var pg_html = newPageHTML(page_id );
$('body').append(pg_html);
$.mobile.changePage($("#" + page_id));
在前进到一条记录并按下“返回”按钮 (data-rel="back") 后,预期的行为将是返回到上一页,无论是另一条记录还是结果列表,但我被发送一路回到搜索表单。当我使用 data-dom-cache="true" 而我不使用时会发生这种情况。
任何解释为什么会这样?感谢您的帮助。
【问题讨论】:
【参考方案1】:在 DOM 中获取上一页的 ID,然后移动到它。
Working Demo
$('.selector').on('click', function()
// get the ID of the previous page
var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;
// move to previous page with reverse effect
$.mobile.changePage(previous,
transition: 'slide',
reverse: true
);
);
【讨论】:
啊,谢谢奥马尔。我在过去一个小时左右一直在研究它,并在下面提出了一个复杂的解决方案。我非常感谢你的回答。我希望我可以测试和实现它,但是我对我的代码做了很多更改,我什至无法恢复到原来的问题。感谢您的示例和帮助。它看起来是一个很棒、简单、易于实施的解决方案。【参考方案2】:好的,这就是我修复它的方法。虽然我不会选择这个作为答案,因为它与我希望它的工作方式相去甚远,而且看起来非常复杂。
问题:
-
无法将任何未指向真实 .html 页面的页面更改保存到历史记录。因此,在动态页面之间弹跳已经过时了。
我需要一种方法将我的数据传递到 .html 页面,该页面将保留在历史记录中,因此我使用了 url 中的序列化字符串,例如 GET 字符串。和这里类似,但是一个不同的,更短的,更干净的我找不到链接 - 抱歉! (How can I get query string values in javascript?)
.html 页面必须不同并在彼此之间交换,以便页面重新加载并触发页面更改事件侦听器。
现在 html 页面已存储,并具有在单击返回时重绘自身所需的所有信息。
#2 的代码(不是我的,非常感谢编写它的人):
$.urlParam = function(name)
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
#3 的代码:
// change page
if($('.ui-page-active').attr('id') == "record-a")
$.mobile.changePage("p-record-b.html?table=" + content_type + "&id=" + record_id);
else if($('.ui-page-active').attr('id') == "record-b")
$.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
else
$.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
【讨论】:
检查这个answer 在页面之间传递参数。以上是关于JQuery Mobile:使用 'data-rel="back"' 生成动态页面的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释
jquery mobile,结合jquery mobile“页面”和内部页面
jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页