jQuery mobile - 关闭历史记录面板 [英] jQuery mobile - close panel on history back

问题描述

我有一个从侧面滑入的 jQuery 移动面板，效果很好.但是假设您有一个登录页面，该页面重定向到带有面板的主页.现在，如果用户打开面板，然后单击后退按钮，他希望面板关闭.但是浏览器会导航回登录页面.

我试过在网址中添加一些内容:

window.location.hash = "panelOpen";

但这只会弄乱 jQuery 移动历史状态模式.我还尝试监听导航事件，并在面板打开时阻止它:

$(window).on('navigate', function (e, hans) {var panel = $('[data-role="panel"].ui-panel-open');如果 (panels&&panels.length>0) {e.preventDefault();e.stopPropagation();$('#' + panel[0].id).panel('close');返回假；}});

这种工作，除了url被更改，我无法抓取更改url的事件.此外，它还混淆了 jQuery 移动历史记录模式.

那么人们如何使用 jQuery 移动面板实现这种预期的类似应用程序"的行为；打开面板 > 历史返回 > 关闭面板.就是这样.

非常感谢！

解决方案

更新

与其从 jQuery Mobile 的历史记录中检索当前 URL，不如从 hashchange 事件 event.originalEvent.newURL 中检索它，然后将其传递给 popstate 事件是 replaceState() 与该 URL.

---

不要听navigate，而是听之前触发的popstate.这里的技巧是操作浏览器的历史和jQuery Mobile的历史，通过replaceState()和重新加载相同的页面而无需transition.

var newUrl;$(window).on(hashchange", function (e) {/* 检索网址 */newUrl = e.originalEvent.newURL;}).on("popstate", function (e) {var 方向 = e.historyState.direction == 返回";?真假，activePanel = $(.ui-panel-open").length >0 ?真假，网址 = 新网址，标题 = 文档.title;如果(方向&& activePanel){$(".ui-panel-open").panel("close");$(".ui-header .ui-btn-active").removeClass("ui-btn-active");/* 重新加载同一页面以维护 jQM 的历史记录 */$.mobile.pageContainer.pagecontainer(更改", url, {allowSamePageTransition: 真});/* 替换状态以维护浏览器历史记录 */window.history.replaceState({}, title, url);/* 防止导航到历史记录 */返回假；}});

这部分是为了在重新加载同一页面时保持之前使用的相同过渡，因为 transition 设置为 none.

$(document).on(pagebeforechange", function (e, data) {if (data.options && data.options.allowSamePageTransition) {data.options.transition =无"；} 别的 {data.options.transition = $.mobile.defaultPageTransition;}});

<块引用>

演示 - 代码

I have a jQuery mobile panel which slides in from the side, it works great. But lets say you have a login page, that redirects to a main page with a panel. Now if the user opens the panel, and then clicks the back button, he expects the panel to close. But instead the browser navigates back to the login page.

I´ve tried adding something to the url:

window.location.hash = "panelOpen";

But that just messes up the jQuery mobile history state pattern. I´ve also tried to listen to the navigate event, and prevent it if a panel is open:

$(window).on('navigate', function (e, hans) {
     var panels = $('[data-role="panel"].ui-panel-open');
     if (panels&&panels.length>0) {
         e.preventDefault();
         e.stopPropagation();
         $('#' + panels[0].id).panel('close');
           return false;
         }
});

This kind of works, except that the url is changed, and I cannot grab the event that changes the url. Furthermore, it also messes up the jQuery mobile history pattern.

So how does people achieve this expected 'app-like' behaviour with a jQuery mobile panel; open panel > history back > close panel. And thats it.

Thanks alot!

解决方案

Updated

Instead of retrieving current URL from jQuery Mobile's history, It is safer to retrieve it from hashchange event event.originalEvent.newURL and then pass it to popstate event to be replaceState() with that URL.

---

Instead of listening to navigate, listen to popstate which fires before. The trick here is manipulate both browser's history and jQuery Mobile's history by replaceState() and reload same page without transition.

var newUrl;
$(window).on("hashchange", function (e) {
    /* retrieve URL */
    newUrl = e.originalEvent.newURL;
}).on("popstate", function (e) {
    var direction = e.historyState.direction == "back" ? true : false,
        activePanel = $(".ui-panel-open").length > 0 ? true : false,
        url = newUrl,
        title = document.title;
    if (direction && activePanel) {
        $(".ui-panel-open").panel("close");
        $(".ui-header .ui-btn-active").removeClass("ui-btn-active");
        /* reload same page to maintain jQM's history */
        $.mobile.pageContainer.pagecontainer("change", url, {
            allowSamePageTransition: true
        });
        /* replace state to maintain browsers history */
        window.history.replaceState({}, title, url);
        /* prevent navigating into history */
        return false;
    }
});

This part is meant to maintain same transition used previously as transition is set to none when reloading same page.

$(document).on("pagebeforechange", function (e, data) {
    if (data.options && data.options.allowSamePageTransition) {
        data.options.transition = "none";
    } else {
        data.options.transition = $.mobile.defaultPageTransition;
    }
});

Demo - Code

这篇关于jQuery mobile - 关闭历史记录面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！