jQuery Mobile 实例

本章节总结了 jQuery Mobile 的实例,并按照章节归类。


jQuery Mobile 页面

基础的移动网页

多页面

对话框


jQuery Mobile 过渡

淡入淡出效果

翻页效果

流效果

弹窗效果

滑动效果

滑动淡出效果

上滑动效果

下滑动效果

翻页效果

无过渡效果

逆转效果


jQuery Mobile 按钮

创建按钮

行内按钮

分组按钮

后退按钮

带有和不带有圆角的按钮

小型和常规尺寸的按钮

带有和不带有阴影的按钮


jQuery Mobile 按钮图标

向按钮添加图标

定位图标

只显示图标


jQuery Mobile 工具栏

创建页眉和页脚

在页眉中添加按钮

在页眉中向左侧添加按钮

在页眉中向右侧添加按钮

带有按钮的页脚

带有居中对齐按钮的页脚

带有分组按钮的页脚

带有水平分组按钮的页脚

行内定位 - 页眉和页脚与页面内容行内定位

固定定位 - 页眉和页脚将保留在页面的顶部和底部

全屏定位 - 页面和页脚分班位于顶部和底部,但仍然在页面内容上


jQuery Mobile 导航栏

创建导航栏

在内容中的导航栏

在页脚中导航栏

在导航栏中为按钮添加被选外观(被按下)

添加被选外观(被按下)

在导航栏中定位图标

演示在导航栏中的十个按钮


jQuery Mobile 可折叠

创建内容可折叠块

当页面加载时展开内容

嵌套的可折叠块

可折叠集合(手风琴)

删除可折叠块上的圆角

使可折叠块更小

改变可折叠块的图标

可折叠列表

可折叠表单


jQuery Mobile 网格

两列布局

三列布局

四列布局

五列布局

自定义网格

列中的多行


jQuery Mobile 列表

创建列表视图

带有圆角的列表视图

列表分隔符

自动分隔符

创建搜索过滤器

改变搜索框中的文本

创建只读列表

向列表项添加缩略图

使用标准 HTML 来填充带有信息的列表

向列表项添加图标

创建带有分隔按钮的列表

增强列表项的功能性

创建计数泡泡

改变列表项的默认链接图标

可折叠列表

创建日历


jQuery Mobile 表单

文本输入

文本框

搜索输入

单选按钮

复选框

对单选按钮和复选框进行水平组合

带有单选按钮和复选框的域包含器

预选的单选按钮和复选框

创建选择菜单

创建带有分隔符的选择菜单 (optgroup)

自定义选择菜单

在选择菜单中选取多个选项

组合选择菜单

水平组合选择菜单

预选一个选项

可折叠表单

创建滑块控件

突出显示截至滑块值的轨道

范围滑块(双重的)

创建切换开关

预选一个切换开关


jQuery Mobile 主题

主题 “a”

主题 “b”

主题 “c”

主题 “d”

主题 “e”

主题化的页眉、内容和页脚

主题化的对话框

主题化的按钮

主题化的图标

页眉和页脚中的主题化按钮

主题化的导航栏

主题化的可折叠按钮和内容

主题化的列表

主题化的划分按钮

主题化的可折叠列表

主题化的表单

主题化的可折叠表单

定制主题


jQuery Mobile 事件

Tap 事件

Taphold 事件

Swipe 事件

Swipeleft 事件

Swiperight 事件

Scrollstart 事件

Scrollstop 事件

Orientationchange 事件 - 提示方向

Orientationchange 事件 - 为水平和垂直方向设置不同的样式

Page initialization 事件

Page load 事件

Page transition 事件