w3cschool的jQuery Mobile教程总结
w3cschool的jQuery Mobile教程总结
jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。
jQuery Mobile 工作于所有主流的智能手机和平板电脑上。
一 jQuery Mobile教程
jQuery Mobile教程
jQuery Mobile简介
jQuery Mobile安装
jQuery Mobile CDN:
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.js"></script>
</head>
jQuery Mobile页面
data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索
按钮)
data-role="content" 定义了页面的内容，比如文本， 图片，表单，按钮
等。
data-role="footer" 用于创建页面底部工具条。
在链接中添加data-rel="dialog"让用户点击链接时弹出对话框。
jQuery Mobile页面切换
页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提
交：
<a href="#anylink" data-transition="slide">切换到第二个页面</a>
jQuery Mobile按钮
在 jQuery Mobile 中，按钮可通过三种方式创建：
使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素
jQuery Mobile按钮图标
添加图标到您的按钮，使用 data-icon 属性：
<a href="#anylink" data-role="button" data-icon="search">Search</a>
jQuery Mobile工具栏
头部和尾部可以通过三种方式进行定位：
Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容。
jQuery Mobile导航栏
使用 data-role="navbar" 属性来定义导航栏
jQuery Mobile可折叠块
创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。
jQuery Mobile 网格
二 jQuery Mobile 列表
jQuery Mobile列表视图
应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接，用户可以点击它。
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 Data属性
jQuery Mobile图标
jQuery Mobile事件
jQuery Mobile页面事件
在 jQuery Mobile 中与页面打交道的事件被分为四类：
Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时
jQuery Mobile CSS类
全局类
按钮类
图标类
主题类
网格类