Jquery mobile入门及开发常用技术
前段时间用到了这个东西，简单看看，官方文档看了看基本就会用了，常用的部分拿出来，方便自己用，希望也能对别人有帮助。
JQM支持高版本的安卓和IOS，兼容性很好。
1.使用前需要导入js和css
如下：（也可以下载jquery.mobile-1.3.2.zip放到服务器中然后根据路径导入）
<!--自动扩展-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
2.页面的框架格式：
<div data-role="page">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
DEMO
</div>
<div data-role="footer">
<h4>结尾</h4>
</div>
</div>
3.对话框
<a> href="dialog.html" data-rel="dialog">打开对话框</a>
可以用来弹出一个对话框data-rel="dialog"此属性用来确定为对话框，
href="dialog.html" 要弹出的内容
4.列表
<ul data-role="listview"> <li><a href="#nav1">1</a></li> <li><a href="#nav1">2</a></li> <li><a href="#nav1">3</a></li> <li><a href="#nav1">4</a></li> <li><a href="#nav1">5</a></li> </ul>
加分隔符的列表：
<ul data-role="listview" data-dividertheme="d"> <li><a href="#nav1">1</a></li> <li><a href="#nav1">2</a></li> <li><a href="#nav1">3</a></li> <li data-role="list-divider">分隔符</li> <li><a href="#nav1">4</a></li> <li><a href="#nav1">5</a></li> </ul>
5.头部工具栏和尾部工具栏
头部工具栏：
<div data-role="header" data-position="inline" data-backbtn="false"><h1>头部工具栏</h1><a href="index.html" data-icon="gear" class="ui-btn-right">Options</a></div>
注：给头部工具栏加data-backbtn="false"用来防止它自动生成回退的按钮。
class=ui-btn-right可以让图标在后端对齐
尾部工具栏：
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">del</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
要想把几个按钮打包成一个按钮组,
data-role="controlgroup"和data-type="horizontal"属性如下：
<div data-role="controlgroup" data-type="horizontal">...
6.按钮组：
<div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
data-role="controlgroup"属性 默认为垂直的，如果想让他水平可以使用：data-type="horizontal"
7.可折叠内容（看后面的demo效果就行了）
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>1</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
<div data-role="collapsible" >
<h3>2</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div></div></div>
8.form表单(下面会有例子，直接看例子就明白了)
9.触发事件：
swipeleft
在左边方向移动时触发该事件.
swiperight
在右边方向移动时触发该事件..
tap
在快速完整的一次触摸后触发该事件.
taphold
在按住不放后触发该事件(接近一秒钟的时间).
swipe
在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).
下面是我用过的例子：
demo1.
<body> <div data-role="page"> <div data-role="header"> <h1> 公司介绍 </h1> </div> <div data-role="content"> <ol data-role="listview" data-inset="true"> <li> <a href="bainian1.1_1.html" rel="external">1</a> </li> <li> <a href="bainian1.1_2.html" rel="external">2/a> </li> <li> <a href="bainian1.1_3.html" rel="external">3</a> </li> <li> <a href="bainian1.1_4.html" rel="external">3</a> </li> </ol> </div> <div data-role="footer"> <h4></h4> </div> </div> </body>
<!--考虑到公司在用这东西，所以部分地方做了改动-->效果图：
demo2:图片切换效果：滑动事件在手机上较为明显，电脑上拖动鼠标不是很方便
<style>
li {
margin-right: 1px;
float: left;
text-decoration: none;
list-style-type: none;
}
ul {
position: relative;
bottom: 60px;
width: 120px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
var imgs = [ "pt1", "pt2", "pt3", "pt4", "pt5", "pt6" ];
var num = 0;
function changeWhite() {
$("font[id^=pt]").attr("color", "White");
}
$(function() {
$("#myImg").bind("swipeleft", function() {
if (num >= imgs.length - 1) {
num = 0;
} else {
num++;
}
changeWhite();
$("#myImg").attr("src", "images/" + imgs[num] + ".jpg");
$("#" + imgs[num]).attr("color", "black");
});
$("#myImg").bind("swiperight", function() {
if (num <= 0) {
num = 5;
} else {
num--;
}
changeWhite();
$("#myImg").attr("src", "images/" + imgs[num] + ".jpg");
$("#" + imgs[num]).attr("color", "black");
});
});
</script>
</head>
<body onload="changeInterval();">
<div data-role="page">
<div data-role="header">
<h1>
百年文化
</h1>
</div>
<div data-role="content" style="text-align: center;">
<div style="text-align: center;">
<img id="myImg" src="images/pt1.jpg"
style="width: 250px;; height: 300px;" />
<ul>
<li>
<font size="8px;" id="pt1" color="black">·</font>
</li>
<li>
<font size="8px;" id="pt2" color="White">·</font>
</li>
<li>
<font size="8px;" id="pt3" color="White">·</font>
</li>
<li>
<font size="8px;" id="pt4" color="White">·</font>
</li>
<li>
<font size="8px;" id="pt5" color="White">·</font>
</li>
<li>
<font size="8px;" id="pt6" color="White">·</font>
</li>
</ul>
</div>
</div>
<div data-role="footer">
<h4></h4>
</div>
</div>
</body>由于当时让下午做出来，我花了不长点时间做成这样，可能会有更好的方案
效果图：
demo3.button的例子：
<div data-role="page"> <div data-role="header"> <h1> XXXX </h1> </div> <div data-role="content"> <div> <br /> <br /> <a href="userLogin.jsp?openid=<%=openid%>" data-role="button" rel="external">A种登陆</a> <a href="othersLogin.jsp?openid=<%=openid%>" data-role="button" data-theme="c" rel="external">B种登陆</a> <br /> <br /> </div> </div> <div data-role="footer"> <h4></h4> </div> </div>在JQM中，超链接默认是AJAX提交，如果想案件提交需要加 rel="external"试一试就知道了。
效果图：
demo4.表单：
<div data-role="page">
<div data-role="header">
<h1>
XXXX
</h1>
</div>
<div data-role="content">
<div>
<%
String msg = (String) request.getAttribute("msg");
if (msg != null) {
%>
<font color="red"><%=msg%></font>
<%
}
%>
<form action="otherlogin!checkOtherLogin.action" method="post"
data-ajax="false">
<input type="hidden" name="openid"
value="<%=request.getParameter("openid")%>">
<label for="username"></label>
<input type="text" id="username" placeholder="姓名"
name="member.membername" />
<span id="usernamespan"></span>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend></legend>
<input type="radio" name="member.sex" id="radio-choice-1"
value="0" checked="checked" />
<label for="radio-choice-1">
男
</label>
<input type="radio" name="member.sex" id="radio-choice-2"
value="1" />
<label for="radio-choice-2">
女
</label>
<input type="radio" name="member.sex" id="radio-choice-3"
value="2" />
<label for="radio-choice-3">
不详
</label>
</fieldset>
<div>
<label for="appDate"></label>
<input type="text" id="appDate" placeholder="出生日期"
name="member.birthday" />
</div>
<select id="select-choice-1" data-native-menu="false"
name="member.idtype">
<option value="0">
身份证
</option>
<option value="1">
护照
</option>
<option value="2">
军官证
</option>
</select>
<input type="text" name="member.idnumber" id="idCode"
placeholder="证书号码" />
<input type="button" value="注册" onclick="checkMass();" />
</form>
</div>
</div>
<div data-role="footer">
<h4></h4>
</div>
</div>
效果图：
demo5.
<div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="true"> <h3>大连</h3> <p> <table border="1"> <tr><th>机构名称</th><th>地址</th><th>联系电话</th></tr> <tr><td>大连</td><td>大连市</td><td>0411-398</td></tr> <tr><td>大连</td><td>大连市</td><td>0411-392</td></tr> <tr><td>大连瓦房</td><td>大连市瓦房店共</td><td>0411－3919</td></tr> </table> </p> </div> <div/>
最好一个问题：关于JQM的主题：官网给了几种颜色的主题，但是如果你想像我一样使用自己的主题，需要到JQM官网自己调节颜色然后根据自己的需要选择主题。然后导入js和css。你需要将自己做的主题覆盖默认的，最好放到JQM默认的下面。
我用的是jquery.mobile-1.3.2，所以建议使用的时候所有的都要使用通一个版本，因为这个我花了半天的时间想不出为什么调不出应该有的效果....
新手上路，谢绝吐槽，如有错误，谢谢指正