使用jqMobi开发app基础：登录页面的实现

2022-02-17 18:12:11

登录页面的实现，有两种方式。

一种是直接在panel中填写代码：

例如：

 <div id="login" class="panel" data-defer="login.html" modal="true" > 
    <input type="hidden"  id="islonin" value="false" />          
                <div class="formGroupHead">
                    用户名</div>
                <input type=‘text‘ id="txtusername" class=‘af-ui-forms‘ placeholder="Enter your user" style="background-color:Black">
                <div class="formGroupHead">
                    密码</div>
                <input type=‘password‘ id="txtpassword" class=‘af-ui-forms‘ placeholder="Enter your pwd" style="background-color:Black"><br />
                <div>
                    <label>
                        记住密码</label><input id="recordPwd" type="checkbox" name="recordPwd"  class="toggle" checked="checked"><label
                            for="recordPwd" data-on="是" data-off="否"><span></span></label><br />
                    <label>
                        自动登录</label><input id="autologin" type="checkbox" name="autologin" class="toggle"><label
                            for="autologin" data-on="On" data-off="Off"><span></span></label>
                </div>
                <br />
       <a class="button block" id="btnLogin">登录</a>  
</div>

另一种是一种是使用panel的data-defer属性，把相关的代码其他的页面

例如：

panel的写法

  <div id="login" title="办公平台" class="panel" data-defer="login.html" modal="true" >                
  </div>

<!--<div title="办公平台"   > -->
    <input type="hidden"  id="islonin" value="false" />          
                <div class="formGroupHead">
                    用户名</div>
                <input type=‘text‘ id="txtusername" class=‘af-ui-forms‘ placeholder="Enter your user" style="background-color:Black">
                <div class="formGroupHead">
                    密码</div>
                <input type=‘password‘ id="txtpassword" class=‘af-ui-forms‘ placeholder="Enter your pwd" style="background-color:Black"><br />
                <div>
                    <label>
                        记住密码</label><input id="recordPwd" type="checkbox" name="recordPwd"  class="toggle" checked="checked"><label
                            for="recordPwd" data-on="是" data-off="否"><span></span></label><br />
                    <label>
                        自动登录</label><input id="autologin" type="checkbox" name="autologin" class="toggle"><label
                            for="autologin" data-on="是" data-off="否"><span></span></label>
                </div>
                <br />
       <a class="button block" id="btnLogin">登录</a>     
<!--</div>-->

这两种写法都可以，但第二种写法，显然更利于多个人同时开发。主要注意的是panel里边不能再包含panel，否则就会显示空白，也就是什么都显示不出来，这个限制似乎是

jqMobi的限制。另外第二种写法里边的内容有一定限制，内容似乎不能再包含html,head等标签，测试得到的结果，没有找到相关文档。

代码解释：

1 id="login" 给panel命名，在以便于使用。

2 modal="true"表示是弹出

3 class="panel"表示此div是panel

调用显示： $.ui.showModal("#login", "fade");

完整的脚本：

LocalMobelInfo = function () {
};
LocalMobelInfo.prototype.putStringData = function (key, value) {
    localStorage.setItem(key, value + "");
};
LocalMobelInfo.prototype.putBooleanData = function (key, value) {
    localStorage.setItem(key, value + "");
};
LocalMobelInfo.prototype.putIntData = function (key, value) {
    localStorage.setItem(key, value + "");
};
LocalMobelInfo.prototype.updateUser = function (name, password) {
    localStorage.setItem("XPP_USERNAME", name + "");
    localStorage.setItem("XPP_PASSWORD", password + "");
}
LocalMobelInfo.prototype.getBooleanData = function (key) {
    return "true" == localStorage.getItem(key) ? true : false;
};
LocalMobelInfo.prototype.getStringData = function (key) {
    return localStorage.getItem(key);
};
LocalMobelInfo.prototype.getIntData = function (key) {
    if (!isNullOrUndefined(localStorage.getItem(key))) {
        return parseInt(localStorage.getItem(key));
    } else {
        return 0;
    }
};
LocalMobelInfo.prototype.getUserName = function () {
    return localStorage.getItem("XPP_USERNAME");
}
LocalMobelInfo.prototype.getUserPassword = function () {
    return localStorage.getItem("XPP_PASSWORD");
}
var dthMobileOA = null;
var serviceUrl = "http://localhost:57843/Eas.WebsiteUpdate/";  
function init() {
    dthMobileOA = new LocalMobelInfo();
    var _username = dthMobileOA.getUserName();
    var _password = dthMobileOA.getUserPassword();
    $("#txtusername").val(_username);
    $("#txtpassword").val(_password);
    if (_password) {
        $("#recordPwd").prop("checked", true);
        // 自动登录  
        if (dthMobileOA.getBooleanData("autologin")) {
            $("#autologin").prop("checked", true);
            loginFun();
        } 
    }

}
$.ui.ready(function () {
    init();
    $("#btnLogin").bind("click", loginFun);
    $("#logoutSure").bind("click", logoutSureFun);
    $("#logoutCancel").bind("click", logoutCancelFun);
    $.ui.backButtonText = "返回";

});
function loginFun() {
    var para = {
        j_username: $("#txtusername").val(),
        j_password: $("#txtpassword").val()
    };
    var url = serviceUrl + "UIPhoneAjax/MobLogin.ashx";
    $.ui.showMask("登录中……");
    $.post(url, para, function (res) {
        if (res.IsSuccess) {
            $.ui.hideMask();
            $("#loginlink").hide();
            $("#logoutlink").show();      
            $.ui.hideModal();
            $("#islonin").val(true);
            $("#home").show();
            var isRecondPwd = $("#recordPwd").prop("checked");
            if (isRecondPwd) {
                dthMobileOA.updateUser($("#txtusername").val(), $("#txtpassword").val());
            } else {
                dthMobileOA.updateUser($("#txtusername").val(), null);
            }
            var isoutologin = $("#autologin").prop("checked");
            dthMobileOA.putBooleanData("autologin", isoutologin);          

        } else {
            $.ui.hideMask();
            $("#afui").popup(res.Msg);
        }
    }, "json", function () { $.ui.hideMask(); $("#afui").popup("网络连接失败！"); })
}

显示效果：

使用jqMobi开发app基础：登录页面的实现

码农公寓

相关文章