jquery mobile学习教程之初识Jquery mobile 一
2014-01-28 11:39
471 查看
Jquery Mobile简介:
jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,允许您开发跨智能电话和平板电脑工作的移动 web 应用程序。jQuery Mobile 框架构建于 jQuery 内核之上,提供几个功能,包括 HTML 和 XML 文档对象模型(DOM)的操控、处理事件、使用 Ajax 执行服务器通信、以及用于 web 页面的动画和图像效果。这个移动框架本身是独立于 jQuery 内核(缩小或压缩后大约 25KB)的一个额外下载(缩小或压缩后大约 12KB)。与 jQuery 框架的其余部分一样,jQuery
Mobile 是一个免费的、双许可(MIT 和 GPL)库。
在本文撰写之时,jQuery Mobile 框架处于 Alpha 2 version (v1.0a2)。代码处于草案阶段,可能会更改。但是,现有的框架非常坚固。鉴于在 alpha 发布中就有一个令人印象深刻的组件集可用,jQuery Mobile 有望成为一个优秀的移动 web 应用程序开发框架和工具集。
jQuery Mobile 的基本特性包括:
一般简单性此框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript。持续增强和优雅降级尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备,比如那些没有 JavaScript 支持的设备,尽量提供最好的体验。AccessibilityjQuery Mobile 在设计时考虑了访问能力,它拥有 Accessible Rich Internet Applications (WAI-ARIA) 支持,以帮助使用辅助技术的残障人士访问 web 页面。小规模jQuery Mobile 框架的整体大小比较小,JavaScript 库 12KB,CSS 6KB,还包括一些图标。主题设置此框架还提供一个主题系统,允许您提供自己的应用程序样式。
Jquery Mobile 开发环境搭建
使用jQueryMobile的第一步,先创建一个html页面,并在head标签中加入以下内容:
正如你在代码中看到的,jQueryMobile是jQuery的一个扩展。目前来说,压缩后的jQuerymobile仅12Kb。
上面的代码均来自jQuery的CDN服务器,css文件中也包含必需的图片链接,如果你需要在你自己的服务器上运行,可以下载相关的文件解压缩后部署到你的服务器。
Jquery Mobile开发示列一:
在创建第一个jQueryMobile页面时你需要创建三块基本内容,下面的推荐模版展示了这一过程,你可以在未来的项目中使用它:
效果截图:
代码说明:
要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容
CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的页面基本模板中,引入这三个元素采用的是jQuery CDN方式,开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
在”page”div中,还可以包含”header”, ”content”, ”footer”的div元素,这些元素都是可选的,但至少要包含一个 “content”div。
Jquery Mobile开发示列二:多个页面切换
有一种建立在一个 HTML页面基础之上的页面结构,即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面,就可以实现页面平滑切换的客户体验。
正如所见,上面的代码中包含了两个”page”:主页(id为home)和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about,about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”
Jquery Mobile简介:
jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,允许您开发跨智能电话和平板电脑工作的移动 web 应用程序。jQuery Mobile 框架构建于 jQuery 内核之上,提供几个功能,包括 HTML 和 XML 文档对象模型(DOM)的操控、处理事件、使用 Ajax 执行服务器通信、以及用于 web 页面的动画和图像效果。这个移动框架本身是独立于 jQuery 内核(缩小或压缩后大约 25KB)的一个额外下载(缩小或压缩后大约 12KB)。与 jQuery 框架的其余部分一样,jQuery
Mobile 是一个免费的、双许可(MIT 和 GPL)库。
在本文撰写之时,jQuery Mobile 框架处于 Alpha 2 version (v1.0a2)。代码处于草案阶段,可能会更改。但是,现有的框架非常坚固。鉴于在 alpha 发布中就有一个令人印象深刻的组件集可用,jQuery Mobile 有望成为一个优秀的移动 web 应用程序开发框架和工具集。
jQuery Mobile 的基本特性包括:
一般简单性此框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript。持续增强和优雅降级尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备,比如那些没有 JavaScript 支持的设备,尽量提供最好的体验。AccessibilityjQuery Mobile 在设计时考虑了访问能力,它拥有 Accessible Rich Internet Applications (WAI-ARIA) 支持,以帮助使用辅助技术的残障人士访问 web 页面。小规模jQuery Mobile 框架的整体大小比较小,JavaScript 库 12KB,CSS 6KB,还包括一些图标。主题设置此框架还提供一个主题系统,允许您提供自己的应用程序样式。
Jquery Mobile 开发环境搭建
使用jQueryMobile的第一步,先创建一个html页面,并在head标签中加入以下内容:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
正如你在代码中看到的,jQueryMobile是jQuery的一个扩展。目前来说,压缩后的jQuerymobile仅12Kb。
上面的代码均来自jQuery的CDN服务器,css文件中也包含必需的图片链接,如果你需要在你自己的服务器上运行,可以下载相关的文件解压缩后部署到你的服务器。
Jquery Mobile开发示列一:
在创建第一个jQueryMobile页面时你需要创建三块基本内容,下面的推荐模版展示了这一过程,你可以在未来的项目中使用它:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1></div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p></div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4></div><!-- /header --></div><!-- /page -->
效果截图:
代码说明:
要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容
CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的页面基本模板中,引入这三个元素采用的是jQuery CDN方式,开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
在”page”div中,还可以包含”header”, ”content”, ”footer”的div元素,这些元素都是可选的,但至少要包含一个 “content”div。
div dat-role=”header”></div> | 在页面的顶部建立导航工具栏,用于放置标题和按钮(典型的至少要放一个“返回”按钮,用于返回前一页)。通过添加额外的属性 data-position=”fixed”,可以保证头部始终保持屏幕的顶部 |
<div dat-role=”content”></div> | 包含一些主要内容,例如文本内容,图像,按钮,列表,表单等等 |
<div dat-role=”footer”></div> | 在页面的底建立工具栏,添加一些功能按钮 为了确保它始终保持在页面的底部,可以给其加上data-position=”fixed” 属性 |
有一种建立在一个 HTML页面基础之上的页面结构,即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面,就可以实现页面平滑切换的客户体验。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile: Pages within Pages</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"><h1>Home</h1></div> <div data-role="content"><p><a href="#about">About this app</a></p></div> </div> <div data-role="page" id="about"> <div data-role="header"><h1>About This App</h1></div> <div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div> </div> </body> </html>
正如所见,上面的代码中包含了两个”page”:主页(id为home)和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about,about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”
相关文章推荐
- Jquery Mobile学习教程之预加载与页面缓存
- 学校学习ios教程笔记,第八节初识ios控件中的UILable与UITextField
- 学校学习ios教程笔记,第十节初识ios中的导航栏控制器页面跳转(UINavigationController)和模态
- 学校学习ios教程笔记,第十二节初识ios控制器中的标签视图控制器
- Jquery Mobile 学习教程之页面脚本
- jQuery Mobile学习教程系列文章推荐
- Jquery Mobile学习教程之对话框
- 学校学习ios教程笔记,第十一节初识ios页面中的界面传值
- Jquery Mobile学习教程之四 页面过渡
- Android 学习教程(二) 平台结构初识
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- Jquery mobile学习教程之Jquery mobile 二 页面结构
- 【TensorFlow深度学习框架教程三】初识TensorFlow和神经网络
- 韩顺平_php从入门到精通_视频教程_第3讲_符号实体_url说明_超链接_发送电邮_学习笔记_源代码图解_PPT文档整理
- Swift教程_通过改造官方Sample学习Swift(二)_Swift基础(简单值、控制流、方法和闭包)
- android教程学习 第12讲:lookup_keyword这个函数的实现
- 动态规划学习系列——数位DP(初识)
- CityMaker学习教程06 数据的发布
- 数学分析教程 第十四章学习感受
- RabbitMQ学习之:(一)初识、概念及心得