![](/img/trans.png)
[英]Remove page from JQuery Mobile history such that 'Back' button bypasses it
[英]How to modify jQuery mobile history Back Button behavior
我会开始研究一下,但没有解决方案可以解决看起来应该是一个简单的JQM修改。
我有一个葡萄酒评论webapp,具有以下视图用户流程:http: //5buckchuck.com/
葡萄酒类型>酒单>葡萄酒详情>葡萄酒评论(通过django backto重定向)>葡萄酒详细信息从评论更新
我想要发生的是当用户按下后退按钮时它应该返回到酒单。 目前发生的是重新加载Wine Detail视图。 需要三次回压才能回到酒单。 :-(
我解决这个问题的想法是两个:
如果历史堆栈中的最后一项是Wine Review,则拼接历史堆栈中的最后3项。 我很难尝试内省最后一个历史对象来获取pageURL。 我觉得这个解决方案有点太脆弱了。
var last_hist = $.mobile.urlHistory.getActive(); last_hist.data.pageURL;
第二个想法是覆盖后退按钮行为,以便Wine Detail视图中的后退按钮始终返回到Wine列表视图
$('div#wine_detail').live('pageshow',function(event, ui){ $("a.ui-btn-left").bind("click", function(){ location.replace("/wines/{{wine.wine_type}}/#"); }); });
可能有更好的方法来做到这一点,但我有点想法。
更新:所以我继续以一些可以忽略不计的结果来破解这个问题。 在我发现的事情上,这是我基本上需要工作的东西: window.history.go(-3)
从控制台它完全符合我的需要。
所以我尝试将后面的按钮绑定到这样:
$('div#wine_detail').live('pageshow',function(event, ui){
var last = $.mobile.urlHistory.stack.length - 1;
var last_url = $.mobile.urlHistory.stack[last].url;
var review_url = /review/g;
if (last_url.match(review_url) )
{
$('div#wine_detail a.ui-btn-left').bind( 'click', function( ) {
console.log("click should be bound and going back in time...")
window.history.go(-2);
});
}
else
{
console.log('err nope its: ' + last_url);
}
});
没有骰子,有些东西会中断交易......
我不想用urlHistory拼接/弹出/推送。 如何在pagebeforechange上重定向如下:
$(document).on("pagebeforechange", function (e, data) {
var overrideToPage;
// some for-loop to go through the urlHistory TOP>DOWN
for (var i = $.mobile.urlHistory.activeIndex - 1; i >= 0; i--) {
// this checks if # = your target id. You probably need to adapt this;
if ($.mobile.urlHistory.stack[i].url = $('#yourPageId').attr('id')) {
// save and break
overrideToPage = $.mobile.urlHistory.stack[i].url;
break;
}
// set new Page
data.toPage = overrideToPage;
}
});
这会捕获您的后退按钮changePage调用并重定向到您想要的页面。 您当然可以直接设置data.toPage = winelist 。
我只用#internal页面做这个,但用winelist.html等设置它并不是那么难。
有关详细信息,请查看JQM 文档中的事件页面
为什么页面的标题部分没有后退按钮? 像这样的东西:
<div data-role="header">
<a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
<h1>Wine Detail</h1>
</div><!-- /header -->
我最近也和这个人搏斗过。 在考虑之后,我意识到我可以重写我的JQM应用程序,以便在我的历史记录中使用Pop Up“windows”来查找那些我不想要的页面。 这最终成为一个更容易和更清晰的解决方案,而不是浏览浏览器历史记录。
现在用户可以直观地使用浏览器后退按钮,而不必编写应用程序后退按钮。
您唯一需要确保的是弹出窗口本身不会进入浏览器历史记录,因此请确保将“history”选项设置为false,如下所示:
$('#some_popup').popup( { history: false } );
好的,所以解决方案接近我发布的更新。 以前的解决方案的问题是,有很多东西绑定到“后退”按钮。 虽然我的新绑定动作有时可能已经起作用,但其他动作也会发生,我试过unbind()
但仍然没有用。
我的解决方案是一点点烟雾和镜子。 我查看上一页是否是评论页面然后如果是,我将旧的后退按钮替换为我的新假按钮,其历史记录返回步骤如下:
$('div#wine_detail').live('pageshow',function(event, ui){
var last = $.mobile.urlHistory.stack.length - 1;
var last_url = $.mobile.urlHistory.stack[last].url;
var review_url = /review/g;
if (last_url.match(review_url) )
{
$('a.ui-btn-left').replaceWith('<a href="" id="time_machine" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>');
$('#time_machine').bind( 'click', function( ) {
console.log("click should be bound and going back in time...")
window.history.go(-3);
});
}
else
{
console.log('err nope its: ' + last_url);
}
它看起来完全一样,没有人更聪明。 它可能通过使用jQm方法pagebeforeshow
来改进,因此用户永远不会看到交换。 希望这有助于某人。
如果您有关闭按钮的情况,请参考任意(不是最后一页)页面,您也可以先更改为目标页面,然后打开对话框。 因此,对话框中的关闭按钮将打开目标页面。
// First: change to the target page
$.mobile.changePage('#target_page');
然后打开这样的对话框。
// Second: change to the dialog
window.setTimeout(
// for some reason you have to wrap it in a timeout
function(){
$.mobile.changePage('#dialog');
},
1
);
现在您可以打开对话框,关闭按钮将打开#target_page。
好处:
我之前在使用jquery mobile时遇到过类似的问题,并在文档中解决了这个问题。 在“在页面开头”设置Javascript时,请使用pageinit而不是准备好或者在您的案例页面显示中。 我认为这将解决您的问题,而无需解决历史队列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.