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

最新推荐文章于 2021-06-10 14:31:32 发布

在奋斗的大道

最新推荐文章于 2021-06-10 14:31:32 发布

阅读量1.0k

点赞数

分类专栏： Jqury mobile学习教程

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18839941

版权

Jqury mobile学习教程专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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”，可以保证头部始终保持屏幕的顶部

包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等

在页面的底建立工具栏，添加一些功能按钮

为了确保它始终保持在页面的底部，可以给其加上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”

在奋斗的大道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile学习教程之初识Jquery mobile 一

Jquery Mobile简介：jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，允许您开发跨智能电话和平板电脑工作的移动 web 应用程序。jQuery Mobile 框架构建于 jQuery 内核之上，提供几个功能，包括 HTML 和 XML 文档对象模型（DOM）的操控、处理事件、使用 Ajax 执行服务器通信、以及用于 web 页面的动画和图像效果。这个
复制链接

扫一扫