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