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