第18章 jQuery Moblie和jQuery UI的应用

1、jQuery Mobile是jQuery在手机和平板电脑等移动设备上应用的版本。jQuery Mobile不仅给主流移动平台带来jQuery Mobile核心库，而且会发布一个完整统一的jQuery移动UI框架。 18.1.1jQuery Moblie概述概述随着移动互联网的快速发展，适用于移动设备的网页非常需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。jQuery Mobile支持全球主流的移动应用平台。jQuery Mobile是一个基于HTML 5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统与前端开发框架，可以运行在所有智能手机、平板电脑和桌面设备上。

2、不需要为每一个移动设备或者操作系统单独开发应用，设计者可以通过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页面。执行

3、“文件新建”命令，弹出“新建文档”对话框，选择“启动器模板”选项卡，在“示例页”列表中可以看到Dreamweaver CC提供了3种jQuery Mobile页面示例. Query Mobile（CDN）：选择该选项所创建的jQuery Mobile页面，页面中所使用的jQuery Mobile库资源将使用远程服务器上所提供的库资源文件。jQuery Mobile（本地）：选择该选项所创建的jQuery Mobile页面，将自动将所需要的jQuery Mobile库资源文件复制本站点根目录中。包含主题的jQuery Mobile（本地）：选择该选项所创建的jQuery Mobile页面，与选择

4、“jQuery Mobile（本地）”选项所创建的页面基本相同，并且还可以使用本地计算机上的文件和主题组成的CSS文件。除了可以通过“新建文档”对话框直接创建jQuery Mobile页面外，还可以新建一个空白的HTML页面，光标置于页面中，单击“插入”面板上的jQuery Mobile选项卡中的“页面”按钮，如图18-4所示。弹出“jQuery Mobile文件”对话框。18.1.3jQuery Moblie基本页面结构基本页面结构在使用jQuery Mobile，首先在开发的Web页面中包含3个jQuery Mobile库文件，分别是jquery.mobile-1.0a3.min.css、

5、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。：在jQuery Mobile页面顶部创建导航工具栏，用于放置标题和按钮，例如放置“返回”按钮，用于返回到前一页。：在该部分包含一些主要内容，例如文本内容、图像、按钮、列表

6、、表单等页面元素。：在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 Mobi

7、le页面中需要插入列表的位置，单击“插入”面板中的jQuery Mobile选项卡中的“列表视图”按钮，弹出“列表视图”对话框。在网页中插入jQuery Mobile列表视图对象时，弹出“列表视图”对话框，在该对话框中可以设置所需要插入的列表的效果和选项。列表类型：该选项用于设置所插入的列表类型，在该选项的下拉列表中包括“无序”和“有序”两个选项，分别对应无序列表和有序列表。项目：该选项用于设置所插入的列表项的数目，默认为3，在该选项的下拉列表中可以选择所需要插入的列表项的数目。凹入：选中该复选框，则插入的列表项将以缩进的方式居中显示在布局中。文本说明：选中该复选框，将为所插入的各列表项添加文

8、字说明内容。文本气泡：选中该复选框，可以在各列表项的右侧显示圆形的数字气泡测边：选中该复选框，可以在各列表项的右侧显示侧边信息内容。拆分按钮：选中该复选框，可以将各列表项右侧的按钮拆分为独立按钮形式。拆分按钮图标：只有选中“拆分按钮”复选框，该选项才可用，通过该选项可以设置执行出来的按钮图标，可以在该选项的下拉列表中选择预设的按钮图标样式。18.2.3布局网格布局网格光标置于jQuery Mobile页面中需要插入布局网格的位置，单击“插入”面板中的jQuery Mobile选项卡中的“布局网格”按钮，如图18-26所示。弹出“布局网格”对话框。18.2.4可折叠区块可折叠区块光标置于jQue

9、ry Mobile页面中需要插入可折叠区块的位置，单击“插入”面板中的jQuery Mobile选项卡中的“可折叠区块”按钮，即可在jQuery Mobile页面中插入默认的可折叠区块元素。18.2.5表单元素表单元素在“插入”面板中的jQuery Mobile面板中还提供了多种应用于jQuery Mobile页面中的表单元素，单击需要的表单元素按钮，即可在jQuery Mobile页面中插入相应的表单元素。本节将通过一个表单页面的制作向读者介绍如何制作jQuery Mobile表单页面。了解了有关jQuery Mobile的相关基础知识，并且掌握了Dreamweaver CC中提供的jQue

