前端开发手机框架jquery mobile.pdfVIP

jQuery简介

jQuery是创建移动web应用程序的框架。

jQuery适用于所有流行的智能和平板电脑。

特性：

此框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。

jQuery框架的整体大小比较小，JavaScript库12KB，CSS6KB，

还包括一些图标。

jQuery目前支持以下移动平台：

AppleiOS：、iPodTouch、iPad（所有版本）

Android：所有设备（所有版本）

WindowsPhone：所有设备（所有版本）

jQuery简介

jQuery构建于jQuery库之上，这使其更易学习，如果您通晓

jQuery的话。

它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成

对页面的布局。

在开始学习jQuery之前，您应该对以下知识有基本的了解：

1、HTML

2、CSS

3、jQuery

jQuery简介

示例效果展示：

jQuery简介

安装

有多个办法可供您在上开始使用jQuery。您可以：

1、从CDNjQuery（推荐）

2、从jQuery库

jQueryCDN:

head

linkrel=stylesheethref=

scriptsrc=/script

scriptsrc=/script

/head

jQuery

head

linkrel=stylesheethref=jquery.-1.3.2.css

scriptsrc=jquery.js/script

scriptsrc=jquery.-1.3.2.js/script

/head

页面

下面是一个简单的页面的代码和效果图：

推荐使用谷歌的Chrome浏览器调整尺寸到大小，查看效果

。

解释：

data-role=page是显示在浏览器中的页面

data-role=header创建页面上方的（常用于标题和搜索按钮）

data-role=content定义页面的内容，比如文本、图像、表单和按钮，

等等

data-role=footer创建页面底部的

提示：在这些容器中，您可以添加任意HTML元素-段落、图像、标题、

等等。data-*属性用于通过jQuery为移动设备创建“对触

控友好的”交互外观。

过渡效果

jQuery拥有一系列关于如何从一页过渡到下一页的效果

。

示例：ahref=#anylinkdata-transition=slide滑动到页面二/a

按钮

jQuery中的按钮可通过三种方法创建

：1、使用button元素

2、使用input元素

3、使用data-role=button的a元素

示例：

button按钮/button

inputtype=buttonvalue=按钮

ahref=#data-role=button按钮/a

按钮效果

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，

或者如果您需要两个或多个按钮并排显示，请添加data-inline=true：

示例：

ahref=#pagetwodata-role=buttondata-inline=true转到页

面二/a

效果：

});