1、单元8jQueryUI常用组件,8.1 按钮button8.2 选项卡tabs8.3手风琴菜单accordion Menus8.4对话框dialog Boxes8.5日历datepicke8.6输入框自动补全autocomplete8.7进度条progress bar8.8滑块slider8.9jQuery UI提供的图标单元总结,8.1 按钮button,8.1.1按钮的基本使用jQuery UI提供了button()方法，将HTML元素转换为按钮，并自动管理它们上面的鼠标移动，所有这些都是由jQuery UI隐式完成的。比如下面的HTML代码中有多种类型的按钮，当然，一般的页面中我们一般不
2、用span元素作为按钮，此处为了演示button()方法的作用特意把它也加进来。,超链接button按钮span文本容器,这些HTML元素的原本的样子大家应该非常清楚，接下来我们对这些元素使用jQuery代码：$(document).ready(function()$(#mybtn1,#mybtn2,#mybtn3,#mybtn4,#mybtn5).button(););,只需对这些元素应用button()方法一个操作即可实现上述功能，页面效果如图8-1所示。,图8-1 button()方法效果图,可以看到，所有的元素都被改变成了按钮的样子，包括span元素。使用Chrome浏览器检查元素，可
3、以看到HTML代码已经被修改了，如图8-2所示。,如图8-2 页面实际显示的HTML代码,如果我们要对按钮进行样式修改，可以对class：ui-button进行CSS编码，代码如下：.ui-button background-color:red;color:white;font-weight:bold;,此时，页面显示的元素如图8-3所示。,图8-3修改CSS代码后的元素,8.1.2button()方法上面已经介绍了button()方法的基本使用方法，接下来详细介绍button()方法。此方法有两种形式：$(selector).button(options);$(selector).butto
4、n(action,param);,1.button(options)方法button(options)方法声明HTML元素应作为按钮进行管理。options参数是一个指定按钮外观和行为的对象。按钮可以用文本表示，也可以与jQuery UI CSS文件中预定义的图标相关联(在这里，是jquery-ui.min.css文件)，在该文件中包含了一组CSS类，用于访问images目录中的图标。在这个CSS文件中，可以看到CSS类定义，例如下面的代码，是与图像文件中的图标相关联的CSS类的定义：.ui-icon-calendar background-position:32px 112px;,jQuer
5、y UI中可用的图标如图8-4所示。,图8-4jQuery UI图标,options中的设置项见表8-1。,比如我们想给按钮加上小图标，可以将jQuery代码修改如下：$(document).ready(function()$(#mybtn1).button(icons:primary:ui-icon-gear);$(#mybtn2).button(icons:primary:ui-icon-gear,secondary:ui-icon-triangle-1-s);$(#mybtn3).button();$(#mybtn4,#mybtn5).button(icons:secondary:ui-
6、icon-triangle-1-s););,页面显示效果如图8-5所示。,图8-5 给按钮加上小图标,可以看到：(1)除了input元素的按钮外，其他元素的按钮都可以添加小图标，如“#mybtn4”元素；(2)同时给按钮添加主、副小图标，则只会显示主图标，如“#mybtn2”元素。,2.button(action,param)方法此方法允许对按钮执行方法，例如禁用或更改按钮文本。方法在第一个参数中指定为字符串，例如，“disable”可禁用按钮；第二个参数是需要作为参数传递到方法中的内容。表8-2列举了允许使用的方法及方法的作用。,3.为按钮绑定事件jQuery UI没有添加与按钮相关联的新事
7、件。实际上，鼠标操作的管理与jQuery通常使用的bind()方法所使用的现有事件(click、mouseover等)相对应。因此要为按钮绑定事件只需直接使用jQuery代码绑定即可。,8.1.3单选按钮jQuery UI使用相同的方法可以让单选框拥有按钮的效果。1.显示单选按钮使用单选按钮要比前面的按钮麻烦一点：必须只使用input元素来表示单选按钮，其中与单选按钮相关联的文本必须放在label元素中，并且label元素必须绑定input单选框。,例如要显示两个单选按钮来选择一个人的性别，我们编写HTML代码如下：,jQuery代码如下：,页面效果如图8-6所示。,图8-6单选框显示效果,2
8、.buttonset()方法上面的单选按钮肯定比传统的单选按钮更具视觉上的享受，但最好将它们组织起来，以显示它们形成一个块。我们可以通过稍微修改HTML和jQuery代码来实现这一点，更改以粗体显示：,页面显示效果如图8-7所示。与前面的代码的不同之处在于，我们将input元素包装到div元素中，并应用jQuery UI的buttonset()方法使按钮看起来像单个块。虽然按钮的显示不同，但它们的行为保持不变。,图8-7单选框效果,8.1.4复选按钮复选按钮的外观与单选按钮相同，但可以单独选择和取消选择每个复选框，此处不再赘述，大家可以将单选框代码修改为复选框代码即可看到对应的效果。,8.2
9、选项卡tabs,选项卡(Tabs)有一组必须使用的特定标记，以便选项卡能正常工作：选项卡(Tabs)必须在一个有序的(ol)或无序的(ul)列表中。每个标签页的title必须在一个列表项(li)的内部，且必须用一个带有href属性的锚(a)包裹。每个标签页面板可以是任意有效的元素，但是它必须带有一个id，该id与相关选项卡的锚中的href相对应。,8.2.1选项卡的基本使用下面的HTML代码是选项卡的模板代码，代码结构是jQuery UI所提供的，最简单的方法是按照模板编写代码，要增加或者减少选项卡只需要添加或删除对应的div和li元素即可。,jQuery代码如下：,页面显示效果如图8-8所示
10、。,8.2.2修改选项卡样式使用tabs()方法可以极大地改变页面中HTML元素的外观。实际上，这个方法会在jQuery UI内部遍历HTML元素，并向相关元素(选项卡)添加新的CSS类，以赋予它们适当的样式。,比如我们为上面的代码添加如下CSS：,页面效果将变成如图8-9所示的样式。,图8-9选项卡页面效果,8.2.3tabs()方法上面已经介绍了tabs()方法的基本使用，接下来详细介绍tabs()方法。此方法有两种形式：$(selector).tabs(options)$(selector).tabs(action,param),1.tabs(options)方法tabs(options
11、)方法声明HTML元素(及其内容)应作为选项卡进行管理。options参数是一个对象，用于指定与选项卡相关的外观和行为。根据是直接管理选项卡还是管理与选项卡相关的事件，可以使用不同类型的选项。options中的设置项见表8-3，其中的示例以上面的HTML代码为基础。,2.tabs(action,param)方法与前面的tabs(options)方法不同，该方法用于在创建选项卡后修改选项卡。此方法允许通过JavaScript程序对选项卡执行操作，例如选择、禁用、添加或删除选项卡。在第一个参数中，操作被指定为字符串(例如，“add”可以添加新的选项卡)，而后面的参数与此操作的参数有关(例如，选项卡
12、的索引等)，如表8-4所示。,3.绑定事件除了tabs(options)方法的options中使用的事件方法外，jQuery UI还允许我们使用bind()方法管理这些事件。jQuery UI创建了不同的事件，如表8-5所示。,8.2.4键盘交互当焦点在标签页上时，我们可以使用键盘按键控制选项卡切换：UP/LEFT：移动焦点到上一个标签页。如果在第一个标签页上，则移动焦点到最后一个标签页。在一个短暂的延迟后激活获得焦点的标签页。DOWN/RIGHT：移动焦点到下一个标签页。如果在最后一个标签页上，则移动焦点到第一个标签页。在一个短暂的延迟后激活获得焦点的标签页。,HOME：移动焦点到第一个标签
13、页。在一个短暂的延迟后激活获得焦点的标签页。END：移动焦点到最后一个标签页。在一个短暂的延迟后激活获得焦点的标签页。SPACE：激活与获得焦点的标签页相关的面板。ENTER：激活或切换与获得焦点的标签页相关的面板。ALT+PAGE UP：移动焦点到上一个标签页，并立即激活。ALT+PAGE DOWN：移动焦点到下一个标签页，并立即激活。,当焦点在面板上时，我们可以使用键盘按键控制选项卡切换：CTRL+UP：移动焦点到相关的标签页。ALT+PAGE UP：移动焦点到上一个标签页，并立即激活。ALT+PAGE DOWN：移动焦点到下一个标签页，并立即激活。,8.3手风琴菜单accordion M
14、enus,8.3.1手风琴菜单的基本使用下面的HTML代码是手风琴菜单的模板代码，代码结构是jQuery UI所提供的，最简单的方法是按照模板编写代码，要增加或者删除菜单项只需要添加或删除对应的div和标题元素即可。,对应的jQuery代码如下：$(document).ready(function()$(#accordion).accordion(););,jQuery UI要求我们为每个菜单编写以下内容，标题元素和div元素一个接一个重复：一个包含整体的全局div元素。一个将成为菜单标题的元素：它可以是，它必须包含一个超链接(a元素)，该链接将指示菜单文本(由于未使用href属性，因此不需要
15、对其使用href属性)。与内容菜单相对应的div元素。页面效果如图8-10所示。,图8-10 手风琴菜单效果,8.3.2修改手风琴菜单样式使用accordion()方法会显著改变呈现页面中HTML元素的外观。实际上，这个方法扫描HTML并向元素(这里是accordion菜单)添加新的CSS类，以赋予它们适当的样式。我们也可以使用元素的CSS类来订制显示效果。例如，如果我们改变与h3元素相关联的ui-accordion-header CSS类，我们可以改变菜单标题的样式。类似地，如果我们更改与div元素相关联的ui-accordion-content CSS类，我们将获得菜单内容的新样式。,比如
16、下面的CSS代码：,上面的代码中，我们为标题h3添加了一个3px的红色边框，将内容区域的文字大小改为12px，刷新页面后页面效果如图8-11所示。,图8-11手风琴菜单效果,8.3.3accordion()方法上面已经介绍了accordion()方法的基本使用，接下来详细介绍accordion()方法。此方法语法如下：$(selector).accordion(options)$(selector).accordion(aciton，param),accordion(options)方法指定HTML元素(及其内容)应作为accordion菜单进行管理。options参数是一个指定相关菜单的外观
17、和行为的对象。这些选项涉及菜单的行为、内容的高度或与这些菜单相关的事件。表8-6描述了用于管理手风琴菜单行为的选项。,activate和beforeActivate事件的ui对象由以下属性组成：oldHeader：与正在关闭的菜单对应的jQuery类对象。oldContent：与正在关闭的内容菜单相对应的jQuery类对象。newHeader：与正在打开的菜单相对应的jQuery类对象。newContent：与正在打开的内容菜单相对应的jQuery类对象。create事件的ui对象由以下属性组成：header：当前正在创建的标题。panel：当前正在创建的内容。,表8-7列出了管理菜单事件的选
18、项。,上面的事件选项也可以使用jQuery提供的bind()方法进行绑定，对应的事件名称为：accordionactivate事件：对应activate。accordionbeforeactivate事件：对应beforeActivate。accordioncreate事件：对应create。,8.3.4键盘交互当焦点在标题(header)上时，下面的键盘命令可用：UP/LEFT：移动焦点到上一个标题。如果在第一个标题上，则移动焦点到最后一个标题上。DOWN/RIGHT：移动焦点到下一个标题。如果在最后一个标题(header)上，则移动焦点到第一个标题上。HOME：移动焦点到第一个标题上。EN
19、D：移动焦点到最后一个标题上。SPACE/ENTER：激活与获得焦点的标题相关的面板(panel)。,当焦点在面板中时，下面的键盘命令可用：CTRL+UP：移动焦点到相关的标题上。,8.4对话框dialog Boxes,8.4.1对话框的基本使用图8-12是jQuery UI为我们提供的对话框，此对话框包括文本内容和包含关闭按钮的标题栏。用户可以移动页面上的对话框并调整其大小。如果内容长度超过最大高度，会自动出现滚动条。一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。,图8-12 对话框,要实现这样的对话框，jQuery UI对我们的页面有如下要求：一个body元素下的div元素，它必
20、须要有title属性指定窗口标题。在div元素中有包含说明文字的元素，用于显示对话框的内容。下面的HTML代码是对话框模板代码，代码结构是jQuery UI提供的，最简单的方法是按照模板编写代码，可以避免很多不必要的问题。,在页面中放入如下HTML元素：使用jQuery代码对元素应用dialog()方法：运行代码后就能看到如图8-12所示的对话框。,另外，我们可以在页面中定义多个对话框，比如下面的代码：,我们定义了两个对话框，打开页面后显示如图8-13所示。,图8-13对话框页面效果,此时我们只能看到第二个(后面代码定义的)对话框。这是因为所有对话框在出现时都是默认出现在页面的正中间，而代码中
21、后面的HTML元素的显示级别要比前面的HTML元素显示级别高，所以对话框2遮挡了对话框1。我们移动(或者关闭)对话框2后就能看到对话框1了。效果如图8-14所示。,图8-14对话框页面效果,8.4.2修改对话框样式我们可以通过修改CSS类在默认主题上修改对话框的样式。例如，如果修改与div元素相关联的ui-dialog-titlebar CSS类，就可以修改窗口标题的样式。类似地，如果我们更改与div元素相关联的ui-dialog-content CSS类，就可以修改窗口内容的样式。,比如下面的CSS代码：,上面的代码将窗口标题的背景颜色修改为蓝色，文字修改为白色；将窗口内容的文字大小修改为1
22、2px，页面效果如图8-15所示。,图8-15 对话框页面效果,如果需要修改对话框的样式，则可以使用下面的CSS类名称：ui-dialog：对话框的外层容器。ui-dialog-titlebar：包含对话框标题和关闭按钮的标题栏。ui-dialog-title：对话框文本标题周围的容器。ui-dialog-titlebar-close：对话框的关闭按钮。ui-dialog-content：对话框内容周围的容器。这也是部件被实例化的元素。ui-dialog-buttonpane：包含对话框按钮的面板。只有当设置了 buttons 选项时才呈现。ui-dialog-buttonset：按钮周围的容
23、器。,8.4.3dialog()方法此方法用于设置一个对话框。对话框将在一个交互覆盖层中打开内容。语法如下：$(selector).dialog(options)$(selector).dialog(aciton，param)对话框options对象的选项见表8-8。,dialog()还有一些控制的方法，可以使用JavaScript来控制dialog窗口。这些方法同样是使用参数的方式传入dialog()方法中。可用的方法见表8-9。,与dialog窗口相关的事件见表8-10。,8.4.4焦点当打开一个对话框时，焦点会自动移动到满足下面条件的第一个项目：带有autofocus属性的对话框内的第一
24、个元素。对话框内容中的第一个“:tabbable”元素。对话框按钮面板内的第一个“:tabbable”元素。对话框的关闭按钮。对话框本身。,8.4.5dialog窗口实例下面的代码创建了一个对话框，在页面打开时不显示对话。按钮分别是打开和关闭对话框，如果重复点击则做出提示。比如对话框已经打开时，再点打开按钮则会弹出提示“对话框已打开”。点击两次“打开”按钮时，页面效果如图8-16所示。,图8-16 对话框页面效果,8.5日历datepicker,8.5.1日历的基本使用jQuery UI提供的日历(datepicker)有两种使用方式：(1)作为日期选择控件；(2)作为日历模块。,1.作为日期
25、选择控件当我们需要用户在页面中输入时间时，我们经常会使用日期选择控件，HTML5为我们提供了一个基本的日期选择控件，但它比较难以控制样式，和当前主题不符。jQuery UI也为我们提供了一个日期选择控件，我们只需要在页面中加入一个input元素，并使用jQuery代码给元素应用一个方法(datepicker()即可。比如下面的代码：,这样我们就将一个普通的输入框改造成了日期输入控件。页面效果如图8-17和图8-18所示。,图8-17元素获得焦点时,图8-18选择时间后,2.作为日历模块当我们需要在页面上显示一个日历模块时，我们可以把上面代码中的input元素换成一个div元素或span元素(或
26、其他这类型的元素)，HTML代码修改如下：页面效果如图8-19所示，日历将静态显示，用户无需单击输入字段即可访问它。,图8-19 日历模块,8.5.2修改日历样式我们可以通过修改CSS类在默认主题上修改日历的样式。比如我们可以使用下面的CSS代码修改日历的样式：.ui-datepicker-header font-size:20px;background-color:orange;.ui-datepicker-calendar border:3px black dashed;,上面的代码给日历的头部添加了橙色的背景色，将日历的边框加粗并修改为虚线。效果如图8-20所示。,图8-20 日历模块,
27、与日历相关的CSS类总结如下：ui-datepicker：日期选择器的外层容器。如果日期选择器是内联的，该元素会另外带有一个ui-datepicker-inline class。如果设置了isRTL选项，该元素会另外带有一个 ui-datepicker-rtl class。ui-datepicker-header：日期选择器的头部容器。ui-datepicker-prev：用于选择上一月的控件。ui-datepicker-next：用于选择下一月的控件。ui-datepicker-title：日期选择器包含月和年的标题容器。,ui-datepicker-month：月的文本显示，如果设置了 c
28、hangeui-datepicker-year：年的文本显示，如果设置了 changeYear 选项则显示 元素。,ui-datepicker-calendar：包含日历的表格。ui-datepicker-week-end：周末的单元格。ui-datepicker-other-month：发生在某月但不是当前月天数的单元格。ui-datepicker-unselectable：用户不可选择的单元格。ui-datepicker-current-day：已选中日期的单元格。ui-datepicker-today：当天日期的单元格。,ui-datepicker-buttonpane：当设置 show
29、ButtonPanel 选项时使用按钮面板(buttonpane)。ui-datepicker-current：用于选择当天日期的按钮。,如果“numberOfMonths”选项用于显示多个月份，则会使用一些额外的类：ui-datepicker-multi：一个多月份日期选择器的最外层容器。该元素会根据要显示的月份个数另外带有 ui-datepicker-multi-2、ui-datepicker-multi-3 或 ui-datepicker-multi-4 class 名称。ui-datepicker-group：分组内单独的选择器。该元素会根据它在分组中的位置另外带有 ui-datepi
30、cker-group-first、ui-datepicker-group-middle 或 ui-datepicker-group-last class 名称。,8.5.3datepicker()方法日历方法有两种形式：$(selector).datepicker(options)$(selector).datepicker(aciton，param)options是以对象键值对的形式传参，每个键值对表示一个选项；action 是操作对话框方法的字符串，param则是 options 的某个选项。,1.日期格式设置表8-11中列举了datepicker()方法对日期格式设置的属性，表8-12中
31、列举了日期格式化代码。,比如我们可以使用jQuery代码对日历做如下设置：,页面显示效果及属性对应的位置如图8-21所示。,图8-21日历设置后效果,2.日历外观设置表8-13列出了日历外观设置选项。,比如使用如下jQuery代码对日历进行设置：,页面显示效果如图8-22所示。,图8-22日历设置后效果,3.日期选择设置我们还可以对日历能够选择的日期进行设置，表8-14列出了相关设置选项。,4.日历的动画效果表8-15列举了设置日历动画效果的选项。,5.日历的事件选项表8-16列举了日历的事件选项。,比如禁用每个月的1号，可以使用下面的jQuery代码：,页面效果如图8-23所示。,图8-23
32、日历设置后效果,6.日历的操作选项表8-17中列出了日历的操作方法。,8.6输入框自动补全autocomplete,8.6.1自动补全功能的基本使用 比如页面上有一个输入框，需要用户输入一种编程语言，这个时候我们可以编写如下代码：,当输入“c”时，页面显示效果如图8-23所示。,图8-23自动补全功能,输入由ID为language的input元素完成，在HTML页面的script元素中，我们需要同时定义建议列表(var languages)和必须匹配的输入字段才能显示建议列表。为此，只需指明input元素由jQuery UI提供的autocomplete()方法管理，同时使用source属性(
33、source:books)指定显示建议列表即可。当用户输入时会触发input元素的事件，将input元素的内容与建议列表中的内容进行比对，满足条件的建议列表中的项将会显示在input元素的下方供用户选择。,有时候我们希望选中的项显示的内容和值是不同的，类似select元素的option，此时我们可以使用下面的jQuery定义数据源：,8.6.2修改自动补全功能的样式autocomplete()方法在输入字段下面创建了一个建议列表，并向相关元素添加新的CSS类，以赋予它们适当的样式。如果我们要修改它们的样式，可以通过修改ui-autocomplete来修改弹出的选项列表的样式；通过修改ui-autocomplete-input来修改输入框的样式。比如下面的CSS代码：,上面的代码增大输入框中的字体大小，减小提示项的字体大小，页面效果如图8-24所示。,图8-24修改样式后的自动补全功能,8.
