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类
    全局类
    按钮类
    图标类
    主题类
    网格类