网页特效设计基础第8章-使用jQuery-UI插件.ppt

1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第8 8章章 使用使用jQuery UIjQuery UI插件插件 jQuery UI是一个以是一个以jQuery为基础的用户体验与交互库，为基础的用户体验与交互库，它是由它是由 jQuery 官方维护的一类提高网站开发效率的插件库。官方维护的一类提高网站开发效率的插件库。本章将对本章将对 jQuery UI 插件的使用进行详细讲解。插件的使用进行详细讲解。8.1 8.1 初识初识 jQuery UI jQuery UI 插件插件 jQuery UI jQuery UI 是一个建立在是一个建立在 jQuery JavaScript jQ

2、uery JavaScript 库库上的插件和交互库，开发人员可以使用它创建高度交互上的插件和交互库，开发人员可以使用它创建高度交互的的 Web Web 应用程序。本节将对应用程序。本节将对 jQuery UI jQuery UI 及其插件进行及其插件进行简单的介绍。简单的介绍。8.1.1 jQuery UI 8.1.1 jQuery UI 概述概述 jQuery UI jQuery UI 是以是以 jQuery jQuery 为基础的开源为基础的开源 JavaScript JavaScript 网页用户界面代码库，它包含底层用户交互、动画、特效网页用户界面代码库，它包含底层用户交互、动画、特

3、效和可更换主题的可视控件，其主要特点如下。和可更换主题的可视控件，其主要特点如下。（1 1）简单易用。继承）简单易用。继承 jQuery jQuery 简易使用特性，提供高度简易使用特性，提供高度抽象接口，短期改善网站易用性。抽象接口，短期改善网站易用性。（2 2）开源免费。采用）开源免费。采用 MIT&GPL MIT&GPL 双协议授权，轻松满足双协议授权，轻松满足自由产品至企业产品各种授权需求。自由产品至企业产品各种授权需求。（3 3）广泛兼容。兼容各主流桌面浏览器。包括）广泛兼容。兼容各主流桌面浏览器。包括 IE 6+IE 6+、Firefox 2+Firefox 2+、Safari 3

4、+Safari 3+、Opera 9+Opera 9+、Chrome 1+Chrome 1+。（4 4）轻便快捷。组件间相对独立，可按需加载，避免）轻便快捷。组件间相对独立，可按需加载，避免浪费带宽，拖慢网页打开速度。浪费带宽，拖慢网页打开速度。（5 5）美观多变。提供近）美观多变。提供近 20 20 种预设主题，并可自定义种预设主题，并可自定义多达多达 60 60 项可配置样式规则，提供项可配置样式规则，提供 24 24 种背景纹理选择。种背景纹理选择。（6 6）开放公开。从结构规划到代码编写全程开放，文）开放公开。从结构规划到代码编写全程开放，文档、代码编写与讨论人人均可参与。档、代码编写

5、与讨论人人均可参与。（7 7）强力支持。）强力支持。Google Google 为发布代码提供为发布代码提供 CDN CDN 内容分内容分发网络支持。发网络支持。（8 8）完整汉化。开发包内置包含中文在内的）完整汉化。开发包内置包含中文在内的 40 40 多种多种语言包。语言包。8.1.2 jQuery UI 8.1.2 jQuery UI 的下载的下载 使用使用 jQuery UI jQuery UI 之前，首先需要进行下载。下载步之前，首先需要进行下载。下载步骤如下。骤如下。（1 1）打开）打开 jQuery user interface jQuery user interface 主页，

6、进入图主页，进入图 8-1 8-1 所示的页面。所示的页面。图图 8-1 jQuery UI 主页面主页面（2 2）单击）单击 Custom Download Custom Download 按钮，进入按钮，进入 jQuery UI jQuery UI 的的 Download Builder Download Builder 页面，如图页面，如图 8-2 8-2 所示。在所示。在 Download Download Builder Builder 页面中可供下载的有页面中可供下载的有 jQuery UI jQuery UI 版本、核心（版本、核心（UI UI CoreCore）、交互部件（）、

7、交互部件（InteractionsInteractions）、小部件（）、小部件（WidgetsWidgets）和效果库（和效果库（EffectsEffects）。）。图图 8-2 Download Builder 页面页面 在在 Download Builder Download Builder 页面中提供的页面中提供的 jQuery UI jQuery UI 版本有以下几种。版本有以下几种。p jQuery UI 1.12.1jQuery UI 1.12.1：要求：要求 jQuery 1.7 jQuery 1.7 及以上版本。及以上版本。p jQuery UI 3.3.1jQuery UI

