JQuerymobile实例源代码
首页我们先来解释一下下JQuerymobile是什么，jQuery Mobile是JQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统 是用于创建移动 Web 应用的前端开发框架，可以应用于智能手机与平板电脑，而且使用 HTML5 和 CSS3 最小的脚本来布局网页。
我们先一部分一部分讲解，最后在为大家附上完整代码。
| 1 滑出面板 |
我们再来解释一下其中一些属性的作用吧。
data-role="panel"属性用来创建面板。
data-display 属性来控制面板的展示方式:
① overlay在内容上显示面板
② push是同时"推动"面板和页面。
③ reveal默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来。
<div data-role="panel" id="revealPanel" data-display="reveal">
<p>已打卡127天</p>
<a href="#"><img src="img/a.PNG">张三</a><br>
<span>☆☆☆☆☆</span><br>
<span>编辑个性签名...</span>
<div class="message">
<ul>
<li>了解会员特权</li>
<li>QQ钱包</li>
<li>个性装扮</li>
<li>我的收藏</li>
<li>我的相册</li>
<li>我的文件</li>
<li>免流量特权</li>
</ul>
</div>
</div>
| 2 元素的过滤 |
data-position="right"让面板出现在屏幕的右侧
data-inset="true"：列表样式的圆角和边缘。
元素的 data-autodividers="true" 属性设置可以根据字母顺序排列的列表。
data-role="listview"：列表视图。
你想过滤的元素必须使用 data-filter="true" 属性。
创建 <input> 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。
将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。
<div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right">
<h2>我的通讯录</h2>
<form class="ui-filterable">
<input id="myFilter" data-type="search" placeholder="根据名称搜索..">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
<li>
<a href="#">张三</a>
</li>
<li>
<a href="#">李四</a>
</li>
<li>
<a href="#">Albert</a>
</li>
<li>
<a href="#">Billy</a>
</li>
<li>
<a href="#">Bob</a>
</li>
<li>
<a href="#">Calvin</a>
</li>
<li>
<a href="#">Cameron</a>
</li>
<li>
<a href="#">Chloe</a>
</li>
<li>
<a href="#">Christina</a>
</li>
<li>
<a href="#">Diana</a>
</li>
<li>
<a href="#">Gabriel</a>
</li>
<li>
<a href="#">Glen</a>
</li>
<li>
<a href="#">Ralph</a>
</li>
<li>
<a href="#">Valarie</a>
</li>
</ul>
</div>
| 3 页面顶部工具条 |
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-dismissible 指定面板是否可以通过点击面板外部区域来关闭。有两个参数 true | false
data-swipe-close 指定是否可以通过滑动来关闭。有两个参数 true | false
使用 ui-icon 类将图标添加到按钮上
ui-btn-b 修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。
ui-corner-all 为按钮添加圆角
ui-mini 制作小按钮
ui-shadow 为按钮添加阴影
ui-icon-bars/ui-icon-plus:图标样式
ui-btn-icon-notext只想显示图标
默认情况下，所有图标都是白色的。 如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"
<div data-role="header">
<a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
<a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
<p align="center">消息</p>
</div>
| 4 页面内容 |
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
列表视图就是在在ul或ol标签中添加data-role="listview"属性。
列表样式的圆角和边缘，使用 data-inset="true" 属性设置
<div data-role="main" class="ui-content">
<a href="#overlayPanel" class="ui-btn">搜索</a>
<ul data-role="listview" data-inset="true">
<li>
<a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">张三(点击跳转页面)</a>
</li>
<li>
<a href="#"><img src="img/b.PNG">李四</a>
</li>
<li>
<a href="#"><img src="img/c.PNG">王二</a>
</li>
<li id="listview1">
<a href="#"><img src="img/a.PNG">张五(向左滑动切换页面)</a>
</li>
</ul>
</div>
| 5 页面底部工具条 |
data-role="footer" 用于创建页面底部工具条。
使用 data-role="navbar" 属性来定义导航栏
使用 data-icon 属性在导航按钮上添加图标
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-icon="comment">消息</a>
</li>
<li>
<a href="user.html" data-icon="user">联系人</a>
</li>
<li>
<a href="#" data-icon="star">动态</a>
</li>
</ul>
</div>
</div>
| 6 点击需要跳转的页面(子页) |
data-fullscreen="true/false"规定工具栏是否一直固定在顶部或底部
data-tap-toggle= true | false 规定用户是否能够通过点击改变工具栏的可见性
如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。
默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"
data-role="collapsibleset"当一个新的块被展开时，所有其他的块都会被折叠起来。
data-mini= true | false 规定按钮是小尺寸还是常规尺寸
data-collapsed-icon="carat-r":定义折叠面板的图标。
<div data-role="page" id="pagetwo" data-theme="b">
<div data-role="header" data-position="fixed" data-fullscreen="true" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a> <div data-role="collapsibleset">
<div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
<h1>特别关心</h1>
<ul data-role="listview">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王二</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
<h1>分组一</h1>
<ul data-role="listview">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王二</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
<h1>分组二</h1>
<ul data-role="listview">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王二</a></li>
</ul>
</div>
</div>
</div> <div data-role="footer" data-position="fixed" data-fullscreen="true">
<h1>底部文本</h1>
</div>
</div>
| 7 滑动需要跳转的页面(子页) |
<div data-role="page" id="class-page">
<div data-role="content">
<ul data-role="listview" id="listview2">
<li>向右滑动切换页面</li>
<li>向右滑动切换页面</li>
<li>向右滑动切换页面</li>
</ul>
</div>
</div>
滑动页面的JS代码：
使用$.mobile.changePage()来切换页面
swipeleft:向左滑动事件在用户向左拖动元素大于30px时触发
reverse：布尔类型，默认false。设定页面转场动画的方向，设置为true时将导致反方向的转场。
$(function() {
$("#listview1").bind("swipeleft", function() {
$.mobile.changePage("#class-page");
});
$("#listview2").bind("swiperight", function() {
$.mobile.changePage("#pageone", {
transition : "flip",
reverse : true
}, true, true);
});
});
| 8 完整实例代码 |
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
<!--<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.css" />-->
<!--<link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.css" />-->
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head> <body>
<div data-role="page" id="pageone" data-transition="slide" data-direction="reverse"> <div data-role="panel" id="revealPanel" data-display="reveal">
<p>已打卡127天</p>
<a href="#"><img src="img/a.PNG">张三</a><br>
<span>☆☆☆☆☆</span><br>
<span>编辑个性签名...</span>
<div class="message">
<ul>
<li>了解会员特权</li>
<li>QQ钱包</li>
<li>个性装扮</li>
<li>我的收藏</li>
<li>我的相册</li>
<li>我的文件</li>
<li>免流量特权</li>
</ul>
</div>
</div> <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right">
<h2>我的通讯录</h2>
<form class="ui-filterable">
<input id="myFilter" data-type="search" placeholder="根据名称搜索..">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
<li>
<a href="#">张三</a>
</li>
<li>
<a href="#">李四</a>
</li>
<li>
<a href="#">Albert</a>
</li>
<li>
<a href="#">Billy</a>
</li>
<li>
<a href="#">Bob</a>
</li>
<li>
<a href="#">Calvin</a>
</li>
<li>
<a href="#">Cameron</a>
</li>
<li>
<a href="#">Chloe</a>
</li>
<li>
<a href="#">Christina</a>
</li>
<li>
<a href="#">Diana</a>
</li>
<li>
<a href="#">Gabriel</a>
</li>
<li>
<a href="#">Glen</a>
</li>
<li>
<a href="#">Ralph</a>
</li>
<li>
<a href="#">Valarie</a>
</li>
</ul>
</div> <div data-role="header">
<a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
<a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
<p align="center">消息</p>
</div> <div data-role="main" class="ui-content"> <a href="#overlayPanel" class="ui-btn">搜索</a> <ul data-role="listview" data-inset="true">
<li>
<a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">张三(点击跳转页面)</a>
</li>
<li>
<a href="#"><img src="img/b.PNG">李四</a>
</li>
<li>
<a href="#"><img src="img/c.PNG">王二</a>
</li>
<li id="listview1">
<a href="#"><img src="img/a.PNG">张五(向左滑动切换页面)</a>
</li>
</ul>
</div> <div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-icon="comment" onclick="goTo('content.html')">消息</a>
</li>
<li>
<a href="user.html" data-icon="user" onclick="goTo('content1.html')">联系人</a>
</li>
<li>
<a href="#" data-icon="star" onclick="goTo('user.html')">动态</a>
</li>
</ul>
</div>
</div>
</div> <div data-role="page" id="pagetwo" data-theme="b">
<div data-role="header" data-position="fixed" data-fullscreen="true" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a> <div data-role="collapsibleset">
<div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
<h1>特别关心</h1>
<ul data-role="listview">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王二</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
<h1>分组一</h1>
<ul data-role="listview">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王二</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
<h1>分组二</h1>
<ul data-role="listview">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王二</a></li>
</ul>
</div>
</div>
</div> <div data-role="footer" data-position="fixed" data-fullscreen="true">
<h1>底部文本</h1>
</div>
</div> <div data-role="page" id="class-page"> <div data-role="content">
<ul data-role="listview" id="listview2">
<li>向右滑动切换页面</li>
<li>向右滑动切换页面</li>
<li>向右滑动切换页面</li>
</ul>
</div> </div>
</body> </html>
JS代码：
$(function() {
$("#listview1").bind("swipeleft", function() {
$.mobile.changePage("#class-page");
});
$("#listview2").bind("swiperight", function() {
$.mobile.changePage("#pageone", {
transition : "flip",
reverse : true
}, true, true);
});
});
编者按
JQuerymobile还有好多其他的属性和功能，大家可以多多参考一下其他资料，进一步熟悉JQuerymobile。最后，希望大家与小编一起共同努力，在前端路上越走越远！
JQuerymobile实例源代码的更多相关文章
- Java学习-019-Properties 文件读取实例源代码
在这几天的学习过程中,有开发的朋友告知我,每个编程语言基本都有相应的配置文件支持类,像 Python 编程语言中支持的 ini 文件及其对应的配置文件读取类 ConfigParse,通过这个类,用户可 ...
- Java学习-018-EXCEL 文件写入实例源代码
众所周知,EXCEL 也是软件测试开发过程中,常用的数据文件导入导出时的类型文件之一,此文主要讲述如何通过 EXCEL 文件中 Sheet 的索引(index)或者 Sheet 名称获取文件中对应 S ...
- Java学习-017-EXCEL 文件读取实例源代码
众所周知,EXCEL 也是软件测试开发过程中,常用的数据文件导入导出时的类型文件之一,此文主要讲述如何通过 EXCEL 文件中 Sheet 的索引(index)或者 Sheet 名称获取文件中对应 S ...
- Java学习-016-CSV 文件读取实例源代码
上文(CSV文件写入)讲述了日常自动化测试过程中将测试数据写入 CSV 文件的源码,此文主要讲述如何从 CSV 文件获取测试过程中所需的参数化数据.敬请各位小主参阅,若有不足之处,敬请大神指正,不胜感 ...
- Java学习-015-CSV 文件写入实例源代码
在日常的自动化测试脚本编写的过程中,有时要将获取的测试结果或者测试数据存放在数据文件中,以用作后续的参数化测试.常用的文件文件类型无非 txt.csv.xls.properties.xml 这五种文件 ...
- Java学习-014-文本文件写入实例源代码（两种写入方式）
此文源码主要为应用 Java 读取文本文件内容实例的源代码.若有不足之处,敬请大神指正,不胜感激! 第一种:文本文件写入,若文件存在则删除原文件,并重新创建文件.源代码如下所示: /** * @fun ...
- Java学习-013-文本文件读取实例源代码（两种数据返回格式）
此文源码主要为应用 Java 读取文本文件内容实例的源代码.若有不足之处,敬请大神指正,不胜感激! 1.读取的文本文件内容以一维数组[LinkedList<String>]的形式返回,源代 ...
- Java学习-007-Log4J 日志记录配置文件详解及实例源代码
此文主要讲述在初学 Java 时,常用的 Log4J 日志记录配置文件详解及实例源代码整理.希望能对初学 Java 编程的亲们有所帮助.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:20 ...
- Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）
此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...
随机推荐
- 读取指定excel，修改并某个值并另存到指定路径
HSSFWorkBook是解析excel2007以前的版本(xls)之后的版本使用XSSFWrokBook(xlsx) 附:处理excel2007之后的版本代码: package gbyp.autoQ ...
- SpringMVC第二篇【过滤编码器、注解开发、requestMapping、业务方法与传统参数】
SpringMVC过滤编码器 在SpringMVC的控制器中,如果没有对编码进行任何的操作,那么获取到的中文数据是乱码! 即使我们在handle()方法中,使用request对象设置编码也不行!原因也 ...
- springmvc04-文件上传-JSON数据
文件上传部分: 1, 导入commons-fileupload-1.2.2.jar commons-io-2.4.jar 两个jar包. 2, 在主配置文件中,添加如下信息 <!-- 文件上传- ...
- JPA继承方式
在JPA中,实体继承关系的映射策略共有三种:单表继承策略(SINGLE_TABLE).Joined策略和Table_PER_Class策略. 1.单表继承策略 单表继承策略,父类实体和子类实体共用一张 ...
- Coder的好伙伴Github
网络越来越发达,各式各样的网盘.云存储也走进日常生活, 在老师的指导下,我第一次接触了GitHub. 什么是Github? Github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一 ...
- mysql 实验论证 innodb表级锁与行级锁
innodb 的行锁是在有索引的情况下,没有索引的表是锁定全表的. 表锁演示(无索引) Session1: mysql> set autocommit=0; mysql> select * ...
- 第5章 不要让线程成为脱缰的野马（Keeping your Threads on Leash） ---干净的终止一个线程
干净的终止一个线程 我曾经在第2章产生一个后台线程,用以输出一张屏幕外的 bitmap 图.我们必须解决的一个最复杂的问题就是,如果用户企图结束程序,而这张bitmap 图尚未完成,怎么办?第2章的 ...
- 使用千位分隔符(逗号)表示web网页中的大数字
做手机端页面我们常常遇到数字,而在Safari浏览器下这些数字会默认显示电话号码,于是我们就用到了补坑的方法加入<meta>标签: <meta name="format-d ...
- ObjectSNMP
下面的例子,就是使用ObjectSNMP获取RFC1213-MIB的例子:其中的system和ifTable对象就是对应的SNMPMIB中的system组合interface中的ifTable表. p ...
- struts jar包
这些错误很让我摸不着头脑,经多方查阅资料后,在Struts 2.2.x中应该导入如下7个JAR文件 1) commons-fileupload-1.2.1.jar 2) commons-io- ...