w3cschool的jQuery Mobile教程总结

来源：互联网发布：旅游订票网站php模板编辑：程序博客网时间：2024/06/04 18:46

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

0 0