8、 3.3.1：要求：要求 jQuery 1.6 jQuery 1.6 及以上版本。及以上版本。p jQuery UI 1.10.4jQuery UI 1.10.4：要求：要求 jQuery 1.6 jQuery 1.6 及以上版本。及以上版本。p jQuery UI 1.9.2jQuery UI 1.9.2：要求：要求 jQuery 1.6 jQuery 1.6 及以上版本。及以上版本。（3 3）在）在 Download Builder Download Builder 页面的最底部，可以看到一页面的最底部，可以看到一个下拉列表框，列出了一系列为个下拉列表框，列出了一系列为 jQuery UI

9、 jQuery UI 插件预先设计插件预先设计的主题，可以从这些提供的主题中选择一个，如图的主题，可以从这些提供的主题中选择一个，如图 8-3 8-3 所所示。示。（4 4）单击）单击“Download”“Download”按钮，即可下载选择的按钮，即可下载选择的 jQuery jQuery UIUI。图图 8-3 选择选择 jQuery UI 主题主题8.1.3 jQuery UI 8.1.3 jQuery UI 的使用的使用 jQuery UI jQuery UI 下载完成后，将得到一个包含所选组件下载完成后，将得到一个包含所选组件的自定义的自定义 zip zip 文件（文件（jquery

10、-ui-1.12.1.custom.zipjquery-ui-1.12.1.custom.zip），），解压该文件，效果如图解压该文件，效果如图 8-4 8-4 所示。所示。在在 HTML HTML 网页中使用网页中使用 jQuery UI jQuery UI 插件时，需要将图插件时，需要将图 8-4 8-4 所示的所有文件及文件夹（即解压之后的所示的所有文件及文件夹（即解压之后的jquery-ui-jquery-ui-1.12.1.custom 1.12.1.custom 文件夹）复制到文件夹）复制到 HTML HTML 网页所在的文件网页所在的文件夹下，然后在夹下，然后在HTMLHTML网

11、页的网页的区域添加区域添加jquery-ui.css jquery-ui.css 文件、文件、jquery-ui.js jquery-ui.js 文件及文件及 external/jquery external/jquery 文件夹文件夹下下 jquery.js jquery.js 文件的引用。代码如下：文件的引用。代码如下：link rel=stylesheet href=jquery-ui-1.12.1.custom/jquery-ui.css/script src=jquery-ui-1.12.1.custom/external/jquery/jquery.js script src=jq

