jQuery Mobile中文手册

jQueryMobile开发入门手册——入门篇作者：张勇辉更新日期2010-11-03Blog：http://www.uedcool.com目录jQueryMobile开发入门手册——入门篇...............................................................................1概述...........................................................................................................................................3框架特性...............................................................................................................................3版本约定...............................................................................................................................3初始配置...............................................................................................................................4页面声明...............................................................................................................................4技术理论...................................................................................................................................4WebKit和HTML5...............................................................................................................4移动Web应用程序的考虑...............................................................................................5一般站点的呈现...................................................................................................................5组件...........................................................................................................................................7页面.......................................................................................................................................7模态对话框...........................................................................................................................8工具条...................................................................................................................................9标题容器...........................................................................................................................9页脚容器.........................................................................................................................10导航.................................................................................................................................11按钮.....................................................................................................................................11表单应用.............................................................................................................................13列表应用.............................................................................................................................14概述此文档是基于jQueryMobile框架的移动设备Web应用开发知识而编制，目的是为了方便开发人员快速的掌握此框架的开发应用，其中包含了框架的基础应用知识和在团队协作开发中的常规约定。框架特性JQueryMobile以“WriteLess,DoMore”作为目标，为所有的主流移动操作系统平台提供了高度统一的UI框架：jQuery的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的Web应用程序，而不必为每个移动设备编写独特的应用程序或操作系统。jQueryMobile目前支持的移动平台有苹果公司的iOS（iPhone，ipad，iPodTouch），Android，BlackBerryOS6.0，惠普WebOS，Mozilla的Fennec和OperaMobile。今后，将增加包括WindowsMobile，Symbian和MeeGo在内的更多移动平台。根据jQueryMobile项目网站，目前jQueryMobile的特性包括：•jQuery核心——与jQuery桌面版一致的jQuery核心和语法，以及最小的学习曲线。•兼容所有主流的移动平台——iOS、Android、BlackBerry，PalmWebOS、Symbian、WindowsMobile、BaDa、MeeGo以及所有支持HTML的移动平台。•轻量级alpha版本的jQueryMobile其JavaScript大小仅为12KB，CSS文件也只有6KB大小。•标记驱动的配置jQueryMobile采用完全的标记驱动而不需要JavaScript的配置。•渐进增强jQueryMobile采用完全的渐进增强原则：通过一个全功能的HTML网页，和额外的JavaScript功能层，提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript，基于jQueryMobile的移动应用程序仍能正常的使用。•自动初始化通过使用mobilize()函数自动初始化页面上的所有jQuery部件。•无障碍包括WAI-ARIA在内的无障碍功能以确保页面能在类似于VoiceOver等语音辅助程序和其他辅助技术下正常使用。•简单的API为用户提供鼠标、触摸和光标焦点简单的输入法支持。•强大的主题化框架jQueryMobile提供强大的主题化框架和UI接口。版本约定为了避免由于版本不统一等引发的问题，在此次撰写中对框架的版本进行了如下约定：jQuery核心：V1.50Mobile核心：V1.0ALPHA3初始配置在head中按顺序加入框架的引用，注意加载的顺序:linkrel=stylesheettype=text/csshref=jquery.mobile-1.0a2.min.cssscriptsrc=jquery-1.4.4.min.js/script!--这里加入项目中其他的引用--scriptsrc=jquery.mobile-1.0a2.min.js/scriptps:建议在meta中加入'”charset=utf-8”的声明，避免出现乱码和响应方面的问题metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/或者metacharset=utf-8/页面声明建议在页面中使用HTML5标准的页面声明和标签，因为移动设备浏览器对HTML5标准的支持程度要远远优于PC设备，因此使用简洁的HTML5标准可以更加高效的进行开发，免去了因为声明错误出现的兼容性问题。HTML5页面基础元素：!DOCTYPEHTMLhtmllang=en-USheadtitle标题/titlemetacharset=UTF-8/headbody/body/html技术理论WebKit和HTML5WebKit是一种浏览器引擎，支撑着iPhone内的MobileSafari浏览器以及Android内的浏览器背后的技术。WebKit也在其他的移动环境内有自己的用武之地，但是我们还是将我们的讨论集中于iPhone和Android平台。WebKit是一个开源项目，其起源可追溯到KDesktopEnvironment(KDE)。WebKit项目催生了面向移动设备的现代Web应用程序。虽然设备本身的能力和形态因素都相当重要，但移动用户最热衷的仍然是内容。如果移动用户可用的内容只是Internet用户可用内容的一个很小的子集，那么用户体验充其量也只能划分为二等。我们当中的大多数人都更希望生活是连贯的—如果我们在家中的笔记本上访问了一个网站，我们同样希望在火车上旅行时仍然访问到同样的内容。内容是最好的应用程序。不管我们身在何处、在做什么，我们都想要访问到我们的数据。WebKit让iPhone和Android平台上可以有丰富的内容。有一点很值得注意，即WebKit还应用在了桌面的Safari浏览器内，该浏览器是MacOSX平台默认的浏览器。不管我们讨论的是桌面版本还是iPhone或Android上的浏览器引擎，WebKit均优先支持HTML和CSS特性。实际上，WebKit还支持尚未被其他浏览器采纳的一些CSS样式—这些特性正在得到HTML5规范的考虑。HTML5规范是一个技术草案集，涵盖了各种基于浏览器的技术，包括客户端SQL存储、转变、转型、转换等。HTML5的出现已经有些时间了，虽然尚未完成，但是一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后，Web应用程序的简陋开端将成为永久的记忆。Web应用程序开发将成为主导—并且不只