当前位置: 首页 > 知识库问答 >
问题:

以编程方式更改jQuery Mobile显示的第一页

翁昊乾
2023-03-14

我的目标是根据用户是否登录显示不同的第一页。登录检查使用同步Ajax调用进行,其结果决定是显示登录对话框还是显示第一个用户页面。

执行此操作的正常方法是设置$.mobile.auto初始化=false,然后以编程方式初始化,如本问题的答案中所述。由于某种原因,这不起作用,而是每次都会加载另一个页面。

我决定放弃这种方式,尝试不同的方案。我现在使用一个占位符,空的启动页面,只要登录检查需要,就应该显示该页面。登录检查后,它应该会自动更改。这是通过调用一个函数来完成的,该函数在引入此启动页面的page echange事件上执行身份验证所需的ajax调用。该函数也负责更改为结果页面。

诀窍是它并没有完全做到这一点...相反,它只在很短的时间内显示正确的页面,然后更改回占位符。正如动态页面教程中所述,在page echange中调用预防默认并没有阻止这一点。添加计时器修复了此问题,让我认为当page eshoo被解雇时占位符还没有完全完成(根据页面事件中的此页面),或者初始页面加载的一些副作用仍然存在。

我真的不知道如何解决这个看似琐碎却又繁重的问题。是什么原因导致此额外更改返回到初始页?此外,如果我拦截初始页面加载的方法是错误的,那么正确的方法是什么?

我使用jQuery Mobile 1.4.0和jQuery 1.10.2(之前是1.8.3)。

编辑:下面是我在这里发布问题之前最后一次尝试的代码。它不起作用:preventDefault不阻止转换到占位符页面。

$(document).on("pagebeforechange", function(e, data) {
    if (typeof(data.options.fromPage) === "undefined" && data.toPage[0].id === "startup") {
        e.preventDefault();
        initLogin();
    }
});

function initLogin() {
    // ... Login logic
    if (!loggedIn) // Pseudo
        $('body').pagecontainer("change", "#login", {});
}

共有2个答案

阎坚成
2023-03-14

我遇到了与@RubenVereecken描述的问题相同的问题,也就是说,一旦第二页的cange完成,就返回到第一页。事实上,他提出了这样一个问题:“是什么导致了这一额外的更改回到了最初的页面?”而且还没有回复。不幸的是,我不知道原因,因为我还没有找到页面事件顺序在JQM-1.4.2中的工作方式,但幸运的是,@Omar建议的解决方法对我有效。

这不是完全相同的代码,但总的想法在防止返回初始页面时有效。我的代码如下:

$(document).on("pagebeforechange", function(event, data) {
if ( typeof (data.toPage) == "string") {
       if (data.toPage.indexOf("#") == -1 && typeof (data.options.fromPage[0].id) == string") {
          event.preventDefault();         
       }      
}});

条件<代码>数据。toPage。indexOf(“#”)==-1是因为我检查了所有不希望返回到初始页的操作都是在属性“”时发生的。toPage”设置为类似于<代码>[http://localhost/.../index.html]

龙浩博
2023-03-14
匿名用户

如果您使用的是多页模型,则可以阻止在更改前的页面上显示任何页面。此事件为每个页面激发两次,一次为即将隐藏的页面,一次为即将显示的页面;然而,本阶段没有任何变化。

它从两个页面收集数据,并将其传递给更改页面功能。收集的数据表示为第二个参数对象,一旦触发事件,即可检索该对象。

此对象需要两个属性,。toPage。选项。来自第页。根据这些属性值,您可以决定是显示第一页还是立即移动到另一页。

var logged = false; /* for demo */

$(document).on("pagebeforechange", function (e, data) {

    if (!logged && data.toPage[0].id == "homePage" && typeof data.options.fromPage == "undefined") {
        /* immediately show login dialig */
        $.mobile.pageContainer.pagecontainer("change", "#loginDialog", {
            transition: "flip"
        });

        e.preventDefault(); /* this will stop showing first page */
    }
});

>

  • <代码>数据。toPage[0]。id值是DOM id中的第一页。

    <代码>数据。选项。fromPage应该是未定义的,因为它不应该从同一webapp中的另一个页面重定向。

    演示

  •  类似资料:
    • 我使用下面的hack以编程方式更改homeAsupIndicator。 但这在大多数新手机(HTC One、Galaxy S3等)上都不起作用。是否有一种方法可以跨设备统一更改。我只需要在主屏幕上更改它。其他屏幕将具有默认屏幕。因此无法使用样式。xml

    • 这里有个简单的问题。我有一个UIButton,currencySelector,我想通过编程更改文本。以下是我所拥有的: Xcode给了我一个错误“预期声明”。我做错了什么?我该如何更改按钮的文本?

    • 我已经读过一些关于颜色的线程,但所有这些线程都必须通过style.xml进行设置。 现在我用这个来确定颜色。 是否可以不使用XML,例如使用代码来更改SwitchCompat/Checkbox的颜色?

    • 问题内容: 如何使用javascript 更改标签的属性? 起初,我有一个默认的src,它是“ ../template/edit.png”,我想用onclick来更改“ ../template/save.png”。 更新:这是我的HTML onclick: 和我的JS 我尝试将其插入edit()内,它可以工作,但需要单击两次图像 问题答案: 现在还可以

    • 如何使用JavaScript更改标记的属性? 起初,我有一个默认的src是“../template/edit.png”,我想用“../template/save.png”onclick更改它。 更新:这里是我的html onclick: 和我的JS 我试着在edit()中插入它,它可以工作,但需要单击图像两次