导航Jquery Mobile + PhoneGap

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航Jquery Mobile + PhoneGap相关的知识,希望对你有一定的参考价值。

我在理解如何使用Jquery移动导航系统时遇到问题。据我所知,Jquery Mobile根据这个link使用ajax。我的问题是:1。我在Phonegap中构建了2个html文件作为客户端,通过Json获取其动态内容,其中一个是login.html,使用登录表单通过jquery验证插件进行验证,成功后重定向到通过$ mobile.changepage()方法页面mainpage.html,如下所示:

$("#LoginForm").validate({
    rules: {
        UserName:
            {
                required: true,
                digits: true,
                rangelength: [4, 4]
            },
        Password: {
            required: true,
            digits: true,
            rangelength: [4, 4]
        }
    },
    messages: {
        UserName: {
            required: "שגיאה!, אנא הכנס שם משתמש",
            digits: "שגיאה!, אנא הכנס ספרות בלבד",
            rangelength: "שגיאה!, השדה חייב להיות 4 תווים בדיוק"
        },
        Password: {
            required: "שגיאה!, אנא הכנס סיסמה",
            digits: "שגיאה!, אנא הכנס ספרות בלבד",
            rangelength: "שגיאה!, השדה חייב להיות 4 תווים בדיוק"
        }
    },
    errorClass: 'input-validation-error',
    submitHandler: function (form) {
        /* Send the data using post */
        $.post("/Account/postLogin", $("#LoginForm").serialize(), function (data) {
            switch (data) {
                case "RESULT_SUCCESS":
                    $.mobile.changePage("/Home/NewTickets", { transition: "slide" });
                    break;
                case "UserNotFound":
                    alert("שם משתמש לא נמצא");  //phonegap error dialog
                    break;
                case "NonCorrectPassword":
                    alert("סיסמה אינה נכונה");  //phonegap error dialog
                    break;
            }
        })
        .fail(function () {
            alert("שגיאת שרת אינה יודעה, נסה שנית במועד מאוחר יותר");   //phonegap error dialog
        })
    }
});

在我的mainpage.html中我有一个注销按钮,当我按下它时会执行以下方法:

$('#logout').on('click', function () {
    $.get("/Account/Logout")
    .done(function () {
        $.mobile.changePage("/Account/Login", { transition: "slide", reverse: true });
    })
    .fail(function () {
        alert("שגיאה!, לא היה ניתן להתנתק מן המערכת");
    });
});

在iphone上测试它确实返回到login.html,但是当我再次按下“提交”按钮时它会给我一条错误信息,我猜这与已经在DOM中的2页有关,我该怎么办修理它?

2.根据这个link,$ mobile.Navigate()更新的事实,以及我应该使用什么方法,以及一个例子,方法$ mobile.changepage()与$ mobile.Navigate()之间的主要差异是什么?他们之间的差异将非常感激。

答案

这有点混乱,但我会采取刺

  1. JQM使用单个基页,然后通过AJAX加载其他所有内容。你得到了那么多。你的第二页是否包含data-role="page"块?
  2. 我还没有好运JQM 1.3或更高版本。我会坚持使用$.mobile.changepage(),直到他们解决它。如果有的话,它不会很快被删除。

以上是关于导航Jquery Mobile + PhoneGap的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile 导航栏

jQuery Mobile 导航栏

jQuery Mobile 面板导航冻结/挂起

jQuery Mobile 重用标题和导航

jQuery Mobile 选项卡导航延迟

如何使用 OnClick 事件设置 Jquery Mobile 导航