12、uery-ui-1.12.1.custom/jquery-ui.js图图 8-4 jQuery UI 包含的文件包含的文件 一旦引用了上面一旦引用了上面 3 3 个文件，开发人员即可向个文件，开发人员即可向 HTML HTML 网页中添加网页中添加 jQuery UI jQuery UI 插件。例如，要在插件。例如，要在 HTML HTML 网页网页中添加一个滑块插件，可使用下面代码实现。中添加一个滑块插件，可使用下面代码实现。HTML HTML 代码如下：代码如下：调用滑块插件的调用滑块插件的 JavaScript JavaScript 代码如下：代码如下：$(function()$(fun

13、ction()$(#slider).slider();$(#slider).slider();););8.1.4 jQuery UI 8.1.4 jQuery UI 的工作原理的工作原理 jQuery UI jQuery UI 包含了许多维持状态的插件，因此，它与典包含了许多维持状态的插件，因此，它与典型的型的 jQuery jQuery 插件使用模式略有不同。插件使用模式略有不同。jQuery UI jQuery UI 的插件提的插件提供了通用的供了通用的 API API，因此，只要学会了使用其中一个插件，即，因此，只要学会了使用其中一个插件，即可知道如何使用其他的插件。本节以进度条（可知道

14、如何使用其他的插件。本节以进度条（progressbarprogressbar）插件为例，介绍插件为例，介绍 jQuery UI jQuery UI 插件的工作原理。插件的工作原理。1 1安装安装 为了跟踪插件的状态，首先我们来介绍一下插件的为了跟踪插件的状态，首先我们来介绍一下插件的生命周期。当插件安装时，生命周期开始，只需要在一生命周期。当插件安装时，生命周期开始，只需要在一个或多个元素上调用插件，即安装了插件。例如，下面个或多个元素上调用插件，即安装了插件。例如，下面的代码开始的代码开始 progressbar progressbar 插件的生命周期：插件的生命周期：$(#elem).p

15、rogressbar();$(#elem).progressbar();另外，在安装时，另外，在安装时，jQuery UI jQuery UI 还可以传递一组选项，还可以传递一组选项，这样即可重写默认选项。代码如下：这样即可重写默认选项。代码如下：$(#elem).progressbar(value:20);$(#elem).progressbar(value:20);2 2方法方法 既然插件已经初始化，开发人员就可以查询它的状态，或既然插件已经初始化，开发人员就可以查询它的状态，或者在插件上执行动作。所有初始化后的动作都以方法调用的形者在插件上执行动作。所有初始化后的动作都以方法调用的形式进

16、行。为了在插件上调用一个方法，我们可以向式进行。为了在插件上调用一个方法，我们可以向 jQuery jQuery 插件传递方法的名称。例如，为了在进度条（插件传递方法的名称。例如，为了在进度条（progressbarprogressbar）插件上调用插件上调用 value value 方法，我们可以使用下面的代码：方法，我们可以使用下面的代码：$(#elem).progressbar(value);$(#elem).progressbar(value);如果方法接受参数，可以在方法名后传递参数。例如果方法接受参数，可以在方法名后传递参数。例如，下面的代码将参数如，下面的代码将参数 40 40

17、传递给传递给 value value 方法：方法：$(#elem).progressbar(value,40);$(#elem).progressbar(value,40);每个每个 jQuery UI jQuery UI 插件都有它自己的一套基于插件插件都有它自己的一套基于插件所提供功能的方法，然而，有些方法是所有插件都共同所提供功能的方法，然而，有些方法是所有插件都共同具有的，下面分别进行讲解。具有的，下面分别进行讲解。（1 1）option option 方法。方法。option option 方法主要用来在插件初始方法主要用来在插件初始化之后改变选项。例如，通过调用化之后改变选项。例如

18、，通过调用 option option 方法改变方法改变progressbarprogressbar（进度条）的（进度条）的 value value 为为 30 30，代码如下：，代码如下：$(#elem).progressbar(option,value,30);$(#elem).progressbar(option,value,30);（2 2）disable disable 方法。方法。disable disable 方法用来禁用插件，它方法用来禁用插件，它等同于将等同于将 disabled disabled 选项设置为选项设置为 true true。例如，下面的。例如，下面的代码用来将

19、进度条设置为禁用状态：代码用来将进度条设置为禁用状态：$(#elem).progressbar(disable);$(#elem).progressbar(disable);（3 3）enable enable 方法。方法。enable enable 方法用来启用插件，它等方法用来启用插件，它等同于将同于将 disabled disabled 选项设置为选项设置为 false false。例如，下面的代。例如，下面的代码用来将进度条设置为启用状态：码用来将进度条设置为启用状态：$(#elem).progressbar(enable);$(#elem).progressbar(enable);（

20、4 4）destroy destroy 方法。方法。destroy destroy 方法用来销毁插件，使方法用来销毁插件，使插件返回到最初的标记，这意味着插件生命周期的终止。插件返回到最初的标记，这意味着插件生命周期的终止。例如，下面的代码用来销毁进度条插件：例如，下面的代码用来销毁进度条插件：$(#elem).progressbar(destroy);$(#elem).progressbar(destroy);一旦销毁了一个插件，就不能在该插件上调用任何一旦销毁了一个插件，就不能在该插件上调用任何方法，除非再次初始化这个插件。方法，除非再次初始化这个插件。（5 5）widget widget

21、 方法。方法。widget widget 方法用来生成包装器元素，或方法用来生成包装器元素，或与原始元素断开连接的元素。例如，下面的代码中，与原始元素断开连接的元素。例如，下面的代码中，widget widget 将返回生成的元素，因为，在进度（将返回生成的元素，因为，在进度（progressbarprogressbar）实例中，）实例中，没有生成的包装器，没有生成的包装器，widget widget 方法返回原始的元素。方法返回原始的元素。$(#elem).progressbar(widget);$(#elem).progressbar(widget);3 3事件事件 所有的所有的 jQue

22、ry UI jQuery UI 插件都有跟它们各种行为相关插件都有跟它们各种行为相关的事件，用于在状态改变时通知用户。对于大多数的插的事件，用于在状态改变时通知用户。对于大多数的插件，当事件被触发时，名称以插件名称为前缀。例如，件，当事件被触发时，名称以插件名称为前缀。例如，可以绑定进度条（可以绑定进度条（progressbarprogressbar）的）的 change change 事件，一事件，一旦值发生变化时就触发。代码如下：旦值发生变化时就触发。代码如下：$(#elem).bind(progressbarchange,function()$(#elem).bind(progressb

23、archange,function()alert(alert(进度条的值发生了改变进度条的值发生了改变!);!);););每个事件都有一个相对应的回调，作为选项进行呈现，每个事件都有一个相对应的回调，作为选项进行呈现，开发人员可以使用进度条（开发人员可以使用进度条（progressbarprogressbar）的）的 change change选选项进行回调，这等同于绑定项进行回调，这等同于绑定 progressbarchange progressbarchange 事件。事件。代码如下：代码如下：$(#elem).progressbar($(#elem).progressbar(change

24、:function()change:function()alert(alert(进度条的值发生了改变进度条的值发生了改变!);!);););8.1.5 jQuery UI 8.1.5 jQuery UI 中的插件中的插件 jQuery UI jQuery UI包含了许多维持状态的插件（包含了许多维持状态的插件（WidgetWidget），），通常称为通常称为jQuery UIjQuery UI插件，它是专门由插件，它是专门由jQueryjQuery官方维护的官方维护的UIUI方向的插件，主要包括折叠面板（方向的插件，主要包括折叠面板（AccordionAccordion）、自动）、自动完成（完

25、成（AutocompleteAutocomplete）、按钮（）、按钮（ButtonButton）、日期选择器）、日期选择器（DatepickerDatepicker）、对话框（）、对话框（DialogDialog）、菜单（）、菜单（MenuMenu）、）、进度条（进度条（ProgressbarProgressbar）、滑块（）、滑块（SliderSlider）、旋转器）、旋转器（SpinnerSpinner）、标签页（）、标签页（TabsTabs）、工具提示框）、工具提示框（TooltipTooltip）、复选框单选按钮（）、复选框单选按钮（CheckboxradioCheckboxradi

26、o）、组）、组件控制组（件控制组（ControlgroupControlgroup）、鼠标（）、鼠标（MouseMouse）、选择菜单）、选择菜单（SelectmenuSelectmenu）等。）等。jQuery UI jQuery UI 与与 jQuery jQuery 的主要区别如下。的主要区别如下。（1 1）jQuery jQuery 是一个是一个 JS JS 库，主要提供的功能是选择器、库，主要提供的功能是选择器、属性修改和事件绑定等。属性修改和事件绑定等。（2 2）jQuery UI jQuery UI 是在是在 jQuery jQuery 的基础上，利用的基础上，利用 jQuery

27、 jQuery 的扩展性设计的插件，提供了一些常用的界面元素，诸如的扩展性设计的插件，提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等。对话框、拖动行为、改变大小行为等。8.2 jQuery UI 8.2 jQuery UI 的常用插件的常用插件 jQuery UI jQuery UI 中提供了很多实用性的插件，包括大家中提供了很多实用性的插件，包括大家常用的按钮、日期选择器、进度条等。常用的按钮、日期选择器、进度条等。本节将对本节将对 jQuery UI jQuery UI 中的常用插件及其使用进行中的常用插件及其使用进行详细讲解。详细讲解。8.2.1 8.2.1 折叠面板（折

28、叠面板（AccordionAccordion）的使用）的使用 折叠面板用来在一个有限的空间内显示用于呈现信折叠面板用来在一个有限的空间内显示用于呈现信息的可折叠的内容面板，单击头部，展开或者折叠被分息的可折叠的内容面板，单击头部，展开或者折叠被分为各个逻辑部分的内容；另外，开发人员可以选择性地为各个逻辑部分的内容；另外，开发人员可以选择性地设置当鼠标指针悬停时是否切换各部分的打开或者折叠设置当鼠标指针悬停时是否切换各部分的打开或者折叠状态。状态。折叠面板标记需要一对标题和内容面板，例如，可折叠面板标记需要一对标题和内容面板，例如，可以是一系列的标题（以是一系列的标题（H3 H3 标签）和内容标

29、签）和内容 DIV DIV。代码如下：。代码如下：First header First header First content panel First content panel Second header Second header Second content panel Second content panel 在使用折叠面板时，如果焦点在标题（在使用折叠面板时，如果焦点在标题（headerheader）上，）上，则下面的键盘命令可用。则下面的键盘命令可用。（1 1）Up/LeftUp/Left：移动焦点到上一个标题（：移动焦点到上一个标题（headerheader）。如）。如果在第一

30、个标题（果在第一个标题（headerheader）上，则移动焦点到最后一个）上，则移动焦点到最后一个标题（标题（headerheader）上。）上。（2 2）Down/RightDown/Right：移动焦点到下一个标题（：移动焦点到下一个标题（headerheader），），如果在最后一个标题（如果在最后一个标题（headerheader）上，则移动焦点到第一）上，则移动焦点到第一个标题（个标题（headerheader）上。）上。（3 3）HomeHome：移动焦点到第一个标题（：移动焦点到第一个标题（headerheader）上。）上。（4 4）EndEnd：移动焦点到最后一个标题（：移

31、动焦点到最后一个标题（headerheader）上。）上。（5 5）Space/EnterSpace/Enter：激活与获得焦点的标题（：激活与获得焦点的标题（headerheader）相关的面板（相关的面板（panelpanel）。当焦点在面板（）。当焦点在面板（panelpanel）中时，）中时，下面的键盘命令可用。下面的键盘命令可用。（6 6）Ctrl+UpCtrl+Up：移动焦点到相关的标题（：移动焦点到相关的标题（headerheader）。）。折叠面板的常用选项及说明如表折叠面板的常用选项及说明如表 8-1 8-1 所示。所示。表表 8-1 折叠面板的常用选项及说明折叠面板的常用选

32、项及说明 折叠面板的常用方法及说明如表折叠面板的常用方法及说明如表 8-2 8-2 所示。所示。表表 8-2 折叠面板的常用方法及说明折叠面板的常用方法及说明 折叠面板（折叠面板（AccordionAccordion）的常用事件及说明如表）的常用事件及说明如表 8-3 8-3 所示。所示。表表 8-3 折叠面板的常用事件及说明折叠面板的常用事件及说明 使用使用 Chrome Chrome 浏览器运行浏览器运行 index.html index.html，效果如图，效果如图 8-5 8-5 所示。所示。图图 8-5 折叠面板效果折叠面板效果8.2.2 8.2.2 自动完成（自动完成（Autoco

33、mpleteAutocomplete）插件的使用）插件的使用 自动完成插件用来根据用户输入的值进行搜索和过滤，让自动完成插件用来根据用户输入的值进行搜索和过滤，让用户快速找到并从预设值列表中选择。自动完成插件类似用户快速找到并从预设值列表中选择。自动完成插件类似“百百度度”的搜索框，当用户在输入框中输入时，自动完成插件提供的搜索框，当用户在输入框中输入时，自动完成插件提供相应的建议。相应的建议。自动完成部件使用自动完成部件使用 jQuery UI CSS jQuery UI CSS 框架来定义它的外观框架来定义它的外观和感观的样式。如果需要使用自动完成部件指定的样式，则可和感观的样式。如果需要

34、使用自动完成部件指定的样式，则可以使用下面的以使用下面的 CSS class CSS class 名称。名称。p ui-autocompleteui-autocomplete：用于显示匹配用户的菜单（：用于显示匹配用户的菜单（menumenu）。）。p ui-autocomplete-inputui-autocomplete-input：自动完成部件（：自动完成部件（Autocomplete Autocomplete WidgetWidget）实例化的）实例化的 input input 元素。元素。自动完成的常用选项及说明如表自动完成的常用选项及说明如表 8-4 8-4 所示。所示。表表 8-

35、4 自动完成的常用选项及说明自动完成的常用选项及说明续表续表 自动完成的常用方法及说明如表自动完成的常用方法及说明如表 8-5 8-5 所示。所示。表表 8-5 自动完成的常用方法及说明自动完成的常用方法及说明 自动完成的常用事件及说明如表自动完成的常用事件及说明如表 8-6 8-6 所示。所示。表表 8-6 自动完成的常用事件及说明自动完成的常用事件及说明续表续表8.2.3 8.2.3 按钮（按钮（ButtonButton）的使用）的使用 可以使用带有适当悬停（可以使用带有适当悬停（hoverhover）和激活（）和激活（activeactive）样式的可主题化按钮来加强标准表单元素（例如按

36、钮、样式的可主题化按钮来加强标准表单元素（例如按钮、输入框等）。可用于按钮的标记实例主要有输入框等）。可用于按钮的标记实例主要有 button button 元元素或者类型为素或者类型为 submit submit 的的 input input 元素。元素。除了基本的按钮，单选按钮和复选框（除了基本的按钮，单选按钮和复选框（inputinput类型为类型为 radioradio和和checkboxcheckbox）也可以转换为按钮。为了将单选按钮分）也可以转换为按钮。为了将单选按钮分组，组，ButtonButton也提供了一个额外的小部件，名为也提供了一个额外的小部件，名为 Buttonset

37、 Buttonset。Buttonset Buttonset 通过选择一个容器元素（包含单选按钮）并调通过选择一个容器元素（包含单选按钮）并调用用.buttonset().buttonset()来使用。来使用。Buttonset Buttonset 也提供了可视化分组，也提供了可视化分组，因此当有一组按钮时可以考虑使用它。因此当有一组按钮时可以考虑使用它。按钮部件（按钮部件（Button WidgetButton Widget）使用）使用 jQuery UI CSS jQuery UI CSS 框框架来定义它的外观和感观的样式。如果需要使用按钮指定的架来定义它的外观和感观的样式。如果需要使用按

38、钮指定的样式，则可以使用下面的样式，则可以使用下面的 CSS class CSS class 名称。名称。p ui-buttonui-button：表示按钮的：表示按钮的 DOM DOM 元素。该元素会根据元素。该元素会根据 text text 和和 icons icons 选项添加下列选项添加下列 class class 之一：之一：ui-button-text-ui-button-text-onlyonly、ui-button-icon-onlyui-button-icon-only、ui-button-icons-onlyui-button-icons-only、ui-button-te

39、xt-iconsui-button-text-icons。ui-button-icon-primary ui-button-icon-primary：用于显示按钮主要图标的元素。只有当主要图标在用于显示按钮主要图标的元素。只有当主要图标在 icons icons 选项中提供时才呈现。选项中提供时才呈现。p ui-button-textui-button-text：在按钮的文本内容周围的容器。：在按钮的文本内容周围的容器。p ui-button-icon-secondaryui-button-icon-secondary：用于显示按钮的次要图标。：用于显示按钮的次要图标。只有当次要图标在只有当次

40、要图标在 icons icons 选项中提供时才呈现。选项中提供时才呈现。p ui-buttonsetui-buttonset：Buttonset Buttonset 的外层容器。的外层容器。按钮的常用选项及说明如表按钮的常用选项及说明如表 8-7 8-7 所示。所示。表表 8-7 按钮的常用选项及说明按钮的常用选项及说明 按钮的常用方法及说明如表按钮的常用方法及说明如表 8-8 8-8 所示。所示。表表 8-8 按钮的常用方法及说明按钮的常用方法及说明 按钮的常用事件及说明如表按钮的常用事件及说明如表 8-9 8-9 所示。所示。表表 8-9 按钮的常用事件及说明按钮的常用事件及说明8.2.

41、4 8.2.4 日期选择器（日期选择器（DatepickerDatepicker）的使用）的使用 日期选择器主要用来从弹出框或在线日历中选择一日期选择器主要用来从弹出框或在线日历中选择一个日期。使用该插件时，可以自定义日期的格式和语言，个日期。使用该插件时，可以自定义日期的格式和语言，也可以限制可选择的日期范围等。也可以限制可选择的日期范围等。默认情况下，当相关的文本域获得焦点时，在一个默认情况下，当相关的文本域获得焦点时，在一个小的覆盖层打开日期选择器。对于一个内联的日历，我小的覆盖层打开日期选择器。对于一个内联的日历，我们只需要简单地将日期选择器附加到们只需要简单地将日期选择器附加到 DI

42、V DIV 或者或者 span span 上即可。上即可。当日期选择器打开时，则下面的键盘命令可用。当日期选择器打开时，则下面的键盘命令可用。p Page UpPage Up：移到上一个月。：移到上一个月。p Page DownPage Down：移到下一个月。：移到下一个月。p Ctrl+Page UpCtrl+Page Up：移到上一年。：移到上一年。p Ctrl+Page DownCtrl+Page Down：移到下一年。：移到下一年。p Ctrl+HomeCtrl+Home：移到当前月份。如果日期选择器是关闭：移到当前月份。如果日期选择器是关闭的则打开。的则打开。p Ctrl+Left

43、Ctrl+Left：移到上一天。：移到上一天。p Ctrl+RightCtrl+Right：移到下一天。：移到下一天。p Ctrl+UpCtrl+Up：移到上一周。：移到上一周。p Ctrl+DownCtrl+Down：移到下一周。：移到下一周。p EnterEnter：选择聚焦的日期。：选择聚焦的日期。p Ctrl+EndCtrl+End：关闭日期选择器，并清除日期。：关闭日期选择器，并清除日期。p EscapeEscape：关闭日期选择器，不做任何选择。：关闭日期选择器，不做任何选择。日期选择器的常用方法及说明如表日期选择器的常用方法及说明如表 8-10 8-10 所示。所示。表表 8-1

44、0 日期选择器的常用方法及说明日期选择器的常用方法及说明 日期选择器部件（日期选择器部件（DatepickerDatepicker）使用）使用jQueryUI CSS jQueryUI CSS 框架来定义它的外观和感观的样式。如果需要使用日期选框架来定义它的外观和感观的样式。如果需要使用日期选择器指定的样式，则可以使用下面的择器指定的样式，则可以使用下面的 CSS class CSS class 名称。名称。p ui-datepickerui-datepicker：日期选择器的外层容器。如果日期选：日期选择器的外层容器。如果日期选择器是内联的，该元素会另外带有一个择器是内联的，该元素会另外带有

45、一个ui-datepicker-ui-datepicker-inline classinline class。如果设置了。如果设置了 isRTL isRTL 选项，该元素会另选项，该元素会另外带有一个外带有一个 ui-datepicker-rtl class ui-datepicker-rtl class。p ui-datepicker-headerui-datepicker-header：日期选择器的头部容器。：日期选择器的头部容器。p ui-datepicker-prevui-datepicker-prev：用于选择上一月的控件。：用于选择上一月的控件。p ui-datepicker-ne

46、xtui-datepicker-next：用于选择下一月的控件。：用于选择下一月的控件。p ui-datepicker-titleui-datepicker-title：日期选择器包含月和年的标题：日期选择器包含月和年的标题容器。容器。p ui-datepicker-monthui-datepicker-month：月的文本显示，如果设置了：月的文本显示，如果设置了 changeMonth changeMonth 选项则显示选项则显示元素。元素。p ui-datepicker-yearui-datepicker-year：年的文本显示，如果设置了：年的文本显示，如果设置了 changeYear

47、 changeYear 选项则显示选项则显示元素。元素。p ui-datepicker-calendarui-datepicker-calendar：包含日历的表格。：包含日历的表格。p ui-datepicker-week-endui-datepicker-week-end：周末的单元格。：周末的单元格。p ui-datepicker-other-monthui-datepicker-other-month：发生在某月但不是当前：发生在某月但不是当前月天数的单元格。月天数的单元格。p ui-datepicker-unselectableui-datepicker-unselectable：用

48、户不可选择的单元格。：用户不可选择的单元格。p ui-datepicker-current-dayui-datepicker-current-day：已选中日期的单元格。：已选中日期的单元格。p ui-datepicker-todayui-datepicker-today：当天日期的单元格。：当天日期的单元格。p ui-datepicker-buttonpaneui-datepicker-buttonpane：当设置：当设置 showButtonPanel showButtonPanel 选项时使用按钮面板（选项时使用按钮面板（buttonpanebuttonpane）。）。p ui-date

49、picker-currentui-datepicker-current：用于选择当天日期的按钮。：用于选择当天日期的按钮。如果如果 numberOfMonths numberOfMonths 选项用于显示多个月份，则使选项用于显示多个月份，则使用一些额外的用一些额外的 class class。p ui-datepicker-multiui-datepicker-multi：一个多月份日期选择器的最外：一个多月份日期选择器的最外层容器。该元素会根据要显示的月份个数另外带有层容器。该元素会根据要显示的月份个数另外带有ui-ui-datepicker-multi-2datepicker-multi-

50、2、ui-datepicker-multi-3 ui-datepicker-multi-3 或或 ui-datepicker-multi-4 class ui-datepicker-multi-4 class 名称。名称。p ui-datepicker-group ui-datepicker-group：分组内单独的选择器。该元素：分组内单独的选择器。该元素会根据它在分组中的位置另外带有会根据它在分组中的位置另外带有ui-datepicker-ui-datepicker-group-firstgroup-first、ui-datepicker-group-middle ui-datepicke