10、ry Mobile页面元素的基本使用方法，本节将通过一个jQuery Mobile页面实例的制作，使读者能够更轻松的掌握jQuery Mobile网站页面的制作方法。课堂案例课堂案例制作制作jQuery Mobile表单页表单页面面课堂案例课堂案例制作制作jQuery Mobile网站页网站页面面课堂案例：制作jQuery Mobile表单页面最终文件：光盘最终文件第18章18-2-5.html视频：光盘视频第18章18-2-5.swf课堂案例：制作jQuery Mobile网站页面最终文件：光盘最终文件第18章18-3.html视频：光盘源文件第18章18-3.swfjQuery UI是jQ

11、uery官方推出的配合jQuery使用的用户界面组件集合。在Dreamweaver CC中集成了jQuery UI的功能，网页设计人员可以通过jQuery UI构建更加丰富的网页效果。jQuery UI可以简单的理解为网页中的某一个页面元素，通过使用jQuery UI组件可以轻松地实现更加丰富的网页交互效果，jQuery UI组件主要由以下几个部分组成。（1）结构，用来定义jQuery UI组件结构组成的HTML代码块。（2）行为，用来控制jQuery UI组件如何响应用户启动事件的JavaScript脚本。（3）样式，用于设置jQuery UI组件外观的CSS样式。通过Dreamweaver

12、在网页中插入jQuery UI组件时，Dreamweaver会自动将相关的文件链接到网页中，以便jQuery UI组件中包含该页面的功能和样式。jQuery UI中的每个组件与唯一的CSS和JavaScript文件相关联。在JavaScript脚本文件中实现了jQuery UI组件的相关功能，而在CSS样式表文件中设置了jQuery UI组件的外观样式。在Dreamweaver CC中集成了jQuery UI组件的功能，在Dreamweaver CC的“插入”面板中新增了jQuery UI选项卡，在该选项卡中提供了相应的jQuery UI组件。18.5.1AccordionjQuery UI

13、Accordion是一个由多个面板组成的折叠式小组件，可以实现每个面板的展开和折叠效果。如果用户需要在一个固定大小的页面空间内实现多个内容的展示时，jQuery UI Accordion组件所实现的功能非常实用。18.5.2TabsjQuery UI Tabs组件是一组水平方向上的选项卡式面板，可以将较多的内容分别放置在不同的选项卡中，单击相应的选项卡可以切换到该选项卡内容的显示状态。如果需要在网页中插入jQuery UI Tabs组件，可以单击“插入”面板上的jQuery UI选项卡中的Tabs按钮，即可在网页中插入jQuery UI Tabs组件。18.5.3DatepickerjQuer

14、y Ui Datepicker组件是一个可以选择日期的组件，该组件的配置非常灵活，用户可以自定义其展示的方式，包括日期格式、语言、限制选择日期范围、添加相关的按钮等。如果需要在网页中插入jQuery UI Datepicker组件，可以单击“插入”面板上的jQuery UI选项卡中的Datepicker按钮，即可在网页中插入jQuery UI Datepicker组件。18.5.4ProgressbarjQuery UI Progressbar组件是一个显示进度条的组件，通过该组件可以实现网页加载进度条的效果。如果需要在网页中插入jQuery UI Progressbar组件，可以单击“插入”

15、面板上的jQuery UI选项卡中的Progresssbar按钮，即可在网页中插入jQuery UI Progressbar组件。18.5.5DialogjQuery Ui Dialog组件可以在网页中实现一个浮动弹出信息窗口，该信息显示窗口可以拖动至网页任意的位置，并且可以通过通动的方式调整该弹出信息窗口的大小。18.5.6AutocompletejQuery UI Autocomplete组件可以实现自动完成表单文本域中内容填写的功能，用户在表单文本域中输入前向个字母或汉字的时候，该组件就能从存放数据的文本或数据库里将所有以这些字母或汉字开头的数据提供给用户，供用户选择，提供方便。18.5

16、.7SliderjQuery UI Slider组件可以在网页中创建一个优雅的滑动条效果。使用jQuery UI Slider组件，可以计算出滑块在滑动过程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0100。18.5.8ButtonjQuery UI Button组件可以在网页中插入一个按钮，该按钮带有悬停和激活状枋的样式，可以通过该按钮来加强标准表单元素的功能。如果需要在网页中插入jQuery UI Button组件，可以单击“插入”面板上的jQuery UI选项卡中的Button按钮，即可在网页中插入jQuery UI Button组件。18.5.9Buttons

