【初探移动前端开发】jQuery Mobile 二
本文例子请使用手机查看
List列表
在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了。
虽然HTML5与CSS3提供了强大的界面实现方案,jquery mobile作为jquery框架的一个移动web插件,他根据移动屏幕大小优化了UI组件,
列表组件就是jquery mobile根据移动设备的特性而实现的组件库之一。
我们来一个个看看我们的列表吧
普通链接列表
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jquerymobile_120" type="text/javascript" class="library"
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h1>
普通链接列表</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
</ul>
</div>
</div>
</body>
</html>
多层次嵌套列表
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jquerymobile_120" type="text/javascript" class="library"
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h1>
普通链接列表</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="01.htm">刀狂剑痴叶小钗</a>
<p>
子级list</p>
<ul>
<li><a href="01.htm">清香白莲素还真</a></li>
<li><a href="01.htm">清香白莲素还真</a></li>
</ul>
</li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a>
<p>
子级list</p>
<ul>
<li><a href="01.htm">清香白莲素还真</a></li>
<li><a href="01.htm">清香白莲素还真</a></li>
</ul>
</li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
</ul>
</div>
</div>
</body>
</html>
这个嵌套列表,我们点击第一个后便可以看到这个啦。
列表分隔符
我们有时候会碰到需要对列表进行分组的功能,具有分组效果的列表可以在li元素上设置data-role属性为list-divider来实现。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jquerymobile_120" type="text/javascript" class="library"
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h1>
列表分割</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li data-role="list-divider">霹雳三巨头</li>
<li><a href="01.htm">清香白莲素还真</a> </li>
<li><a href="01.htm">百世经纶一页书</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li data-role="list-divider">火影三巨头</li>
<li><a href="01.htm">宇智波斑</a> </li>
<li><a href="01.htm">初代火影</a> </li>
<li><a href="01.htm">六道仙人</a> </li>
<li data-role="list-divider">金光三巨头</li>
<li><a href="01.htm">史艳文</a> </li>
<li><a href="01.htm">藏镜人</a> </li>
<li><a href="01.htm">黑白郎君南宫很</a> </li>
</ul>
</div>
</div>
</body>
</html>
列表搜索
当设置data-filter为true时便具有了搜索功能了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jquerymobile_120" type="text/javascript" class="library"
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h1>
列表分割</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="g" data-filter="true">
<li><a href="01.htm">清香白莲素还真</a> </li>
<li><a href="01.htm">百世经纶一页书</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">宇智波斑</a> </li>
<li><a href="01.htm">初代火影</a> </li>
<li><a href="01.htm">六道仙人</a> </li>
<li><a href="01.htm">史艳文</a> </li>
<li><a href="01.htm">藏镜人</a> </li>
<li><a href="01.htm">黑白郎君南宫很</a> </li>
<li><a href="01.htm">清香白莲素还真</a> </li>
<li><a href="01.htm">百世经纶一页书</a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗</a> </li>
<li><a href="01.htm">宇智波斑</a> </li>
<li><a href="01.htm">初代火影</a> </li>
<li><a href="01.htm">六道仙人</a> </li>
<li><a href="01.htm">史艳文</a> </li>
<li><a href="01.htm">藏镜人</a> </li>
<li><a href="01.htm">黑白郎君南宫很</a> </li>
</ul>
</div>
</div>
</body>
</html>
这个是界面上的搜索与数据库没关系。
内嵌列表
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jquerymobile_120" type="text/javascript" class="library"
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h1>
列表分割</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="g" data-inset="true">
<li><a href="01.htm">清香白莲素还真<span class="ui-li-count"></span></a> </li>
<li><a href="01.htm">百世经纶一页书<span class="ui-li-count"></span></a> </li>
<li><a href="01.htm">刀狂剑痴叶小钗<span class="ui-li-aside">本命</span></a> </li>
</ul>
<ol data-role="listview" data-theme="g" data-inset="true">
<li><a href="01.htm">宇智波斑</a> </li>
<li><a href="01.htm">初代火影</a> </li>
<li><a href="01.htm">六道仙人</a> </li>
</ol>
<ul data-role="listview" data-theme="g" data-inset="true">
<li><a href="01.htm">史艳文</a> </li>
<li><a href="01.htm">藏镜人</a> </li>
<li><a href="01.htm">黑白郎君南宫很</a> </li>
</ul>
</div>
</div>
</body>
</html>
列表的性能问题
jquery mobile虽然提供了非常丰富的列表类型,但大部分类型都是针对不同需求而实现的内容格式列表。
实际上,jquery mobile并没有实现列表的分页功能,当数据量非常大时需要有分页功能,在前面说过,jquery mobile提供一种可搜索过滤列表类型的列表。
前面我们就说了没有通过数据库检索,可能出现数据量非常大的情况,对性能,对流量都不好,检索时候可能出现假死的情况。
所以使用list功能需要慎重。
Event事件
好了,基本UI方面的我们就看完了,现在我们来看看事件方面的东西。
jquery mobile提供了丰富的事件处理机制,并且根据不同的移动设备,整合各种事件,使得开发者不必解决不同设备之间的事件处理差异。
页面加载事件
我们在页面中会使用
$(document).ready()
它的作用是当加载完成一个web页面的Dom结构后就运行该方法。
在移动web应用程序时,仍然可以使用这个功能,但是jquery mobile的机制是每个视图和页面的内容都是使用ajax请求加载的,这样每次显示一个新视图或者新页面都没办法调用readey方法,这不是我们想要的结果。
所以针对jquery mobile提供了这个方法解决这个问题:pageCreate事件,该事件的含义是当视图或页面被切换时触发的。
$('#page').live('pagecreate', function (e) {
alert('触发之');
});
touch事件
jquery mobile提供了最基本的触摸事件:touch事件
tap:
快速触摸屏幕并离开,类似于一次完整的点击事件
taphold:
触摸屏幕并保持一段时间
swipe:
在1秒内水平移动30px屏幕像素以上时触发
swipeleft:
向左侧滑动
swiperight:
向右侧滑动
方向改变事件
orientationchange事件函数当移动设备方向发生改变时触发。
在事件回调函数内的第二个参数返回一个用于识别当前方向的参数,该参数只会返回两种值:portrait(纵向)和landscape(横向)
但是该事件不是所有浏览器都支持,所以使用要慎重。
滚动事件
目前jquery mobile支持两种滚动事件
scrollstart
开始滚动时触发,需要注意是ios上该事件不稳定,原因是ios在滚动时会禁止dom操作
会将dom操作放入队列中,待滚动结束后才执行这些操作,但是估计现在解决了。
scrollend
在滚动结束时触发
显示/隐藏事件
在基于jquery mobile的移动web应用中,我们知道一个web页面存在多个不同的视图或页面,但每次只会显示一个。
当显示其中一个视图时其余都会隐藏,每次视图切换都会触发显示/隐藏事件
pagebeforeshow
当视图通过动画效果开始显示在屏幕之前触发事件
pagebeforehide
当视图通过动画效果开始隐藏之前触发事件
pageshow
当视图通过动画效果显示在屏幕之后触发事件
pagehide
当视图通过动画效果隐藏后触发事件 没切换一次页面,4钟事件都会被触发,例如:
当a视图切换到b视图时,首先触发a视图的pagebeforeshow事件和b视图的pagebeforehide事件
当b视图完成切换动画效果后完整的显示在屏幕中时,会触发a视图的pagehide事件和b视图的pageshow事件
虚拟鼠标事件
jquery mobile提供了一种虚拟点击事件来整合不同设备中mouse和touch事件
vmouseover
统一处理触摸和鼠标悬停事件
vmousedown
统一处理触摸和鼠标按下事件
vmousemove
处理触摸和鼠标移动事件
vmouseup
处理触摸和鼠标松开事件
vclick
处理触摸和鼠标点击事件
vmousecancel
处理触摸和鼠标离开事件
结语
我们队jquery mobile的学习暂时到这里,接下来我们在学习下phonegap,然后就实战一下下。
【初探移动前端开发】jQuery Mobile 二的更多相关文章
- 【初探移动前端开发05】jQuery Mobile (整合版)
前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
- 【初探移动前端开发03】jQuery Mobile(上)
前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
- 【初探移动前端开发04】jQuery Mobile (中)
前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
- 【初探移动前端开发04】jQuery Mobile 一
网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...
- 【初探移动前端开发05】jQuery Mobile (下)
前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
- Web前端开发规范(二)
3.HTML代码规范 .html文件必须存放在项目工程约定的目录中. .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html. 文档类型声明:HTML4中使用< ...
- 如何结合整洁架构和MVP模式提升前端开发体验(二) - 代码实现篇
上一篇文章介绍了整体架构,接下来说说怎么按照上图的分层结构实现下面的增删改查的功能. 代码结构 vue userManage └── List ├── api.ts ├── EditModal │ ├ ...
- 前端开发 - jQuery
本节内容 一.jQuery概述 二.选择器 三.操作DOM 四.修改DOM结构 五.事件 六.动画 七.AJAX(待续) 八.扩展(待续) 一.jQuery概述 jQuery 是一个 JavaScri ...
- 前端开发 - JQuery&Bootstrap - 总结
一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器 各种操作和处理 2.定义: 1.Javascr ...
随机推荐
- HDU1531 差分约束
King Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- git--------------bug修复流程
当前所有分支: master:主分支 test:测试分支 zs:开发人员分支 ls:开发人员分支 场景:zs正在开发A模块功能,线上环境产生了一个bug. zs的操作流程(当前分支为zs分支): 1. ...
- X210(s5pv210)中断系统
1.SoC对中断的实现机制:异常向量表 (1)异常向量表是CPU中某些特定地址的特定定义.当中断发生的时候,中断要想办法通知CPU去处理中断,怎么做到?这就要靠异常向量表.(2)在CPU设计时,就事先 ...
- [freemarker篇]02.生成HTML的静态页面
昨天完成了一部分的今天在上次的基础上,完成完成生成HTML静态页面的操作,中间会涉及一点标签的简单使用.今天的代码有一丢丢的对付的感觉!抱歉了,直接就上代码吧!求原谅! 项目结构目录如下: 第一步,新 ...
- 原生js实现单屏滚动
类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...
- java修饰符——transient
一.背景 上星期去CRM上开发一个功能,该系统里面有自动分页,需要在实体类里加入一个分页变量 // 分页 private PageInfo pageInfo = new PageInfo(); 这个本 ...
- 函数式编程--响应式编程 ---android应用例子
RxJava implements this operator as create. It is good practice to check the observer’s isUnsubscribe ...
- google protobuf序列化原理解析 (PHP示例)
一.简介 Protocol Buffers是谷歌定义的一种跨语言.跨平台.可扩展的数据传输及存储的协议,因为将字段协议分别放在传输两端,传输数据中只包含数据本身,不需要包含字段说明,所以传输数据量小, ...
- Spring注解@Resource和@Autowired区别对比、spring扫描的默认bean的Id、程序获取spring容器对象
-------------------------注解扫面的bean的ID问题-------------------------- 0.前提需要明白注解扫描出来的bean的id默认是类名首字母小写,当 ...
- bing查询旁站脚本
#!/usr/bin/env python # -*- coding: UTF-8 -*- #by i3ekr import re,optparse,sys,requests,time,os pars ...