W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 实例



jQuery Mobile 页面

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

实例解析


jQuery Mobile 页面切换

淡入效果
从后向前翻转效果
流动效果
弹出效果
滑动效果
幻灯片效果
向上滑动效果
向下滑动效果
翻转效果
无过渡效果
反转效果

实例解析


jQuery Mobile 按钮

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

实例解析


jQuery Mobile 按钮图标

在按钮上添加图标
添加更多图标
定位图标
只显示图标
移除图标 改变图标颜色

实例解析


jQuery Mobile 弹窗

创建一个基本的弹出窗口
向弹出窗口添加填充和边距
用右侧的关闭按钮关闭弹出窗口
用左关闭按钮关闭弹出窗口
不允许弹出
定位弹出窗口
过渡弹出窗口
弹出箭头
弹出对话框
弹出图像

实例解析


jQuery Mobile 工具栏

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

实例解析


jQuery Mobile 导航栏

创建导航栏
导航按钮中的图标
内容中的导航栏
尾部中的导航栏
在导航栏中为按钮添加被选中(按下)外观
持续添加被选中(按下)外观
定位图标:顶部对齐
定位图标:右对齐
定位图标:底部对齐
定位图标:左对齐
导航栏中10个按钮的演示

实例解析


jQuery Mobile 面板

创建基本面板
创建一个带有关闭按钮的面板
更改面板显示
靠右定位一个面板
固定面板

实例解析


jQuery Mobile 可折叠块

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

实例解析


jQuery Mobile 表格

创建回流表格
创建列切换表格
更改切换表格按钮文本
为表格添加阴影
为表格所有的行添加底部边框
为表格所有的行添加背景颜色

实例解析


jQuery Mobile 网格

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

实例解析


jQuery Mobile 列表

创建列表视图
带圆角的列表视图
列表分隔
自动分隔
创建只读列表
将面板插入列表项
更改列表项的默认链接图标
为列表项添加图标
为列表项添加缩略图
添加HTML元素,用信息填充列表项
创建带有分割按钮的列表
让列表项更具功能性
创建计数气泡
弹出列表
可折叠列表
可折叠弹出按钮
全宽可折叠列表
创建日历

实例解析


jQuery Mobile 过滤器

为列表创建搜索字段
更改搜索字段内的文本
自定义过滤器
过滤可折叠列表
过滤表格
过滤 <div> 元素

实例解析


jQuery Mobile 表单

文本输入框
在输入按钮上添加图标
在输入框上添加 "clear" 按钮
文本输入域
搜索输入框
单选按钮
复选框
水平组合单选按钮和复选框
带有单选按钮和复选框的 Field 容器
预选中单选按钮/复选框
将表单放在弹出窗口中
防止jQuery Mobile自动创建可折叠元素
创建选择菜单
创建带分隔符的选择菜单(optgroup)
自定义选择菜单
在选择菜单中选择多个选项
组选择菜单
水平组合选择菜单
缩小选择菜单
预选中选项
弹出式选择
可折叠的表单
更改默认选择图标
C改变图标定位
创建一个滑块控件
显示滑块按钮上的值
在用户幻灯片时将屏幕上的值弹出
高亮突出显示滑动条的值
范围滑块(双)
创建拨动开关
改变拨动开关的文本
预选中拨动开关
设置拨动开关的样式

实例解析


jQuery Mobile 主题

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

实例解析


jQuery Mobile 事件

点击事件
点击不放事件
滑动事件
向左滑动事件
向右滑动事件
滚屏开始事件
滚屏结束事件
方向改变事件 - 提示方向
方向改变事件 - 为纵向和横向设置不同的样式
页面初始化事件
页面加载事件
页面过渡事件

实例解析