技术开发 频道

jQuery Mobile中文手册:开发入门

  【IT168技术】jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的 Web 应用程序,而不必为每个移动设备编写独特的应用程序或操作系统。

  框架特性

  jQuery Mobile 目前支持的移动平台有苹果公司的 iOS(iPhone,ipad,iPod Touch),Android,BlackBerry OS 6.0,惠普 webOS,Mozilla的Fennec和Opera Mobile。今后,将增加包括Windows Mobile,Symbian 和 MeeGo 在内的更多移动平台。

  根据 jQuery Mobile 项目网站,目前 jQuery Mobile 的特性包括:

  jQuery 核心——与 jQuery 桌面版一致的 jQuery 核心和语法,以及最小的学习曲线。

  兼容所有主流的移动平台——iOS、Android、BlackBerry,Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo 以及所有支持 HTML 的移动平台。

  轻量级 alpha 版本的 jQuery Mobile 其 JavaScript 大小仅为 12KB , CSS 文件也只有 6KB 大小。

  标记驱动的配置 jQuery Mobile 采用完全的标记驱动而不需要 JavaScript 的配置。

  渐进增强 jQuery Mobile 采用完全的渐进增强原则:通过一个全功能的 HTML 网页,和额外的 JavaScript 功能层,提供优异的在线体验。这意味着即使移动浏览器不支持 JavaScript,基于 jQuery Mobile 的移动应用程序仍能正常的使用。

  自动初始化通过使用 mobilize()函数自动初始化页面上的所有 jQuery 部件。

  无障碍 包括 WAI-ARIA 在内的无障碍功能以确保页面能在类似于 VoiceOver 等语音辅助程序和其他辅助技术下正常使用。

  简单的 API 为用户提供鼠标、触摸和光标焦点简单的输入法支持。

  强大的主题化框架 jQuery Mobile 提供强大的主题化框架和 UI 接口。

  版本约定

  为了避免由于版本不统一等引发的问题,在此次撰写中对框架的版本进行了如下约定 :

  jQuery 核心:V 1.50

  Mobile 核心:V 1.0 ALPHA 3

  初始配置

  在中按顺序加入框架的引用,注意加载的顺序:

1.    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0a2.min.css">  
2.    <script src="jquery-1.4.4.min.js"></script>  
3.    <!-- 这里加入项目中其他的引用 -->  
4.    <script src="jquery.mobile-1.0a2.min.js"></script>

  ps:建议在meta中加入'”charset=utf-8”的声明,避免出现乱码和响应方面的问题

1.    <meta  http-equiv="Content-Type"  content="text/html;  charset=utf-8"  /> 或 者 <meta charset="utf-8" />

  页面声明

  建议在页面中使用 HTML5 标准的页面声明和标签,因为移动设备浏览器对 HTML5 标准的支持程度要远远优于 PC 设备,因此使用简洁的 HTML5 标准可以更加高效的进行开发,免去了因为声明错误出现的兼容性问题。

  HTML5 页面基础元素:

1.    <!DOCTYPE HTML>  
2.    <html lang="en-US">  
3.    <head>  
4.    <title>
5.    标题
6.      </title>  
7.    <meta charset="UTF-8">  
8.      
9.    </head>  
10.    <body>  
11.    </body>  
12.    </html>
1
相关文章