登录页面的实现，有两种方式。  一种是直接在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中的内容为： ~~~ <!--<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("网络连接失败！"); }) } ~~~ 显示效果：