使用jqMobi開發app基礎：登錄頁面的實現 · 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></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> ~~~ login.html中的內容為： ~~~  <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>  ~~~ 這兩種寫法都可以，但第二種寫法，顯然更利于多個人同時開發。主要注意的是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("網絡連接失敗！"); }) } ~~~ 顯示效果： ![](https://box.kancloud.cn/2016-02-23_56cbb4b8c65b0.jpg) ? ? ? ?