jQuery Mobile简介:统一接口工具-jquery mobile ui

很多开发者都积极寻找高效的方法，使得构建的基于移动的应用程序能在多种设备上运行。在本文中，将率先向大家介绍jQuery中的一个新的项目：jQuery Mobile。虽然它现在还在Alpha版本，但其强大的功能还是值得我们先睹为快。

jQuery Mobile旨在为开发者提供一系列统一的接口工具,这些工具可以确保能在不同的移动设备的浏览器中得到充分的兼容。jQuery Mobile基于HTML 5,jQuery和CSS，目的为了提供一个丰富交互性强的接口去兼容各种设备，同时允许经过少量的修改就能运行在一些兼容性方面有冲突的设备中。这一特性使得开发者可以在标准的桌面浏览器中就能进行各类型的测试，当然，在投入到真实生产环境前，应该是在不同的移动设备上进行测试的。

jQuery 的移动策略可以简单的总结为：创建一个在常见智能手机/平板电脑浏览器领域内能统一用户界面的顶级JavaScript库。本文是介绍jQuery Mobile项目的文章，但读者要注意的是，在本文完成之际，jQuery Mobile项目还是处在Alpha 2阶段，在未来的一段日子可能项目本身还会发生些改变。所以在本文中学到的一些语法和API，在将来的正式版本中有可能会发生变化。

我们的最关键的麻烦在于我们所关注的种类繁多的移动平台。我们已经在引入jQuery支持到所有的(手机/桌面)浏览器的工作中付出了很多努力，这证明了我们完全有能力做好，并且现在jQuery也已经占有了一定的市场份额。在这种情况下，我们将手机网页浏览器和桌面浏览器的jQuery开发做同等重要的对待。

为了使这种广泛的手机支持成为可能，所有在jQuery Mobile中的页面都是基于简洁，语义化的HTML来构建，这样可以确保能兼容于大部分支持web浏览的设备。在这些设备中解析css和javascript的过程中，jQuery Mobile使用了先进的技术并借助jQuery和CSS本身的能力，以一种不明显的方式将语义化的页面转化成富客户端页面。一些简单易操作的特性比如WAI-ARIA通过框架已经紧密集成进来，以给屏幕阅读器或者其他辅助设备(主要指手持设备)提供支持。

jQuery #p#

jQuery Mobile的页面结构

jQuery Mobile的页面结构看起来跟典型的HTML文档是一样的，包括了页面头部，主体部分和footer。在HTML中的标签中，你会看到引用的jQuery库和jQuery Mobile库和jQuery Mobile的CSS文件，这些都可以在jQuery Mobile的网站下载，下面是一个简单的例子：

在桌面浏览器或者手机浏览器上运行，会发现是如下图所示的效果：

<html> 
<head> 
<meta charset="utf-8"> 
<title>W.J. Gilmore, LLC</title>  
<link rel="stylesheet"  
  href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
<link rel="apple-touch-icon" href="img/tutsTouchIcon.png" /> 
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" 
  src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
  <div data-role="header" id="home"> 
    <h1>WJGilmore, LLC</h1> 
  </div> 
  <div data-role="content">     
    <p>Check back regularly for the latest information about Jason's books!</p>         
  </div> 
  <div data-role="footer"> 
    <h1>Copyright © 2010 W.J. Gilmore, LLC</h1> 
  </div> 
</div> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

jQuery Mobile简介:统一接口工具

正如你所看到的，jQuery Mobile自动使用CSS样式化了头部和尾部，是通过data-role属性去实现的。#p#

链接到内部页面

一般，页面是由许多不同的页面所组成的。由于移动应用的页面一般都是比较简单的，所以可以很容易在一个单独的页面中进行管理，在这个页面中，可以设置多个DIV层，一个紧跟着另外一个，为了在不同的内部页面之间实现导航，可以使用象HTML中的锚点的语法，下面是一个例子:

<div data-role="page" id="home"> 
... 
  <div data-role="content">     
    <p><a href="#epwzf">Easy PHP Websites with the Zend Framework</a></p>         
  </div> 
... 
</div> 
 
<div data-role="page" id="epwzf"> 
 
  <div data-role="header"> 
  <h1>WJGilmore, LLC</h1> 
  </div> 
 
  <div data-role="content">     
  <strong>Easy PHP Websites with the Zend Framework</strong><br /> 
  <p> 
  <em>Easy PHP Websites with the Zend Framework</em> is the ultimate 
  introduction to the popular Zend Framework, covering practical topics 
  including Doctrine, Zend_Db, Zend_Test, automated deployment, and much 
  more! 
  </p> 
  </div> 
 
  <div data-role="footer"> 
  <h1>Copyright © 2010 W.J. Gilmore, LLC</h1> 
  </div> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

你会发现，在链接中，通过使用锚点的方法，可以跳转到ID为epwzf的DIV层。下图是实际的效果，注意的是,jQuery Mobile为其生成了自动的返回的按钮。

jQuery Mobile简介:统一接口工具 #p#

使用主题

在使用HTML的标准语法元素去构建移动应用时，jQuery Mobile最有趣的特征是它可以增强和美化HTML页面的效果，使到它能适合移动应用的样式。比如象下面的一段普通的HTML：

在普通的浏览器中，可以看到的效果如下图：

jQuery Mobile简介:统一接口工具

如果你要需要在移动设备中，看到很好的效果的话，只需要在

中增加data-role="listview"即可,效果如下图:

jQuery Mobile简介:统一接口工具

当然,还有能做到更好的办法,你可以使用jQuery Mobile主题包中的任意一个样式主题,只需要在元素中加入属性data-theme="X"即可(其中X指的是主题的包名),比如设置为data-theme="a"即可看到如下图的效果:

jQuery Mobile简介:统一接口工具

目前,很奇怪的是对主题样式以字母这样的形式命名,估计是目前项目团队的权宜之计吧,相信在不久的将来会有所改进的。

总结：

目前jQuery Mobile项目还处在alpha 2版本阶段，还有一些不足和存在的问题。但由于开发者对jQuery是十分熟悉的，因此在开发时成本不高，易于上手，而且很容易将原来基于WEB的应用通过jQuery Mobile项目进行改造过来。