jQuery Mobile 实例

---

jQuery Mobile 页面

一个基本的移动网页
多个页面
对话框

实例解释

---

jQuery Mobile 页面切换

淡入效果
从后向前翻转效果
流动效果
弹出效果
滑动效果
从右到左滑动并淡入效果
从下到上滑动效果
从上到下滑动效果
翻页效果
没有切换效果
颠倒效果

实例解释

---

jQuery Mobile 按钮

创建按钮
内联按钮
组合按钮
后退按钮
带有圆角或不带有圆角的按钮
小尺寸或常规尺寸的按钮
带有阴影或不带有阴影的按钮

实例解释

---

jQuery Mobile 按钮图标

添加图标到按钮
定位图标
只显示图标

实例解释

---

jQuery Mobile 工具栏

创建头部栏和尾部栏
在头部栏添加按钮
在头部栏左侧添加按钮
在头部栏右侧添加按钮
带有按钮的尾部栏
带有居中对齐按钮的尾部栏
带有组合按钮的尾部栏
带有水平组合按钮的尾部栏
Inline 定位 - 头部栏和尾部栏与页面内容内联
Fixed 定位 - 头部栏和尾部栏固定在页面的顶部和底部
Fullscreen 定位 - 头部栏和尾部栏固定在页面的顶部和底部，但是会遮住页面内容

实例解释

---

jQuery Mobile 导航栏

创建导航栏
内容中的导航栏
尾部中的导航栏
在导航栏中为按钮添加被选中（按下）外观
持续添加被选中（按下）外观
定位导航栏中的图标
导航栏中 10 个按钮的演示

实例解释

---

jQuery Mobile 可折叠块

创建可折叠的内容块
当页面加载时展开内容
嵌套可折叠块
可折叠集合
取消可折叠块上的圆角
让可折叠块更小
改变可折叠块的图标
可折叠列表
可折叠表单

实例解释

---

jQuery Mobile 网格

两列布局
三列布局
四列布局
五列布局
自定义网格
列内的多行

实例解释

---

jQuery Mobile 列表

创建列表视图
带圆角的列表视图
列表分隔
自动分隔
创建搜索过滤
改变搜索框内的文本
创建只读列表
为列表项添加缩略图
添加 HTML 元素，用信息填充列表项
添加图标到列表项
创建带有分割按钮的列表
让列表项更具功能性
创建计数气泡
为列表项创建默认链接图标
可折叠列表
创建日历

实例解释

---

jQuery Mobile 表单

文本输入框
文本输入域
搜索输入框
单选按钮
复选框
水平组合单选按钮和复选框
带有单选按钮和复选框的 Field 容器
预选中单选按钮/复选框
创建选择菜单
创建带有分隔（optgroup）的选择菜单
自定义选择菜单
在选择菜单中选择多个选项
组合选择菜单
水平组合选择菜单
预选中选项
可折叠表单
创建滑动条控件
高亮突出显示滑动条的值
创建拨动开关
预选中拨动开关

实例解释

---

jQuery Mobile 主题

主题 "a"
主题 "b"
主题 "c"
主题 "d"
主题 "e"
主题头部、内容和尾部
主题对话框
主题按钮
主题图标
头部和尾部的主题按钮
主题导航栏
主题可折叠按钮和内容
主题列表
主题分割按钮
主题可折叠列表
主题表单
主题可折叠表单
自定义主题

实例解释

---

jQuery Mobile 触摸事件

点击（Tap）事件
点击不放（Taphold）事件
滑动（Swipe）事件
向左滑动（Swipeleft）事件
向右滑动（Swiperight）事件
滚屏开始（Scrollstart）事件
滚屏结束（Scrollstop）事件
方向改变（Orientationchange）事件 - 提示方向
方向改变（Orientationchange）事件 - 为纵向和横向设置不同的样式

实例解释

以上是包含于jQuery Mobile教程中的全部相关的使用实例，如果你已经掌握了jQuery Mobile知识，请通过这些实例巩固！