jQuery手机 - 关闭历史背面板 [英] jQuery mobile - close panel on history back

问题描述

我有一个从侧面滑入的jQuery移动面板，效果很好。
但让我们说你有一个登录页面，通过面板重定向到主页面。现在，如果用户打开面板，然后单击后退按钮，他希望面板关闭。但是，浏览器导航返回到登录页面。

我曾尝试向网址添加内容：

  window.location.hash =panelOpen; 
  

但是这只会让jQuery移动历史状态模式变得混乱。我也试着听导航事件，并在面板打开时阻止它：

  $（窗口）。 on（'navigate'，function（e，hans）{
 var panels = $（'[data-role =panel]。ui-panel-open'）; 
 if（panels&& amp ; panels.length> 0）{
 e.preventDefault（）; 
 e.stopPropagation（）; 
 $（'＃'+ panels [0] .id）.panel（'close '）; 
 return false; 
} 
}）; 
  

这种作品，除了url被更改外，我无法获取更改网址。此外，它还会混淆jQuery移动历史记录模式。因此，人们如何通过jQuery移动面板实现这种预期的类似应用行为;打开面板>历史返回>关闭面板。这就是它。

非常感谢！

解决方案

h2>

而不是从jQ​​uery Mobile的历史中检索当前URL，从 hashchange 事件 event.originalEvent.newURL ，然后将它传递给 popstate 事件为 replaceState（）与该URL。

---

不要听 navigate ，听听之前触发的 popstate 。这里的诀窍是通过 replaceState（）和 reload 浏览器的历史和jQuery Mobile的历史操作 > 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）。长度> 0？true：false，
 url = newUrl，
 title = document.title; 
 if（direction&&activePanel）{
 $（。ui （ui-btn-active）; 
 $（.i-header.ui-btn-active）。removeClass（ui-btn-active）; 
 / *重新加载同一页面以维护jQM的历史记录* / 
 $ .mobile.pageContainer.pagecontainer（change，url，{
 allowSamePageTransition：true 
}）; 
 / *替换状态以维护浏览器历史记录* / 
 window.history.replaceState（{}，title，url）; 
 / *防止导航到历史记录* / 
返回false; 
} 
}）; 
  

这部分是为了保持与 transition


  c $ c>设置为 none  $（document）.on（pagebeforechange，function（e，data）{
 if（data.options&& data.options.allowSamePageTransition）{
 data.options.transition =none ; 
} else {
 data.options.transition = $ .mobile.defaultPageTransition; 
} 
}）; 
  





Demo - 代码




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手机 - 关闭历史背面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！