您的位置：首页 > Web前端 > JQuery

JQuery Mobile(书籍分类检索)

2016-03-22 23:27 666 查看
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
191be
中文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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JQuery Mobile 选项卡 列表 过滤 页眉页脚
相关文章推荐
新的分享
章节导航