jquery mobile 使用，与处理兼容
最近在把手机端的web版改成使用jquery mobile来实现，来增强用户体检和交互性
jquery mobile 的具体内容请参考http://jquerymobile.com/
开发方式，使用php+jquery mobile
程序示例如下：
<!doctype html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="format-detection" content="telephone=no">3<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" href="jquerymobile/theme.min.css">
<script type="text/javascript" src="jquerymobile/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
function check(id){
var username = id == 1 ? $("input[name='username']").val() : $("input[name='username2']").val();
var password = id == 1 ? $("input[name='password']").val() : $("input[name='password2']").val();
var usertype = id == 1 ? $("input[name='usertype']").val() : $("input[name='usertype2']").val();
if(username == '' || username == undefined){
$("#popup").html('<p>用户名不能为空！</p>');
return;
}
if(password == '' || password == undefined){
$("#popup").html('<p>用户密码不能为空！</p>');
return;
}
$.getJSON('../login.php',{username:username,password:password,type:usertype},
function(data){
if(jQuery.isPlainObject(data)){
var redirect_url = data.redirect_url ? data.redirect_url : '';
var message = data.message ? data.message : '';
if(redirect_url){
location.href = redirect_url;
}else if(message){
$("#popup").html('<p>'+message+'</p>');
}
}else{
$("#popup").html('<p>'+data+'</p>');
}
}
);
}
</script>
<style type="text/css">
a,input{
margin:0px;
padding:0px;
}
input{
min-height:60px;
height:50px;
max-height:70px;
font-size:20px;
font-family:微软雅黑;
}
.span{
height:10px;
width:100%;
}
.submit-popup{
line-height:55px;
height:55px;
max-height:60px;
font-family:微软雅黑;
font-size: 22px;
}
.clear{
margin:0px;
padding:0px;
}
.center{
text-align:center;
}
.right_bg {
position:absolute;
top:90px;
right:15px;
}
.sytk{
color:#c8bd09;
font-family:微软雅黑;
font-size:18px;
}
</style>
<body>
<div data-role="page">
<div data-role="panel" id="panel" data-position="right" data-display="overlay">
<form>
<div data-role="fieldcontain">
<input type="hidden" name="usertype2" value="1">
<input type="text" name="username2" placeholder="用户名" autofocus="autofocus">
<div class="span"></div>
<input type="text" name="password2" placeholder="密 码" autofocus="autofocus">
<p id="message"><img src="images/dj.png">我已阅读并同意<a class="sytk">使用条款</a></p>
<div class="span"></div>
<a href="#popup" data-rel="popup" onclick="check(2);" data-role="button" class="ui-btn ui-corner-all ui-shadow submit-popup clear" data-theme="ui-btn-b">登 录</a>
</div>
</form>
</div>
<div data-role="header">
<p class="clear"><img src="images/logo_wifi.png"></p>
</div>
<div data-role="content" class="ui-content">
<div class="ui-grid-a">
<div class="ui-block-a" id="title"><h2>无线登录</h2></div>
<div class="ui-block-b"><a href="#panel"><img class="right_bg" src="images/wsfk.png" /></a></div>
</div>
<form>
<div data-role="fieldcontain">
<input type="hidden" name="usertype" value="2">
<input type="text" name="username" placeholder="用户名" autofocus="autofocus">
<div class="span"></div>
<input type="text" name="password" placeholder="密 码" autofocus="autofocus">
<div class="span"></div>
<a href="#popup" data-rel="popup" onclick="check(1);" data-role="button" class="ui-btn ui-corner-all ui-shadow submit-popup clear" data-theme="ui-btn-b">登 录</a>
</div>
</form>
<div data-role="popup" id="popup"></div>
</div>
</div>
</body>
</html>
这里是一段关于登录页面写法：
注意的地方：
1. 锚点的使用
2.popup的使用
3.布局的使用
4.兼容
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
来处理 android和IOS的兼容性
