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

墨蓝 2023-10-16 19:32 71阅读 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标签中加入以下内容：

正如你在代码中看到的，jQueryMobile是jQuery的一个扩展。目前来说，压缩后的jQuerymobile仅12Kb。

上面的代码均来自jQuery的CDN服务器，css文件中也包含必需的图片链接，如果你需要在你自己的服务器上运行，可以下载相关的文件解压缩后部署到你的服务器。

**Jquery Mobile开发示列一：**

在创建第一个jQueryMobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它：

效果截图：

![Center][]

代码说明：

要使用 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方式，开发人员也可以[下载][Link 1]这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入*data-role=”page”*属性。 这样jQuery Mobile就会知道哪些内容需要处理。

在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。

<table> 
 <tbody> 
  <tr> 
   <td> <p><span style="font-family:Verdana; font-size:12px">div dat-role=”header”&gt;&lt;/div&gt;</span></p> </td> 
   <td> <p><span style="font-family:Verdana; font-size:12px">在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性</span></p> <p><span style="font-family:Verdana; font-size:12px">data-position=”fixed”，可以保证头部始终保持屏幕的顶部</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:Verdana; font-size:12px">&lt;div dat-role=”content”&gt;&lt;/div&gt;</span></p> </td> 
   <td> <p><span style="font-family:Verdana; font-size:12px">包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:Verdana; font-size:12px">&lt;div dat-role=”footer”&gt;&lt;/div&gt;</span></p> </td> 
   <td> <p><span style="font-family:Verdana; font-size:12px">在页面的底建立工具栏，添加一些功能按钮</span></p> <p><span style="font-family:Verdana; font-size:12px">为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性</span></p> </td> 
  </tr> 
 </tbody> 
</table>

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”

[Center]: https://img-blog.csdn.net/20140128112506765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Link 1]: http://jquerymobile.com/download