jQuery Mobile 教程

393课时
6.1K学过
8分

1. jQuery Mobile 教程

jQuery Mobile 教程

jQuery Mobile 实例

jQuery Mobile 简介

前置知识

什么是 jQuery Mobile?

为什么使用 jQuery Mobile?

最好的阅读体验

jQuery Mobile 安装

从 CDN 中加载 jQuery Mobile

jQuery Mobile CDN

下载 jQuery Mobile

提示

jQuery Mobile 页面

jQuery Mobile 页面实例

实例解析

在页面中添加 jQuery Mobile

在页面中添加 jQuery Mobile 实例

注意

页面作为对话框使用

页面作为对话框使用实例

jQuery Mobile 过渡

jQuery Mobile 页面切换效果

注意

提示

jQuery Mobile 页面切换效果实例

jQuery Mobile 按钮

在 jQuery Mobile 中创建按钮

<button>

<input>

<a>

导航按钮

导航按钮实例

内联按钮

内联按钮实例

组合按钮

组合按钮实例

后退按钮

后退按钮实例

更多链接按钮实例

jQuery Mobile 按钮图标

添加图标到 jQuery Mobile 按钮

注意

定位图标

图标的位置

只显示图标

移除圆圈

黑色、白色按钮

更多实例

jQuery Mobile 弹窗

jQuery Mobile 弹窗实例1

jQuery Mobile 弹窗实例2

关闭弹窗

定位弹窗

定位弹窗实例

过渡

所有过渡效果实例

弹窗方向小边框

弹窗方向小边框实例

弹窗对话框

弹窗对话框实例

图片弹窗

图片弹窗实例

弹窗背景覆盖

弹窗背景覆盖实例

弹窗背景覆盖实例2

注意

jQuery Mobile 工具栏

头部栏

头部栏实例

头部栏实例2

头部栏实例3

尾部栏

尾部栏实例

尾部栏实例2

尾部栏实例3

定位头部栏和尾部栏

Inline 定位(默认)

Fixed 定位

Fullscreen 定位

更多实例

jQuery Mobile 导航栏

jQuery Mobile 导航栏实例

导航按钮图标

导航按钮图标实例

定位图标

激活按钮

激活按钮实例1

激活按钮实例2

更多实例

jQuery Mobile 面板

注意

jQuery Mobile 面板实例

关闭面板

关闭面板实例

面板展示

面板展示实例

面板定位

面板定位实例1

面板定位实例2

jQuery Mobile 可折叠内容块

可折叠内容块实例

可折叠内容块实例2

嵌套可折叠块

嵌套可折叠块实例

可折叠集合

可折叠集合实例

更多实例

jQuery Mobile 表格-响应式表格

jQuery Mobile 表格-回流表格

回流表格实例

jQuery Mobile 表格-列切换

列切换实例

列切换实例2

jQuery Mobile 表格-表格样式

添加阴影

为所有行添加底部边框

为 <th> 元素添加按钮及为偶数行添加背景

jQuery Mobile 网格

自定义网格

自定义网格实例

多行

多行实例

响应式网格

响应式网格实例

5. jQuery Mobile 事件

jQuery Mobile 事件

初始化 jQuery Mobile 事件

jQuery document ready 事件

jQuery Mobile pagecreate 事件

jQuery Mobile 触摸事件

jQuery Mobile 点击

jQuery Mobile 点击实例

jQuery Mobile 点击不放(长按)

jQuery Mobile 点击不放(长按)实例

jQuery Mobile 滑动

jQuery Mobile 滑动实例

jQuery Mobile 向左滑动

jQuery Mobile 向左滑动实例

jQuery Mobile 向右滑动

jQuery Mobile 向右滑动实例

jQuery Mobile 滚屏事件

jQuery Mobile 滚屏开始(Scrollstart)

jQuery Mobile 滚屏开始(Scrollstart)实例

jQuery Mobile 滚屏结束(Scrollstop)

jQuery Mobile 滚屏结束(Scrollstop)实例

jQuery Mobile 方向改变事件

jQuery Mobile 方向改变事件实例

jQuery Mobile 方向改变事件实例2

jQuery Mobile 页面:一个基本的移动网页

jQuery Mobile 页面:多个页面

jQuery Mobile 页面:对话框

jQuery Mobile 页面切换:淡入效果

jQuery Mobile 页面切换:从后向前翻转效果

jQuery Mobile 页面切换:流动效果

jQuery Mobile 页面切换:弹出效果

jQuery Mobile 页面切换:滑动效果

jQuery Mobile 页面切换:从右到左滑动并淡入效果

jQuery Mobile 页面切换:从下到上滑动效果

jQuery Mobile 页面切换:从上到下滑动效果

jQuery Mobile 页面切换:翻页效果

jQuery Mobile 页面切换:没有切换效果

jQuery Mobile 页面切换:颠倒效果

jQuery Mobile 按钮:创建按钮

jQuery Mobile 按钮:内联按钮

jQuery Mobile 按钮:组合按钮

jQuery Mobile 按钮:后退按钮

jQuery Mobile 按钮:带有圆角或不带有圆角的按钮

jQuery Mobile 按钮:小尺寸或常规尺寸的按钮

jQuery Mobile 按钮:带有阴影或不带有阴影的按钮

jQuery Mobile 按钮图标:添加图标到按钮

jQuery Mobile 按钮图标:定位图标

jQuery Mobile 按钮图标:只显示图标

jQuery Mobile 工具栏:创建头部栏和尾部栏

jQuery Mobile 工具栏:在头部栏添加按钮

jQuery Mobile 工具栏:在头部栏左侧添加按钮

