1.什么时候使用JQuery mobile 呢？
所有功能性比较强的网站，比如订酒店（如：携程）、租车、订票等这样需要有本地APP 界面的网站。就需要使用JQuery mobile
如图：
2.JQueryMobile官网下载——》解压后拷贝images文件件、jquery.mobile-1.4.5.min.js、jquery.mobile-1.4.5.min.css——》放到自己创建的项目底下——》创建页面——》引入视口（只要是做手机页面，第一步想到的就是添加视口）——》引入拷贝来的CSS文件引入Query文件》——》引入拷贝来的js文件（注意：JQuery文件一定要先引入）——》搭建骨架
具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--添加视口--> <meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport"> <title>JQueryMobile的写法</title> <!--引入相应的JQueryMobile 文件以及JQuery文件,注意CSS文件和js文件的引入方式是不同的--> <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <!--一定要先引入JQuery文件，再引入JQuery Mobile的js文件--> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script> </head> <body> <!--页面，注意data-开头的均为JQuery Mobile自带的属性--> <div data-role="page"> <!--头部--> <div data-role="header"> <h1>这是JQuery Mobile的骨架</h1> </div> <!--内容--> <div data-role="content"> 这里可以任何内容 </div> <!--尾部--> <div data-role="footer" data-position="fixed"> <h4>这里是页脚</h4> </div> </div> </body> </html>
运行效果：
审查元素后发现：
3.多页面跳转：
data-transition 的值有：slide ， turn，pop ，flip等
可以参考JQuery Mobile中文API
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--添加视口--> <meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport"> <title>JQueryMobile的写法</title> <!--引入相应的JQueryMobile 文件以及JQuery文件,注意CSS文件和js文件的引入方式是不同的--> <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <!--一定要先引入JQuery文件，再引入JQuery Mobile的js文件--> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script> </head> <body> <!--页面，注意data-开头的均为JQuery Mobile自带的属性--> <div data-role="page" id="page1"> page1 <!--头部--> <div data-role="header"> <h1>这是JQuery Mobile的骨架</h1> </div> <!--内容--> <div data-role="content"> 这里可以任何内容 page1 <!--data-role="button"可以使得a标签变成button, data-transition="pop"控制页面2弹出的方式--> <a href="#page2" data-role="button" data-transition="pop">跳转到page2</a> <!--锚点--> </div> <!--尾部--> <div data-role="footer" data-position="fixed"> <h4>这里是页脚</h4> </div> </div> <!--下面这部分是页面2，页面1和页面2可以写在同一个HTML里面--> <div data-role="page" id="page2">page2 <!--头部--> <div data-role="header"> <h1>这是JQuery Mobile的骨架</h1> </div> <!--内容--> <div data-role="content"> 这里可以任何内容 page2 </div> <!--尾部--> <div data-role="footer" data-position="fixed"> <h4>这里是页脚</h4> </div> </div> </body> </html>
对比图：
4.页眉：
<div data-role="header"> <!--这里面按照a h1的格式来写，a标签就会变成按钮。data-icon="arrow-d" 用来设置按钮的背景图片--> <a href="#" data-icon="arrow-d" >按钮</a> <h1>页眉</h1> <a href="#" data-icon="camera">按钮</a> <!--选项卡--> <div class="xuanxiangka"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">选项卡</a> <a href="#" data-role="button">选项卡</a> <a href="#" data-role="button">选项卡</a> <a href="#" data-role="button">选项卡</a> </div> </div> </div>运行效果：
修改选项卡的样式，全屏显示：
<style type="text/css"> .xuanxiangka{ text-align: center; /*设置选项卡居中*/ } .ui-controlgroup-controls { /*这个类是审查元素后发现JQueryMobile给添加上的类*/ width: 100% !important; /*!important的作用是将权重提到最高*/ margin-top: 5px; } .运行结果：.ui-controlgroup-controls a{width: 25% !important; /*给4个选项的宽度分别给到25%*/ box-sizing: border-box; }</style>
5.页脚：
<div data-role="footer" data-position="fixed"> <!--<h4>这里是页脚</h4>--> <div data-role="controlgroup" data-type="horizontal"> <!--用data-icopos来设置ico图片的位置--> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> </div> </div>运行效果：
6.列表试图：
1）通过data-role="listview"转换成列表
<!--内容--> <div data-role="content"> <ul data-role="listview" data-inset="true"> <!--data-inset="true"表示列表不左右撑满--> <li>灿烂千阳</li> <li>追风筝的人</li> <li>群山回唱</li> <li>安徒生童话</li> <li>黑骏马</li> </ul> </div>
页面的完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--添加视口--> <meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport"> <title>JQueryMobile的写法</title> <!--引入相应的JQueryMobile 文件以及JQuery文件,注意CSS文件和js文件的引入方式是不同的--> <link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <!--一定要先引入JQuery文件，再引入JQuery Mobile的js文件--> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script> <style type="text/css"> .xuanxiangka{ text-align: center; /*设置选项卡居中*/ } .ui-controlgroup-controls { /*这个类是审查元素后发现JQueryMobile给添加上的类*/ width: 100% !important; /*!important的作用是将权重提到最高*/ margin-top: 5px; } .ui-controlgroup-controls a{ width: 25% !important; /*给4个选项的宽度分别给到25%*/ box-sizing: border-box; } </style> </head> <body> <!--页面，注意data-开头的均为JQuery Mobile自带的属性--> <div data-role="page" id="page1"> <!--头部--> <div data-role="header"> <!--这里面按照a h1的格式来写，a标签就会变成按钮。data-icon="arrow-d" 用来设置按钮的背景图片--> <!--<a href="#" data-icon="arrow-d" >按钮</a>--> <!--<h1>页眉</h1>--> <!--<a href="#" data-icon="camera">按钮</a>--> <!--选项卡--> <div class="xuanxiangka"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">选项卡</a> <a href="#" data-role="button">选项卡</a> <a href="#" data-role="button">选项卡</a> <a href="#" data-role="button">选项卡</a> </div> </div> </div> <!--内容--> <div data-role="content"> <ul data-role="listview" data-inset="true"> <!--data-inset="true"表示列表不左右撑满--> <li>灿烂千阳</li> <li>追风筝的人</li> <li>群山回唱</li> <li>安徒生童话</li> <li>黑骏马</li> </ul> </div> <!--尾部--> <div data-role="footer" data-position="fixed"> <!--<h4>这里是页脚</h4>--> <div data-role="controlgroup" data-type="horizontal"> <!--用data-icopos来设置ico图片的位置--> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> <a href="#" data-role="button" data-icon="camera" data-icopos="top">选项卡</a> </div> </div> </div> </body> </html>
2）列表分类以及过滤：
<div data-role="content"> <!--data-filter="true"用来设置过滤,显示出搜索框，并且是真的可以检索的--> <ul data-role="listview" data-inset="true" data-filter="true"> <!--data-inset="true"表示列表不左右撑满--> <li data-role="list-divider">同一作者</li> <li> <!--<img src="images/qianyang.jpg">--> <!--<h3>灿烂千阳</h3>--> <!--<p></p>--> 灿烂千阳 </li> <li>追风筝的人</li> <li>群山回唱</li> <!--用ata-role="list-divider"来做分割--> <li data-role="list-divider">双语阅读</li> <li>安徒生童话</li> <li>黑骏马</li> <li>绿山墙的安妮</li> </ul> </div>
侧重注意点：
运行效果：
3）搜素框中输入内容后：
4）添加图片：
<div data-role="content"> <!--data-filter="true"用来设置过滤,显示出搜索框，并且是真的可以检索的--> <ul data-role="listview" data-inset="true" data-filter="true"> <!--data-inset="true"表示列表不左右撑满--> <li data-role="list-divider">卡勒德·胡赛尼著小说</li> <li> <img src="images/qianyang.jpg"> <h3>灿烂千阳</h3> <p>《灿烂千阳》是作者卡勒德·胡赛尼继《追风筝的人》后再次以阿富汗战乱为背景，时空跨越三十年，用细腻感人的笔触描绘了阿富 汗旧家族制度下苦苦挣扎的妇女，她们所怀抱的希望、爱情、梦想与所有的失落。个人，要忍耐饥饿、病痛的约束。家庭要承 受战争的创伤、难民的流离失所。国家要忍耐前苏联、塔利班与美国的战争。 </p> <!--灿烂千阳--> </li> <li> <img src="images/fengzheng.jpg"> <h3>追风筝的人</h3> <p>12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足。然而，在一场风筝比赛后，发生了一件悲惨不堪的事，阿米尔为 自己的懦弱感到自责和痛苦，逼走了哈桑，不久，自己也跟随父亲逃往美国。成年后的阿米尔始终无法原谅自己当年 对哈桑的背叛。为了赎罪，阿米尔再度踏上暌违二十多年的故乡，希望能为不幸的好友尽最后一点心力，却发现一个 惊天谎言，儿时的噩梦再度重演，阿米尔该如何抉择？ </p> </li> <li> <img src="images/huichang.png" alt=""> <h3>群山回唱</h3> <p> 《追风筝的人》作者，超级畅销作家胡赛尼顶尖力作，全球4000万读者翘首以待。荣获美国亚马逊书店2013年上半年最佳图书、 美国独立书店排行第一、巴诺书店(Barnes & Noble)畅销榜首、书店店员首选推荐上半年度最佳小说、美国国家公共电台（NPR) 夏季最佳图书、ABC《早安美国》读书俱乐部夏季最佳图书。 </p> </li> <!--用ata-role="list-divider"来做分割--> <li data-role="list-divider">双语阅读</li> <li>安徒生童话</li> <li>黑骏马</li> <li>绿山墙的安妮</li> </ul> </div>
注重点：
运行效果：
7.Web APP、 PhoneGap 、 JQuery Mobile
用网页技术来开发手机APP
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
