jQuery Mobile根据条件更改页面 [英] Jquery Mobile change page based on a condition

问题描述

我有2个Jquery Mobile页面(登录和主页).当用户首次启动应用程序(phonegap)时，系统将检查本地存储变量('ses_already_login).如果设置了变量，则系统不应显示登录页面，而应显示主页.如果未设置该变量，则应显示登录页面.

I have 2 Jquery Mobile pages (Login and Home). When the user first launches the application (phonegap) the system check for a local storage variable ('ses_already_login). If the variable is set then the system should not show the login page instead it should show the home page. If the variable is not set then it should show the login page.

登录页面和首页都包含页眉和页脚以及一些表单控件，这些控件使用jQuery动态加载.

Both login and home page contains a header and footer with some form controls which are loaded dynamically using jQuery.

我正在执行以下操作，并且看到空白的灰色屏幕.这种情况解决了，我进入空白屏幕后可以看到警报消息.

I am doing something like below and I see a blank grey screen. The condition gets through and could see the alert message after that I goes to a blank screen.

$(document).on("pagebeforeshow","#pg_login",function(){
  if(checkAlreadyLogin()){
    alert('I am inside');
    $.mobile.changePage("#pg_home");
    e.preventDefault();
  }
});

我也知道changePage已过时.因此，有人可以帮助我如何重定向/更改到主页.

I also aware that changePage is deprecated. So, can someone help me how I can redirect/change to the home page.

推荐答案

解决方案1:

在这种情况下，您无需使用任何其他事件就可以使用pagecontainerbeforechange.因为在此阶段，您可以更改toPage属性以将用户重定向到所需的任何页面.

Solution 1:

You need to use pagecontainerbeforechange in that case not any other event. Because at this stage, you can alter toPage property to redirect user to any page you want.

该事件总是触发两次，并返回toPage，其中包含目标页面的url(字符串)或jQuery object.但是，在第一次运行时，它会两次返回jQuery object.第一次触发时，除了您的 condition 之外，您还必须确保toPage是object和absUrl是undefined.

That event always fires twice and returns toPage which holds either url (string) or jQuery object of target page. However, on first run it returns a jQuery object twice. When it fires for the first time, you have to make sure that toPage is an object and absUrl is undefined, in addition to your condition.

$(document).on("pagecontainerbeforechange", function(e, data) {
  if(typeof data.toPage == "object" && typeof data.absUrl == "undefined" && !condition) {
    data.toPage = $("#login"); /* change to page with ID "login" */
  }
});

演示

Demo

---

解决方案2:

另一种解决方案是侦听mobileinit事件以检查用户是否登录，然后更改目标页面的位置以在DOM中创建第一"页面.

---

Solution 2:

Another solution is to listen to mobileinit event to check whether user is logged in or not, and then change the position of target page to make "first" page in DOM.

$(document).on("mobileinit", function (e, data) {
    $.mobile.autoInitializePage = false; /* optional - stop auto-initalization */
    if (!condition) {
        $(function () {
            $("#login").prependTo("body"); /* make "login" page first child of "pagecontainer" (body by default) */
            $.mobile.initializePage(); /* optional - manual initialization */
        });
    }
});

如果需要，可以延迟框架的自动初始化，但是jQuery函数.prependTo应该包装在$(function() {});或.ready()中，因为mobileinit在jQuery库发布之前会触发准备好了.

You can delay auto-initialization of the framework if you want, however, jQuery functions .prependTo should be wrapped in $(function() {}); or .ready() because mobileinit fires before jQuery library is ready.

演示

Demo

这篇关于jQuery Mobile根据条件更改页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！