一. JQueryMobile
-
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
-
JQM主要分为四部分：
页面&导航 CSS框架 组件 表单控件
3 使用JQM的步骤
1） 项目中引入jquery1.8+版本
2) 项目创建jqm目录，引入jqm必需资源文件
jquery-mobile.css
jquery-mobile.js
images/...
3) 创建html文件，引入必需的css和js,并设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1>
4) body中data-role="page"元素
注意：
- jqm的html文件中，body中必须至少有一个page，若用户未提供，jqm自动添加
- body中可以声明多个page,但默认只有第一个可以显示
- jqm中的所有的网页内容不能直接至于body中，必须至于page中
- jqm中的所有样式都是通过预定义class来设置的，开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能
二. jqueryMobile-page跳转及过场动画
-
页面跳转可以使用a/button/input等，推荐使用a-会自动添加过场动画
-
可以跳转到外部的完整HTML页面；也可以跳转到当前HTML中的另一个page,如
1)跳转到外部完整的HTML页面
<a href="xx.html">
2)跳转到当前HTML中的另一个page
<a href="#pageID">
-
已模态框形式打开另一个page
<a href="#pageID" data-rel="dialog">-
JQM为页面切换添加了非常丰富的过渡动画，使用方法
<a href="目标页面" data-transition="动画效果名称">可用的动画效果有：
fade:默认动画
pop:弹出动画
slide:滑动动画
slideup:向上滑动动画
trun:翻转动画
flip:翻转动画
flow:流动动画
none:无动画
-
三. jqueryMobile-按钮
-
可以使用A.button.input元素实现按钮的样式
-
可以使用data-role="button"属性实现按钮样式，也可以指定class实现按钮的样式，如ui-btn ui-corner-all ui-shadow
-
按钮默认是块级显示，可以使用ui-btn-inline实现行内按钮
-
按钮上可以有文字和图标，若存在图标，必须指定与文字的位置关系,可选值
btn-icon-left
btn-icon-right
btn-icon-bottom
btn-icon-top
创建带图标的按钮，图标功能：后退，前进，刷新，配置，用户，定位，主页，对勾....
- 按钮可以放到page的header里
header中的第一个按钮默认处于左侧，第二个按钮处于右侧，一般只放两个
<div data-role="header">
<a href="#">按钮</a> 默认就是按钮效果
</div>
四. jqueryMobile-导航条
-
基本结构
<div data-role="navbar"> <ul> <li><a href="#"></a> </ul> </div> -
注意
导航条中一般最多只能有五个项目，超过5个会在一行中显示2个 导航条可以出现在page的Header/Main/Footer 处于Header和Footer中的navbar默认会占满整行，并和标题字错开
五. jqueryMobile-load加载器
显示加载器： $.mobile.loading("show");
取消加载器：$.mobile.loading("hidden");
六. jqueryMobile-panel(面板)
-
面板在目前版本的jqp中只能放在page中，header之前和footer之后
<div data-role="page"> <div data-role="panel" id="p1"></div> <div data-role="header"></div> <div data-role="body"> <a href="#面板ID">打开面板</a> </div> <div data-role="footer"></div> <div data-role="panel" id="p1"></div> </div> -
面板组件可以指定出现位置和打开方式
data-position="left/right" data-display = "reveal/overlay/push"
七. jqueryMobile-折叠组件(collapsible)和手风琴效果(collapsibleset)
-
折叠组件
<div data-role="collapsible"> <h3>标题字</h3> <div>折叠的内容</div> </div> -
手风琴
<div data-role="collapsibleset"> <div data-role="collapsible"> <h3>标题字</h3> <div>折叠的内容</div> </div> <div data-role="collapsible"> <h3>标题字</h3> <div>折叠的内容</div> </div> </div>
八. 关于jqm的手册
-
下载安装包Demo-初期
-
完整的API列表(在线) - 后期
九. 关于jqm page的切换-深入探讨
- 一个HTML声明多个page
不足：即使不显示的Page，初始化时也会被客户端请求下来
- 一个HTML只声明一个Page，通过超链接进行页面跳转
1)jqm已经完全改写了超链接的默认行为-把同步请求转为AJAX请求
2) 异步请求得到的HTML页面，只会保留其中的第一个page,添加到DOM树上，其他所有内容全部删除。
3) 推荐一个项目中只有起始页是完整的HTML页面，其他被跳转到的页面都是page片段-只包含一个page的声明
4）jqm项目中所有的HTML页面中元素的id应该是全局唯一的
网友评论