第18章jQueryMoblie和jQueryUI的应用要点分析.pptVIP

jQuery Mobile是jQuery在手机和平板电脑等移动设备上应用的版本。jQuery Mobile不仅给主流移动平台带来jQuery Mobile核心库，而且会发布一个完整统一的jQuery移动UI框架。 18.1.1　jQuery Moblie概述 随着移动互联网的快速发展，适用于移动设备的网页非常需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。jQuery Mobile支持全球主流的移动应用平台。 jQuery Mobile是一个基于HTML 5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统与前端开发框架，可以运行在所有智能手机、平板电脑和桌面设备上。不需要为每一个移动设备或者操作系统单独开发应用，设计者可以通过jQuery Mobile框架设计一个高度响应式的网站或应用运行于所有流行的智能手机、平板电脑和桌面系统。 jQuery Mobile是创建移动Web应用程序的框架。 jQuery Mobile适用于所有流行的智能手机和平板电脑。 jQuery Mobile使用HTML 5和CSS 3通过尽可能少的脚本对页面进行布局。 18.1.2　创建jQuery Moblie页面 在Dreamweaver CC中提供对jQuery Mobile页面开发的支持，在Dreamweaver CC中可以通过多种方法来创建jQuery Mobile页面。 执行“文件新建”命令，弹出“新建文档”对话框，选择“启动器模板”选项卡，在“示例页”列表中可以看到Dreamweaver CC提供了3种jQuery Mobile页面示例. Query Mobile（CDN）：选择该选项所创建的jQuery Mobile页面，页面中所使用的jQuery Mobile库资源将使用远程服务器上所提供的库资源文件。 jQuery Mobile（本地）：选择该选项所创建的jQuery Mobile页面，将自动将所需要的jQuery Mobile库资源文件复制本站点根目录中。 包含主题的jQuery Mobile（本地）：选择该选项所创建的jQuery Mobile页面，与选择“jQuery Mobile（本地）”选项所创建的页面基本相同，并且还可以使用本地计算机上的文件和主题组成的CSS文件。 除了可以通过“新建文档”对话框直接创建jQuery Mobile页面外，还可以新建一个空白的HTML页面，光标置于页面中，单击“插入”面板上的jQuery Mobile选项卡中的“页面”按钮，如图18-4所示。弹出“jQuery Mobile文件”对话框。 18.1.3　jQuery Moblie基本页面结构 在使用jQuery Mobile，首先在开发的Web页面中包含3个jQuery Mobile库文件，分别是jquery.mobile-1.0a3.min.css、jquery-1.6.4.min.js和jquery.mobile-1.0.min.js。 可以看到页面中的内容都是封装在Div标签中并在标签中加入data-role属性设置，这样jQuery Mobile就会知道哪些内容需要处理。 在设置page属性的Div中还包含了属性名为header、content和footer的3个Div元素，这些元素都是可选的，但至少在jQueryMobile页面中需要包含content属性的Div。 div data-role=”header”/div：在jQuery Mobile页面顶部创建导航工具栏，用于放置标题和按钮，例如放置“返回”按钮，用于返回到前一页。 div data-role=”content”/div：在该部分包含一些主要内容，例如文本内容、图像、按钮、列表、表单等页面元素。 div data-role=”footer”/div：在jQuery Mobile页面底部创建工具栏，可以在该部分添加一些功能按钮。如果需要确保该部分始终位于jQuery Mobile页面的底部，可以在该Div中添加data-position=”fixed”属性设置代码。 　在Dreamweaver CC中的“插入”面板中新增了jQuery Mobile选项卡，在该选项卡中提供了制作适用于移动设备网页中相应的jQuery Mobile对象。 18.2.1　页面 单击“插入”面板中的jQuery Mobile选项卡中的“页面”按钮，弹出“jQuery Mobile文件”对话框。 18.2.2　列表视图 光标置于jQuery Mobile页面中需要插入列表的位置，单击“插入”面板中的jQuery Mobile选项卡中的“列表视图”按钮，弹出“列表视图”对话框。 在网页中插入jQuery Mobile列表视图对象时，弹出“列表视图