JQuery Mobile登录界面

510120804

浏览: 30360 次
性别:
来自: 襄阳

最近访客更多访客>>

SoftHt

Tys53628

jiabei119

lordlorry

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前段时间看有人做的JQuery Mobile的界面很不错，认为移动的应用也会像桌面应用一样，慢慢的都走向WEB方式.

先贴出代码吧：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LogIn</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
//输入事件
$("input[id]").bind("focus",function () {
if($(this).attr("id")=='username'||$(this).attr("id")=='password')
$(this).attr("value","");
});
//提交
$("#submit").bind("click", function() {
if (valid()) {
alert("获取的用户名为："+$("#username").attr("value")+" 密码为："+$("#password").attr("value"));
var name = $("#username").attr("value");
var passwd = $("#password").attr("value");
$.ajax({
type: "POST",
url: "http://localhost/jqm/check.xml",
data: $("form#loginform").serialize(),
success: function(msg){
$(msg).find('authUserResponse').each( function (i) {
var login = $(this).children('return').text();
alert(login);
})
/*if(msg=='success'){
$.mobile.changePage("content/first.html","slidedown", true, true);
}else{
$.mobile.changePage("content/loginfalse.html","slidedown", true, true);
}
*/
}
});
}
});
});
//输入信息验证
function valid(){
if($("#username").attr("value")==''||$("#password").attr("value")=='')
{
alert('用户名或密码不能为空！');
//$.mobile.changePage("content/loginfalse.html","slidedown", true, true);
return false;
}
return true;
};
</script>
<style type="text/css">
p {
font-size: 1.5em;
font-weight: bold;
}
#submit{
float:center; margin:10px;
}
/*#toregist{
float:left; margin:10px;
}*/
</style>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-theme="b" ><h1>XXXXXX移动平台</h1></header>
<div data-role="content" class="content">
<p style="backg"><font color="#2EB1E8" >登录</font></p>
<form method="post" id="loginform">
<input type="text" name="username" id="username" value="用户名"/><br>
<input type="password" name="password" id="password" value="密码输入提示"/>
<fieldset data-role="controlgroup" >
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">保持登录状态</label>
</fieldset>
<a data-role="button" id="submit" data-theme="b">登录</a>
</form>
</div>
</section>
</body>