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

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

   一种是直接在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></label><br /> 
                    <label> 
                        自动登录</label><input id="autologin" type="checkbox" name="autologin" class="toggle"><label 
                            for="autologin" data-on="On" data-off="Off"><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> 

login.html中的内容为：

<!--<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></label><br /> 
                    <label> 
                        自动登录</label><input id="autologin" type="checkbox" name="autologin" class="toggle"><label 
                            for="autologin" data-on="是" data-off="否"><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("网络连接失败！"); }) 
}

显示效果：