jQuery Mobile 工具栏:在头部栏右侧添加按钮

jQuery Mobile 工具栏:带有按钮的尾部栏

jQuery Mobile 工具栏:带有居中对齐按钮的尾部栏

jQuery Mobile 工具栏:带有组合按钮的尾部栏

jQuery Mobile 工具栏:带有水平组合按钮的尾部栏

jQuery Mobile 工具栏:Inline 定位 - 头部栏和尾部栏与页面内容内联

jQuery Mobile 工具栏:Fixed 定位 - 头部栏和尾部栏固定在页面的顶部和底部

jQuery Mobile 工具栏:Fullscreen 定位

jQuery Mobile 导航栏:创建导航栏

jQuery Mobile 导航栏:内容中的导航栏

jQuery Mobile 导航栏:尾部中的导航栏

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

jQuery Mobile 导航栏:持续添加被选中(按下)外观

jQuery Mobile 导航栏:定位导航栏中的图标

jQuery Mobile 导航栏:导航栏中 10 个按钮的演示

jQuery Mobile 可折叠块:创建可折叠的内容块

jQuery Mobile 可折叠块:当页面加载时展开内容

jQuery Mobile 可折叠块:嵌套可折叠块

jQuery Mobile 可折叠块:可折叠集合

jQuery Mobile 可折叠块:取消可折叠块上的圆角

jQuery Mobile 可折叠块:让可折叠块更小

jQuery Mobile 可折叠块:改变可折叠块的图标

jQuery Mobile 可折叠块:可折叠列表

jQuery Mobile 可折叠块:可折叠表单

jQuery Mobile 网格:两列布局

jQuery Mobile 网格:三列布局

jQuery Mobile 网格:四列布局

jQuery Mobile 网格:五列布局

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 列表:添加图标到列表项

jQuery Mobile 列表:创建带有分割按钮的列表

jQuery Mobile 列表:让列表项更具功能性

jQuery Mobile 列表:创建计数气泡

jQuery Mobile 列表:为列表项创建默认链接图标

jQuery Mobile 列表:可折叠列表

jQuery Mobile 列表:创建日历

jQuery Mobile 表单:文本输入框

jQuery Mobile 表单:文本输入域

jQuery Mobile 表单:搜索输入框

jQuery Mobile 表单:单选按钮

jQuery Mobile 表单:复选框

jQuery Mobile 表单:水平组合单选按钮和复选框

jQuery Mobile 表单:带有单选按钮和复选框的 Field 容器

jQuery Mobile 表单:预选中单选按钮/复选框

jQuery Mobile 表单:创建选择菜单

jQuery Mobile 表单:创建带有分隔的选择菜单

jQuery Mobile 表单:自定义选择菜单

jQuery Mobile 表单:在选择菜单中选择多个选项

jQuery Mobile 表单:组合选择菜单

jQuery Mobile 表单:水平组合选择菜单

jQuery Mobile 表单:预选中选项

jQuery Mobile 表单:可折叠表单

jQuery Mobile 表单:创建滑动条控件

jQuery Mobile 表单:高亮突出显示滑动条的值

jQuery Mobile 表单:创建拨动开关

jQuery Mobile 表单:预选中拨动开关

jQuery Mobile 主题 "a"

jQuery Mobile 主题 "b"

jQuery Mobile 主题头部、内容和尾部

jQuery Mobile 主题对话框

jQuery Mobile 主题按钮

jQuery Mobile 主题图标

jQuery Mobile 头部和尾部的主题按钮

jQuery Mobile 主题导航栏

jQuery Mobile 主题可折叠按钮和内容

jQuery Mobile 主题列表

jQuery Mobile 主题分割按钮

jQuery Mobile 主题可折叠列表

jQuery Mobile 主题表单

jQuery Mobile 主题可折叠表单

jQuery Mobile 自定义主题

jQuery Mobile 触摸事件:点击(Tap)事件

jQuery Mobile 触摸事件:点击不放(Taphold)事件

jQuery Mobile 触摸事件:滑动(Swipe)事件

jQuery Mobile 触摸事件:向左滑动(Swipeleft)事件

jQuery Mobile 触摸事件:向右滑动(Swiperight)事件

jQuery Mobile 触摸事件:滚屏开始(Scrollstart)事件

jQuery Mobile 触摸事件:滚屏结束(Scrollstop)事件

jQuery Mobile 触摸事件:方向改变(Orientationchange)事件

jQuery Mobile 触摸事件:方向改变(Orientationchange)事件

jQuery Data 属性

按钮

复选框

可折叠块

可折叠集合

内容

控件组

对话框

增强

域容器

固定工具栏

翻转拨动开关

尾部栏

头部栏

链接

列表

列表项

导航栏

页面

弹窗

单选按钮

选择

滑动块

文本输入框 & 文本输入域

jQuery Mobile 图标

jQuery Mobile 事件参考手册

jQuery Mobile 页面事件

jQuery Mobile Initialization 事件

jQuery Mobile Initialization 事件实例

jQuery Mobile Load 事件

jQuery Mobile Load 事件实例

jQuery Mobile 过渡事件

jQuery Mobile 过渡事件实例

jQuery CSS 类

全局类

按钮类

图标类

主题类 Classes

网格类

课程评价 (0)

请对课程作出评价:
0/300

学员评价

暂无精选评价
1分钟

jQuery Mobile 实例

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>页面标题</h1>
  </div>

  <div data-role="content">
    <p>页面内容</p>
  </div>

  <div data-role="footer">
    <h1>页面底部内容</h1>
  </div>
</div>