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

w3cschool的jQuery Mobile教程总结相关推荐

jQuery Mobile 教程
http://www.w3school.com.cn/jquerymobile/jquerymobile_icons.asp jQuery Mobile 教程 jQuery Mobile 教程 jQu ...
20 个很棒的 jQuery Mobile 教程
转载请注明:文章转载自:开源中国社区 [http://www.oschina.net] 本文标题:20 个很棒的 jQuery Mobile 教程本文地址:http://www.oschina.ne ...
jQuery Mobile教程:jQuery Mobile基本事件
本文我们来认识一下jQuery Mobile的几个比较重要的基本事件 1.mobileinit 可以利用它来扩展$.mobile或者修改默认配置示例: <script type="t ...
jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
jQuery mobile(初级教程)
1,jquery mobile 教程页面内容 <div data-role = "page"></div>头部兰 <div data-role = & ...
浅谈jQuery Mobile设计思想
来自51CTO技术社区:http://mobile.51cto.com/others-288591.htm jQuery Mobile设计思想是本文要介绍的内容,主要是来了解jQuery Mobile ...
w3cschool教程之jQuery UI 教程概述
w3cschool教程之jQuery UI 教程概述链接地址: http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html w3cschool教程 ...
18 个 jQuery Mobile 开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
8个jQuery Mobile基础教程
来自phpchina:http://www.phpchina.com/archives/view-39863-1.html 1. jQuery Mobile入门介绍 2. jQuery Mobile基 ...

w3cschool的jQuery Mobile教程总结

w3cschool的jQuery Mobile教程总结相关推荐

最新文章

热门文章