jquery mobile学习教程之初识Jquery mobile 一分析

熊孩纸 阅读:237 2021-03-31 23:33:08 评论:0


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 支持的设备,尽量提供最好的体验。
Accessibility
jQuery 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” 属性

Jquery Mobile开发示列二:多个页面切换

 有一种建立在一个 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”

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号