17、etjQuery UI Buttonset组件可以在网页中插入一个分组的按钮，如果在网页中需要使用一组按钮时，可以考虑使用该组件。如果需要在网页中插入jQuery UI Buttonset组件，可以单击“插入”面板上的jQuery UI选项卡中的Buttonset按钮，即可在网页中插入jQuery UI Buttonset组件。18.5.10Checkbox ButtonsjQuery UI Checkbox Buttons组件可以在网页中插入一个外观显示为按钮的复选框组，可以通过单击组中的按钮中选择相应的复选框选项，可以选择多个。如果需要在网页中插入jQuery UI Checkbox Bu

18、ttons组件，可以单击“插入”面板上的jQuery UI选项卡中的Checkbox Buttons按钮，即可在网页中插入jQuery UI Checkbox Buttons组件。18.5.11Radio ButtonsjQuery UI Checkbox Buttons组件可以在网页中插入一个外观显示为按钮的单选按钮组，可以通过单击组中的按钮中选择相应的单选选项，只能选择其中一个。18.6.1设置设置Accordion组件属性组件属性如果要对文件进行存回和取出操作，前提是当前站点定义了远程服务器，并且激活了取出和存回功能。ID：在该选项文本框中可以为Accordion组件设置ID名称。默认情

19、况下，插入到网页中的Accordion组件会以Accordion1、Accdion2的命名规则进行命名。面板：在该选项的列表中列出了所选中的Accordion组件中的各面板，单击其右侧的“添加面板”按钮 ，即可添加面板；选中某个面板，单击列表右侧的“删除面板”按钮 ，即可将选中的面板删除；另外，还可以调整面板的前后顺序。Active：该选项用于设置默认情况下，Accordion组件需要显示的面板，以数字0、1、2.进行设置，0代表第1个面板，如果设置该选项为1，则表示默认显示第2个面板。通过jQuery UI Accordion组件可以将大量内容放置在一个紧凑的空间中，从而达到为网页节省空间的

20、作用。浏览者只需要单击该组件的选项卡，就可以显示或隐藏该面板中的内容，非常方便。当浏览者单击不同的选项卡时，Accordion组件的面板会相应展开或收缩。Event：该选项用于设置展开Accordion组件面板的触发器，在该选项的下拉列表中包括click和mouseover两个选项。设置该选项为click，表示单击面板时显示该面板内容；设置该选项为mouseover，表示鼠标移至该面板上时显示该面板内容。Height Style：该选项用于设置Accordion组件中面板内容的高度，在该选项的下拉列表中包括auto、fill和content3个选项。设置该选项为auto，表示面板中内容高度的最

21、大值为面板内容的高度；设置该选项为fill，表示面板内容高度为默认高度，如果内容高度超出默认高度将显示滚动条；设置该选项为content，表示面板内容会根据该面板中内容的高度进行自动调整。Disabled：选中该复选框，则禁用Accordion组件的展开和折叠效果。Collapsible：选项该复选框，表示允许折叠活动部分。Animate：该选项用于设置Accordion组件面板展示折叠动画的缓动效果，在该选项的下拉列表中可以选择预览的缓动效果，在下拉列表后的文本框中可以设置动画效果的持续时间，以毫秒为单位。Header：该选项用于设置面板标题的图标，可以在该选项的下拉列表中选择预设的面板标题

22、图标。Active Header：该选项用于设置活动面板标题的图标，可以在该选项的下拉列表中选择预设的活动面板标题图标。18.6.2制作折叠式公告制作折叠式公告本实例制作的是游戏网站上的公告栏，通过使用jQuery UI Accordion组件进行制作，使得该栏目在网页中既节省了空间，又具有很强的交互性。课堂案例课堂案例制作折叠式公告制作折叠式公告课堂案例：制作折叠式公告最终文件：光盘最终文件第18章18-6-2.html视频：光盘视频第18章18-6-2.swfjQuery UI Tabs组件可以在网页中插入一组面板，用来将较多内容放置在紧凑的空间中，当浏览者单击不同的选项卡时，即可打开相应的面板显示。浏览者可以通过单击面板选项卡来隐藏或显示在选项卡式面板中的内容。18.7