Jquery mobile入门及开发常用技术

来源：互联网发布：淘宝店源珍果醋编辑：程序博客网时间：2024/06/14 08:39

前段时间用到了这个东西，简单看看，官方文档看了看基本就会用了，常用的部分拿出来，方便自己用，希望也能对别人有帮助。

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，所以建议使用的时候所有的都要使用通一个版本，因为这个我花了半天的时间想不出为什么调不出应该有的效果....

新手上路，谢绝吐槽，如有错误，谢谢指正

0 0

Jquery mobile入门及开发常用技术

前段时间用到了这个东西，简单看看，官方文档看了看基本就会用了，常用的部分拿出来，方便自己用，希望也能对别人有帮助。

1.使用前需要导入js和css

2.页面的框架格式：

3.对话框

4.列表

5.头部工具栏和尾部工具栏

6.按钮组：

7.可折叠内容（看后面的demo效果就行了）

8.form表单(下面会有例子，直接看例子就明白了)9.触发事件：

8.form表单(下面会有例子，直接看例子就明白了)
9.触发事件：