jQuery UI是建立在jQuery JavaScript库上的一组用户界面交互、特效、小部件及主题。通过使用jQuery UI，您可以创建高度交互的Web应用程序，或者是仅仅向窗体控件添加一个日期选择器。
jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的jQuery插件使用模式略有不同。所有的jQuery UI小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
为了更好地体验什么是jQuery UI，请查看jQuery UI 实例。
在实例演示部分，导航列出了jQuery UI提供的所有交互部件和小部件。选择一个交互部件或小部件，您将看到特定插件的一些演示配置。在每个演示中，您可以查看源代码，更改主题，且URL可以被添加书签。例如，您可以查看折叠面板部件填充空间实例演示页面。
jQuery UI是一个建立在jQuery JavaScript库上的小部件和交互库，您可以使用它创建高度交互的Web应用程序。
本节介绍了jQuery UI的一些工作特性。
jQuery UI继承了jQuery简易使用的特性，提供高度抽象接口，短期改善网站易用性。
采用MIT & GPL双协议授权，轻松满足自由产品至企业产品各种授权需求。
兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。
支持WAI-ARIA，通过标准XHTML代码提供渐进增强，保证低端环境可访问性。
提供近20种预设主题，并可自定义多达60项可配置样式规则，提供24种背景纹理选择。
从结构规划到代码编写，全程开放，文档、代码、讨论，人人均可参与。
Google为发布代码提供CDN内容分发网络支持。
开发包内置包含中文在内的40多种语言包。
在开始使用jQuery UI前，你需要正确的下载jQuery UI。
请从jQuery UI网站上的Download Builder（下载生成器）页面下载jQuery UI的副本。
jQuery UI的下载生成器（Download Builder）允许您选择您需要下载的组件，为项目获取一个自定义的库版本。
下述是创建自定义jQuery UI需要的三个步骤：
在下载生成器（Download Builder）页面的第一栏列出了jQuery UI所有的JavaScript组件分类：核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果库（Effects）。jQuery UI中的一些组件依赖于其他组件，当选中这些组件时，它所依赖的其他组件也都会自动被选中。您所选的组件将会合并到一个jQuery UI JavaScript文件。
在下载生成器（Download Builder）页面，您将看到一个文本框，列出了一系列为jQuery UI小部件预先设计的主题。您可以从这些提供的主题中选择一个，也可以使用 ThemeRoller自定义一个主题（详见后面章节的讲解）。
高级主题设置： 下载生成器（Download Builder）的主题部分也为主题提供了一些高级配置设置。如果您打算在一个页面上使用多个主题，这些字段会派上用场。如果您打算在一个页面上只使用一个主题，那么您完全可以跳过这些设置。
在下载生成器（Download Builder）中，最后一步是选择一个版本号。这个步骤很重要，因为jQuery UI的版本是配合特定的jQuery版本设计的。目前的版本有：
点击Download按钮，完成下载。您将得到一个包含您所选组件的自定义zip文件。
本节介绍了jQuery UI的简单使用。
当您下载好了jQuery UI，您将得到一个zip压缩包，该压缩包会包含下列文件：
/css//development-bundle//js/index.html在文本编辑器中打开index.html，您将看到引用了一些外部文件：主题、jQuery和jQuery UI。通常情况下，您需要在页面中引用这三个文件，以便使用jQuery UI 的窗体小部件和交互部件：
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" /><script src="js/jquery.min.js"></script><script src="js/jquery-ui.custom.min.js"></script>一旦您引用了这些必要的文件，您就能向您的页面添加一些jQuery小部件。比如，要制作一个日期选择器（datepicker）小部件，您需要向页面添加一个文本输入框，然后再调用.datepicker()，如下所示：
HTML:
<input type="text" name="date" id="date" />JavaScript:
$( "#date" ).datepicker();
如需查看jQuery UI小部件和交互部件的实例演示，请访问jQuery UI 实例。
您已经了解了jQuery UI下载生成器（Download Builder）如何定制一个包含您所需选项的自定义版本的值，在本节内容中，您将看到其他的定制方式。
jQuery UI中的每个插件都有一个默认配置，默认配置值一般是根据最基本最常见的使用情况设置的。如果您想要让某个插件设置成非默认值，您可以使用"options"重写它的默认设置。选项是一组属性，作为参数传递给jQuery UI小部件。例如，滑块（slider）小部件具有orientation选项，该选项允许您指定滑块是水平的还是垂直的。为了设置滑块的该选项，您只需将它作为一个参数传递，如下所示：
$( "#mySliderDiv" ).slider({ orientation: "vertical"});您可以传递更多不同的选项，每个选项之间用逗号分隔：
$( "#mySliderDiv" ).slider({ orientation: "vertical", min: 0, max: 150, value: 50});请记得选项需放在大括号{ }内。上面的实例只是一个简单的讲解，如需获取整套jQuery UI小部件的详细信息，请查看jQuery UI 实例。
如果您想要设计自己的主题，jQuery UI提供了一个非常完美的用于主题定制的应用程序，这就是ThemeRoller。具体定制请访问jQuery UI ThemeRoller。
ThemeRoller为所有使用jQuery UI小部件设计的元素提供了一个自定义接口。当您调整左栏中的"levers"，右栏中的小部件将根据您的设计进行显示。ThemeRoller的Gallery选项卡提供了一些与设计主题，与下载生成器（Download Builder）页面提供的一样。您可以基于这些主题做调整，或者直接下载。
当您点击ThemeRoller页面中的"Download theme"按钮，将跳转到下载生成器（Download Builder）页面，您的自定义主题会在主体下拉菜单中自动选中。您可以进一步配置下载包。一旦下载完成，您将看到example.html页面使用了您自定义的主题。
提示： 如果您需要编辑您的主题，只需打开CSS文件，找到第43行，"To view and modify this theme, visit ..."，该url即为在ThemeRoller中打开主题进行编辑的链接。
jQuery UI包含了许多维持状态的小部件（Widget），它与典型的jQuery插件使用模式略有不同。jQuery UI小部件的安装方式与大部分jQuery插件的安装方式类似，jQuery UI 的小部件是基于部件库（Widget Factory）创建的，小部件库提供了通用的API。所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
本节将通过进度条（progressbar）小部件代码实例介绍常见的功能。
为了跟踪部件的状态，我们首先介绍一下小部件的全生命周期。当小部件安装时，生命周期开始。我们只需要在一个或多个元素上调用插件，即安装了小部件。
$( "#elem" ).progressbar();上述操作将会初始化jQuery对象中的每个元素，在本例中，元素id为"elem"。因为我们调用无参数的.progressbar()方法，小部件则会按照它的默认选项进行初始化。我们可以在安装时传递一组选项，这样既可重写默认选项。
$( "#elem" ).progressbar({ value: 20 });安装时传递的选项数目多少可根据我们的需要而定。任何我们未传递的选项则都使用它们的默认值。
选项是小部件状态的组成部分，所以我们也可以在安装后再进行设置选项。我们将在后续的option方法中介绍这部分内容。
既然小部件已经初始化，我们就可以查询它的状态，或者在小部件上执行动作。所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法，我们可以向jQuery插件传递方法的名称。例如，为了在进度条（progressbar）小部件上调用value方法，我们应该使用：
$( "#elem" ).progressbar( "value" );如果方法接受参数，我们可以在方法名后传递参数。例如，为了传递参数40给value方法，我们可以使用下述操作：
$( "#elem" ).progressbar( "value", 40 );就像jQuery中的其他方法一样，大部分的小部件方法为链接返回jQuery对象。
$( "#elem" ) .progressbar( "value", 90 ) .addClass( "almost-done" );每个小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。
正如我们前面所提到的，我们可以在初始化之后通过option方法改变选项。例如，我们可以通过调用option方法将progressbar（进度条）的value设置为30。
$( "#elem" ).progressbar( "option", "value", 30 );请注意，这与之前我们调用value方法的实例有所不同。在本实例中，我们调用option方法，改变value选项为30。
我们也可以为某个选项获取当前的值。
$( "#elem" ).progressbar( "option", "value" );另外，我们可以通过给option方法传递一个对象，一次更新多个选项。
$( "#elem" ).progressbar( "option", { value: 100, disabled: true});您也许注意到option方法有着与jQuery代码中取值器和设置器相同的标志，就像.css()和.attr()。唯一的不同就是您必须传递字符串"option"作为第一个参数。
disable方法禁用小部件。在进度条（progressbar）实例中，这会改变样式让进度条显示为禁用状态。
$( "#elem" ).progressbar( "disable" );调用disable方法等同于设置disabled选项为true。
enable方法是disable方法的对立面。
$( "#elem" ).progressbar( "enable" );调用enable方法等同于设置disabled选项为false。
如果您不再需要小部件，那么可以销毁它，返回到最初的标记。这意味着小部件生命周期的终止。
$( "#elem" ).progressbar( "destroy" );一旦您销毁了一个小部件，您就不能在该部件上调用任何方法，除非您再次初始化这个小部件。如果您要移除元素，可以直接通过.remove()，也可以通过 .html()或.empty()修改祖先，小部件会自动销毁。
一些小部件生成包装器元素，或与原始元素断开连接的元素。在下面的实例中，widget将返回生成的元素。在进度条（progressbar）实例中，没有生成的包装器，widget方法返回原始的元素。
$( "#elem" ).progressbar( "widget" );所有的小部件都有跟他们各种行为相关的事件，用于在状态改变时通知您。对于大多数的小部件，当事件被触发时，名称以小部件名称为前缀。例如，我们可以绑定进度条的change事件，一旦值发生变化时就触发。
$( "#elem" ).bind( "progressbarchange", function() { alert( "The value has changed!" );});每个事件都有一个相对应的回调，作为选项进行呈现。我们可以使用进度条（progressbar）的change回调，这等同于绑定progressbarchange事件。
$( "#elem" ).progressbar({ change: function() { alert( "The value has changed!" ); }});大多数事件是针对特定的小部件，所有的小部件都有一个公共的create事件。该事件在小部件被创建时即被触发。
本节将介绍jQuery UI主题。
jQuery UI平台包含两个子框架：小部件框架和CSS框架。
所有的jQuery UI插件都允许开发人员无缝集成UI小部件到他们网站或应用程序的外观和感观。每个插件通过CSS定义样式，且包含了两层样式信息：标准的jQuery UI CSS 框架样式和具体的插件样式。
jQuery UI CSS框架提供了语义表示的类，用来表明小部件内元素的角色，比如标题、内容或可点击区域。这些在所有的小部件中都是一致的，一个可点击的tab（标签页）、accordion（折叠面板）或button（按钮）都有相同的ui-state-defaultclass，用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时，这个class就变成ui-state-hover，当选中这些元素时则变成ui-state-active。这些class的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。
CSS框架样式封装在一个单独的文件中，名为ui.theme.css。这个文件时通过ThemeRoller应用程序来修改的。框架样式只包含影响外观和感观的属性，只要是颜色、背景图像、图标等。所以这些是"安全的"样式，不会影响到插件的功能。这种分隔意味着开发人员可以通过在theme.css文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者bug修复将是可用的，这些不通过修改即可与主题一起使用。
由于框架样式只覆盖了外观和感观，所以还需要包含具体的插件样式表，这些样式表包括了所有额外的让小部件具有功能性的结构样式规则，比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于themes/base文件夹内，且配合插件进行命名，比如"jquery.ui.accordion.css"。这些样式必须认真编辑，因为它们与脚本一起提供了框架样式的覆盖。
我们鼓励所有的开发人员创建jQuery插件，jQuery UI CSS框架使得最终用户更容易定制主题和使用插件。
下面列出了三种主题化jQuery UI插件的一般方法：
ui.theme.css文件和一个包含了所有必需的背景图像及图标精灵的images文件夹。这个方法是最早的创建和维护主题的方式，但是它对ThemeRoller中提供的选项限制了自定义。ui.theme.css文件，或者任意一个独立插件的样式表。例如，您可以很容易地调整所有按钮的角半径为不同于其他UI组件的值，或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围，您甚至可以在一个UI中同时使用多个主题。为了易于维护，建议只更改ui.theme.css文件和图像。ThemeRoller是一个Web应用程序，jQuery UI能够从中设计和下载自定义主题。您可以访问jQuery UI ThemeRoller进行主题定制。
jQuery UI ThemeRoller是由波士顿的Filament Group, Inc设计和开发的。
在ThemeRoller的界面上存在不同的面板，各面板分别是全局字体和圆角半径设置、小部件容器样式、可点击元素的互动状态，及覆盖和阴影的各种样式。这些面板允许配置各种CSS属性，比如字体尺寸、颜色、粗细、背景颜色和纹理、边框颜色、文本颜色、图标颜色、圆角半径，等等。
ThemeRoller主题可以通过永久链接URL进行查看，它包含一些预先设计的主题可供选择。主题馆（Gallery）可以通过位于应用程序界面顶端的标签栏进行访问。从主题馆（Gallery）中，您可以预览和下载主题，甚至可以选择一个主题，然后切换到"Roll Your Own"标签页进行调整。
当您设计完主题后，您可以下载主题以便在项目中进行使用。ThemeRoller在顶部有一个"Download theme（下载主题）"按钮，可以生成一个zip压缩包，包含了所有的主题相关文件。下载文件中的图像是按照您的规格进行生成的，并保存为高质量的PNG文件。
您的主题将包含图像和CSS，组成了jQuery UI CSS框架的自定义版本，包含了所有插件的图像和CSS。
一旦下载了主题，解压缩后，您将看到一个名为themes的文件夹。该文件夹包括了主题所需的CSS和图像。复制主题文件夹到您的项目中，并在页面中链接 themes/all.css文件。
ThemeRoller生成了一个jQuery UI CSS框架的自定义版本，用于开发您自己的ThemeRoller-ready jQuery组件。通过这个框架生成的类被设计来提供通用的用户界面的设计情况，包括状态、图标以及各种辅助类。
如需了解更多jQuery UI CSS框架的开发信息，请查看主题化 API 文档。
jQuery UI的CSS框架功能强大，它是为了创建自定义jQuery小部件而设计的。框架包括很多适合多数用户界面需要的CSS类，且可使用jQuery UI ThemeRoller进行维护。通过使用jQuery UI CSS框架创建您自己的UI组件。您需采用共享标记公约，以便在插件社区的代码集成。
以下的CSS类根据样式是否是固定的结构化的，或者是否是可主题化的（颜色、字体、背景等），来分别定义在ui.core.css和ui.theme.css两个文件中。这些类被设计来用于用户界面元素，以便获得整个应用程序的视觉一致性，可通过jQuery UI ThemeRoller对组件进行主题化。
.ui-helper-hidden：对元素应用display: none。.ui-helper-hidden-accessible：对元素应用访问隐藏（通过页面绝对定位）。.ui-helper-reset：UI元素的基本样式重置。重置的元素比如：padding、margin、text-decoration、list-style等等。.ui-helper-clearfix：对父元素应用浮动包装属性。.ui-helper-zfix：对<iframe>元素应用iframe "fix" CSS。.ui-widget：对所有小部件的外部容器应用的Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和1em的字体尺寸，以应对 Windows浏览器中的继承问题。.ui-widget-header：对标题容器应用的Class。对元素及其子元素的文本、链接、图标应用标题容器样式。.ui-widget-content：对内容容器应用的Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）.ui-state-default：对可点击按钮元素应用的Class。对元素及其子元素的文本、链接、图标应用"clickable default"容器样式。.ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable hover"容器样式。.ui-state-focus：当键盘聚焦在可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable hover"容器样式。.ui-state-active：当鼠标点击可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable active"容器样式。.ui-state-highlight：对高亮或者选中元素应用的Class。对元素及其子元素的文本、链接、图标应用"highlight"容器样式。.ui-state-error：对错误消息容器元素应用的Class。对元素及其子元素的文本、链接、图标应用"error"容器样式。.ui-state-error-text：对只有无背景的错误文本颜色应用的Class。可用于表单标签，也可以对子图标应用错误图标颜色。.ui-state-disabled：对禁用的UI元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。.ui-priority-primary：对第一优先权的按钮应用的Class。应用粗体文本。.ui-priority-secondary：对第二优先权的按钮应用的Class。应用正常粗细的文本，对元素应用轻微的透明度。.ui-icon：对图标元素应用的基本Class。设置尺寸为16px方块，隐藏内部文本，对"content"状态的精灵图像设置背景图像。注意： .ui-iconclass将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default容器内的ui-icon元素将根据ui-state-default的图标颜色进行着色。在声明.ui-iconclass之后，接着您可以声明一个秒速图标类型的class。通常情况下，图标class遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一个指向右侧的三角形图标，如下所示：.ui-icon-triangle-1-e
jQuery UI的ThemeRoller在它的预览一栏中提供了全套的CSS框架图标。将鼠标悬浮在图标上可查看class名称。
.ui-corner-tl：对元素的左上角应用圆角半径。.ui-corner-tr：对元素的右上角应用圆角半径。.ui-corner-bl：对元素的左下角应用圆角半径。.ui-corner-br：对元素的右下角应用圆角半径。.ui-corner-top：对元素上边的左右角应用圆角半径。.ui-corner-bottom：对元素下边的左右角应用圆角半径。.ui-corner-right：对元素右边的上下角应用圆角半径。.ui-corner-left：对元素左边的上下角应用圆角半径。.ui-corner-all：对元素的所有四个角应用圆角半径。.ui-widget-overlay：对覆盖屏幕应用100%宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。.ui-widget-shadow：对覆盖应用的Class，设置了不透明度、上偏移/左偏移，以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距（padding）进行应用的。偏移是通过设置上外边距（margin）和左外边距（margin）进行应用的（可以是正数，也可以是负数）。主题是以特定的方式来增加他们的易用性。通常，文件目录结构如下所示：
themename/– 您的主题必须完全包含在一个单独的以主题名称命名的文件夹内。themename/themename.css– 这是基本的CSS文件。无论使用了哪个插件，该文件都必须在每个使用主题的页面中引用。该文件应该是轻量级的，只包括要点。themename/themename.pluginname.css– 您支持的每个插件都需要一个CSS文件。插件的名称应直接包含在文件名中。例如，如果您为tabs（标签页）插件进行主题化，则有：themename.tabs.js。themename/img.png– 您的主题可以包含图像。它们可以根据您的喜好进行命名，这里没有特定的命名惯例。如需了解主题文件结构是如何完成的实例，请访问jQuery UI 基本主题。
为主题编写样式是非常简单的，这是因为主题的灵活性。
所有的主题都应该有一个基本的CSS class。这个主要的class允许用户启用禁用主题。您的根class的格式应该是.ui-themename。且它在HTML文件中的用法如下所示：
<html><head> <title>My Site</title> <link rel="stylesheet" href="themename/themename.css" /> <link rel="stylesheet" href="othertheme/othertheme.css" /> <link rel="stylesheet" href="othertheme/othertheme.dialog.css" /></head><body class="ui-themename"> <div class="ui-othertheme"> <div class="ui-dialog">This is a modal dialog.</div> </div></body></html>在上面的实例中，发生了一些重要的事情：
<div>及其中的每个元素（包括模态对话框）都是根据othertheme的样式进行主题化的。如果我们打开themename.css文件进行查看，我们可以看到如下代码：
body.ui-themename { background:#111; color:snow; }.ui-themename a, a.ui-themename { color:#68D; outline:none; }.ui-themename a:visited, a.ui-themename:visited { color:#D66; }.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }请注意，themename.css文件只包括全局通用的样式信息，特定插件的样式信息不在这里进行定义。这里的样式对所有主题都是适用的。不用担心一个主题会占据多个文件 - 这些会在创建和下载的过程被简化。
jQuery UI部件库（Widget Factory）是一个可扩展的基础，所有的jQuery UI小部件都是在上面进行创建的。使用部件库（Widget Factory）来创建插件，提供了方便的状态管理，同时也为一些常见的任务提供了便捷，比如暴露插件方法，实例化后改变选项等。
jQuery UI部件库的相关内容如下：
jQuery UI的部件库（Widget Factory）使得创建小部件变得更加容易，这些小部件扩展了已有小部件的功能。这样子您就能在已有的基础上创建出功能强大的小部件，也可以在已有的小部件功能上做细微的调整。
注意：在学习本章节之前，需要明白什么是部件库（Widget Factory），及它是怎么工作的。如果您对这些知识还不熟悉，那么请先查看如何使用部件库（Widget Factory）章节。
通过部件库（Widget Factory）创建小部件是通过向$.widget()传递小部件名称和一个原型对象来完成的。下面的实例是在"custom"命名空间中创建一个 "superDialog"小部件。
$.widget( "custom.superDialog", {} );为了支持扩展，$.widget()可选性地接受作为父部件使用的小部件的构造函数。当指定一个父部件时，把它作为第二个参数进行传递，放在小部件名称后面，在小部件原型对象前面。
就像上面的实例，下面也要在"custom"命名空间中创建一个"superDialog"小部件。但是这次传递的是jQuery UI 的 dialog（对话框）小部件的构造函数（$.ui.dialog），表示superDialog小部件应该使用jQuery UI的dialog（对话框）小部件作为父部件。
$.widget( "custom.superDialog", $.ui.dialog, {} );在这里，superDialog和dialog两个小部件实质上是等价的，只是名称和命名空间不同而已。为了让我们新的小部件更具特点，我们可以添加一些方法到它的原型对象上。
小部件的原型对象是传递给$.widget()的最后一个参数。到目前为止，我们的实例使用的是一个空的对象。现在让我们给这个对象添加一个方法：
$.widget( "custom.superDialog", $.ui.dialog, { red: function() { this.element.css( "color", "red" ); }}); // Create a new <div>, convert it into a superDialog, and call the red() method.$( "<div>I am red</div>" ) .superDialog() .superDialog( "red" );现在superDialog有一个red()方法，这会把它的文本颜色改为红色。请注意，部件库（Widget Factory）是如何自动设置this为小部件的实例对象。如需了解实例上所有可用的方法和属性列表，请访问部件库（Widget Factory） API 文档。
有时候，您需要调整或添加已有部件方法的行为。您可以把方法名称指定为原型对象上需要重载的方法名称。下面的实例重载了 dialog（对话框）的open()方法。由于对话框默认是打开的，当运行这段代码时，"open"将会被记录。
$.widget( "custom.superDialog", $.ui.dialog, { open: function() { console.log( "open" ); }}); // Create a new <div>, and convert it into a superDialog.$( "<div>" ).superDialog();当运行这段代码时，有一个问题。由于我们重载了open()的默认行为，所以dialog（对话框）不再显示在屏幕上。
当我们在原型对象上使用方法，我们实际上是重载了原始的方法，在原型链中使用了一个新的方法。
为了让父部件方法可用，部件库（Widget Factory）提供了两个方法：_super()和_superApply()。
_super() 和 _superApply() 来访问父部件_super()和_superApply()在父部件中调用了同样的方法。请看下面的实例。就像上一个实例，这个实例也重载了open()方法来记录"open"。然而，这次运行_super()是调用了dialog（对话框）的open()，并打开对话框。
$.widget( "custom.superDialog", $.ui.dialog, { open: function() { console.log( "open" ); // Invoke the parent widget's open(). return this._super(); }}); $( "<div>" ).superDialog();_super()和_superApply()实际上等同于最初的Function.prototype.call()和Function.prototype.apply()方法。因此，_super()接受一个参数列表，_superApply()接受一个数组作为参数。下面的实例演示了这二者之间的不同。
$.widget( "custom.superDialog", $.ui.dialog, { _setOption: function( key, value ) { // Both invoke dialog's setOption() method. _super() requires the arguments // be passed as an argument list, _superApply() as a single array. this._super( key, value ); this._superApply( arguments ); }});jQuery UI 1.9添加了重定义小部件的功能。因此，可以不用创建一个新的小部件，我们只需要传递$.widget()这样一个已有的小部件名称和构造函数即可。下面的实例在open()中添加了相同的记录，但不是通过创建一个新的小部件来完成的。
$.widget( "ui.dialog", $.ui.dialog, { open: function() { console.log( "open" ); return this._super(); }}); $( "<div>" ).dialog();通过这个方法，我们可以扩展一个已有的小部件方法，但是仍然可以使用_super()来访问原始的方法 - 这些都不是通过创建一个新的小部件来完成的，而是直接重定义小部件即可。
当在小部件扩展及它们的插件之间进行交互时候，有一点值得注意，父部件的插件不能用来调用子部件元素上的方法。下面的实例演示了这一点。
$.widget( "custom.superDialog", $.ui.dialog, {} ); var dialog = $( "<div>" ).superDialog(); // This works.dialog.superDialog( "close" ); // This doesn't.dialog.dialog( "close" );上面的实例中，父部件的插件，dialog()，不能调用superDialog元素上的close()方法。如需了解更多调用小部件方法的知识，请查看小部件（Widget）方法调用。
目前为止，我们看到的实例都有在小部件原型上扩展的方法。在原型上重载的方法影响了小部件的所有实例。
为了演示这一点，请看下面的实例。dialog（对话框）的两个势力都使用了相同的open()方法。
$.widget( "ui.dialog", $.ui.dialog, { open: function() { console.log( "open" ); return this._super(); }}); // Create two dialogs, both use the same open(), therefore "open" is logged twice.$( "<div>" ).dialog();$( "<div>" ).dialog();有时候，您只需要改变小部件的某个实例的行为。为了做到这点，您需要使用正常的JavaScript属性分配，获得对实例的引用，并重载该方法。具体如下面实例所示。
var dialogInstance = $( "<div>" ) .dialog() // Retrieve the dialog's instance and store it. .data( "ui-dialog" ); // Override the close() method for this dialogdialogInstance.close = function() { console.log( "close" );}; // Create a second dialog$( "<div>" ).dialog(); // Select both dialogs and call close() on each of them.// "close" will only be logged once.$( ":data(ui-dialog)" ).dialog( "close" );个性化实例的重载方法技术是完美的一次性定制。
本节介绍了jQuery UI小部件（Widget）方法调用的两种方式。
小部件（Widget）是通过部件库（Widget Factory）使用方法来改变他们初始化后的状态和执行动作而被创建的。有两种调用小部件方法的方式 - 通过部件库（Widget Factory）创建的插件，或者通过调用元素实例对象上的方法。
使用小部件的插件调用方法，把方法名称以字符串形式进行传递。例如，点击这里查看，如何调用dialog（对话框）小部件的close()方法。
$( ".selector" ).dialog( "close" );如果方法要求参数 ，请作为额外的参数传递给插件。点击这里查看，如何调用 dialog（对话框）的option()方法。
$( ".selector" ).dialog( "option", "height" );这会返回dialog（对话框）的height选项的值。
每个小部件的每个实例都是使用jQuery.data()存储在元素上。为了检索实例对象，请使用小部件的全称作为键名调用jQuery.data()。具体如下面实例所示。
var dialog = $( ".selector" ).data( "ui-dialog" );在您引用实例对象之后，可以直接在上面调用方法。
var dialog = $( ".selector" ).data( "ui-dialog" );dialog.close();在jQuery UI 1.11中，新的instance()方法会使得这个过程变得更简单。
$( ".selector" ).dialog( "instance" ).close();大多数通过小部件的插件调用的方法将返回一个jQuery对象，所以方法调用可以通过额外的jQuery方法链接。当在实例上进行调用时，则会返回undefined。具体如下面实例所示。
var dialog = $( ".selector" ).dialog(); // Instance invocation - returns undefineddialog.data( "ui-dialog" ).close(); // Plugin invocation - returns a jQuery objectdialog.dialog( "close" ); // Therefore, plugin method invocation makes it possible to// chain method calls with other jQuery functionsdialog.dialog( "close" ) .css( "color", "red" );例外的是，返回小部件相关信息的那些方法。例如dialog（对话框）的isOpen()方法。
$( ".selector" ) .dialog( "isOpen" ) // This will throw a TypeError .css( "color", "red" );这会产生一个TypeError错误，因为isOpen()返回的是一个布尔值，而不是一个jQuery对象。
编写jQuery插件与向jQuery.prototype（通常显示为$.fn）添加方法一样简单，且需要遵循一些简单的规则，比如返回this。所以为什么会存在部件库（Widget Factory）？
在本章节中，我们将讲解部件库（Widget Factory）的好处，并了解何时使用它，以及为什么要使用它。
大多数jQuery插件是无状态的，它们执行一些动作即完成了它们的任务。例如，如果您使用.text( "hello" )设置元素的文本，没有安装阶段，结果都是一样的。对于这种类型的插件，它只是扩展了jQuery的原型。
然而，一些插件是有状态的，它们有全生命周期、维持状态以及对变化的反应。这些插件需要大量专门的代码来初始化和状态管理（有时是销毁）。这就导致出现了用于创建有状态插件的模板。更糟糕的是，每个插件的作者按照不同的方式进行管理插件的生命周期和状态，这就导致了不同的插件有不同的API样式。部件库（Widget Factory）旨在解决这些问题，它移除了模板，并为插件创建了一个一致的API。
部件库（Widget Factory）定义了如何创建和销毁小部件，获取和设置选项，调用方法，以及监听小部件触发的事件。通过使用部件库（Widget Factory）来创建有状态的插件，会自动符合定义的标准，让新用户更容易使用您的插件。另外，部件库（Widget Factory）还能实现定义接口的功能。如果您对部件库（Widget Factory）提供的API还不熟悉，请查看如何使用部件库（Widget Factory）。
当您创建一个接受选项的插件时，您应该为尽可能多的选项定义defaults。然后在初始化时，把用户提供的选项与defaults进行合并。您也可以暴露defaults，这样用户就可以更改默认值。在jQuery插件中，一个常用的模式如下所示：
$.fn.plugin = function( options ) { options = $.extend( {}, $.fn.plugin.defaults, options ); // Plugin logic goes here.}; $.fn.plugin.defaults = { param1: "foo", param2: "bar", param3: "baz"};部件库（Widget Factory）也提供了这个功能，并在这上面做了改进。使用部件库（Widget Factory）之后，它将如下所示。
$.widget( "ns.plugin", { // Default options. options: { param1: "foo", param2: "bar", param3: "baz" }, _create: function() { // Options are already merged and stored in this.options // Plugin logic goes here. } });在本节中，我们将介绍jQuery UI如何使用部件库。
在下述的示例中，我们将创建一个进度条，这可以通过调用jQuery.widget()来完成，它带有两个参数：一个是要创建的插件名称，一个是包含支持插件的函数的对象文字。当插件被调用时，它将创建一个新的插件实例，所有的函数都将在该实例的语境中被执行。这与两种重要方式的标准jQuery插件不同。首先，语境是一个对象，不是DOM元素。其次，语境总是一个单一的对象，不是一个集合。
$.widget( "custom.progressbar", { _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }});插件的名称必须包含命名空间，在这个实例中，我们使用了custom命名空间。您只能创建一层深的命名空间，因此，custom.progressbar是一个有效的插件名称，而very.custom.progressbar不是一个有效的插件名称。
我们看到部件库（Widget Factory）为我们提供了两个属性。this.element是一个包含一个元素的jQuery对象。如果我们的插件在包含多个元素的jQuery对象上调用，则会为每个元素创建一个单独的插件实例，且每个实例都会有自己的this.element。第二个属性，this.options，是一个包含所有插件选项的键名/键值对的哈希（hash）。这些选项可以被传给插件，如下所示：
$( "<div></div>" ) .appendTo( "body" ) .progressbar({ value: 20 });当我们调用jQuery.widget()，它通过给jQuery.fn（用于创建标准插件的系统） 添加函数来扩展jQuery。所添加的函数名称是基于您传给jQuery.widget() 的名称，不带命名空间-"progressbar"。传给插件的选项是在插件实例中获取设置的值。如下面的实例所示，我们可以为任意一个选项指定默认值。当设计您的API时，您应该清楚你的插件的最常见的使用情况，以便您可以设置适当的默认值，且确保使所有的选项真正可选。
$.widget( "custom.progressbar", { // Default options. options: { value: 0 }, _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }});现在我们可以初始化我们的进度条，我们将通过在插件实例上调用方法来执行动作。为了定义一个插件方法，我们只在我们传给jQuery.widget()的对象中引用函数。我们也可以通过给函数名加下划线前缀来定义"private"方法。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }, // Create a public method. value: function( value ) { // No value passed, act as a getter. if ( value === undefined ) { return this.options.value; } // Value passed, act as a setter. this.options.value = this._constrain( value ); var progress = this.options.value + "%"; this.element.text( progress ); }, // Create a private method. _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } }); 为了在插件实例上调用方法，您可以向jQuery插件传递方法的名称。如果您调用的方法接受参数，您只需简单地在方法名后面传递这些参数即可。
注意：通过向同一个用于初始化插件的jQuery函数传递方法名来执行方法。这样做是为了在保持链方法调用时防止jQuery命名空间污染。在本章节的后续，我们将看到看起来更自然的其他用法。
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ value: 20 }); // Get the current value.alert( bar.progressbar( "value" ) ); // Update the value.bar.progressbar( "value", 50 ); // Get the current value again.alert( bar.progressbar( "value" ) );option()方法是自动提供给插件的。option()方法允许您在初始化后获取并设置选项。该方法像jQuery的.css()和.attr()方法：您可以只传递一个名称作为取值器来使用，也可以传递一个名称和值作为设置器使用，或者传递一个键名/键值对的哈希来设置多个值。当作为取值器使用时，插件将返回与传入名称相对应的选项的当前值。当作为设置器使用时，插件的_setOption方法将被每个被设置的选项调用。我们可以在我们的插件中指定一个_setOption方法来反应选项更改。对于更改选项要独立执行的动作，我们可以重载_setOptions。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } }); 最简单的扩展插件的方法是添加回调，这样用户就可以在插件状态发生变化时做出反应。我们可以看下面的实例如何在进度达到100%时添加回调到进度条。_trigger()方法有三个参数：回调名称，一个启动回调的jQuery事件对象，以及一个与事件相关的数据哈希。回调名称是唯一一个必需的参数，但是对于想要在插件上实现自定义功能的用户，其他的参数是非常有用的。例如，如果我们创建一个可拖拽插件，我们可以在触发拖拽回调时传递mousemove事件，这将允许用户对基于由事件对象提供的x/y坐标上的拖拽做出反应。请注意，传递到_trigger()的原始的事件必须是一个jQuery事件，而不是一个原生的浏览器事件。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); if ( this.options.value == 100 ) { this._trigger( "complete", null, { value: 100 } ); } }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } }); 回调函数本质上只是附加选项，所以您可以像其他选项一样获取并设置它们。无论何时执行回调，都会有一个相对应的事件被触发。事件类型是通过连接插件的名称和回调函数名称确定的。回调和事件都接受两个相同的参数：一个事件对象和一个与事件相关的数据哈希，具体如下面实例所示。您的插件可能需要包含防止用户使用的功能，为了做到这点，最好的方法就是创建爱你可撤销的回调。用户可以撤销回调或者相关的事件，与他们撤销任何一个原生事件一样，都是通过调用 event.preventDefault()或返回false来实现的。如果用户撤销回调，_trigger()方法将返回false，这样您就能在插件内实现合适的功能。
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ complete: function( event, data ) { alert( "Callbacks are great!" ); } }) .bind( "progressbarcomplete", function( event, data ) { alert( "Events bubble and support many handlers for extreme flexibility." ); alert( "The progress bar value is " + data.value ); }); bar.progressbar( "option", "value", 100 );现在我们已经看到如何使用部件库（Widget Factory）创建一个插件，接下来让我们看看它实际上是如何工作的。当您调用jQuery.widget()时，它将为插件创建一个构造函数，并设置您为插件实例传入的作为原型的对象。所有自动添加到插件的功能都来自一个基本的小部件原型，该原型定义为jQuery.Widget.prototype。当创建插件实例时，会使用jQuery.data把它存储在原始的DOM元素上，插件名作为键名。
由于插件实例直接链接到DOM元素上，您可以直接访问插件实例，而不需要遍历插件方法。这将允许您直接在插件实例上调用方法，而不需要传递字符串形式的方法名，同时您也可以直接访问插件的属性。
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar() .data( "progressbar" ); // Call a method directly on the plugin instance.bar.option( "value", 50 ); // Access properties on the plugin instance.alert( bar.options.value );您也可以在不遍历插件方法的情况下创建一个实例，通过选项和元素直接调用构造函数即可：var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") ); // Same result as before.alert( bar.options.value );插件有构造函数和原型的最大好处是易于扩展插件。通过添加或修改插件原型上的方法，我们可以修改插件所有实例的行为。例如，如果我们想要向进度条添加一个方法来重置进度为0%，我们可以向原型添加这个方法，它将在所有插件实例上可调用。
$.custom.progressbar.prototype.reset = function() { this._setOption( "value", 0 );};如需了解扩展小部件的更多细节，以及如何在一个已有的小部件上创建一个全新的小部件的更多细节，请查看通过部件库（Widget Factory）扩展小部件（Widget）。
在某些情况下，允许用户应用插件，然后再取消应用。您可以通过_destroy()方法做到这一点。在_destroy()方法内，您应该撤销在初始化和后期使用期间插件所做的一切动作。_destroy()是通过.destroy()方法被调用的，.destroy()方法是在插件实例绑定的元素从DOM上移除时被自动调用的，所以这可被用于垃圾回收。基本的.destroy()方法也处理一些常用的清理操作，比如从小部件的DOM元素上移除实例引用，从元素上解除绑定小部件命名空间中的所有事件，解除绑定所有使用_bind()添加的事件。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); if ( this.options.value == 100 ) { this._trigger( "complete", null, { value: 100 } ); } }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; }, _destroy: function() { this.element .removeClass( "progressbar" ) .text( "" ); } }); 部件库（Widget Factory）只是创建有状态插件的一种方式。这里还有一些其他不同的模型可以使用，且每个都有各自的优势和劣势。部件库（Widget Factory）解决了很多常见的问题，且大大提高了效率，同时也大大提高了代码的重用性，使它适合于jQuery UI及其他有状态的插件。
请注意，在本章节中我们使用了custom命名空间。ui命名空间被官方的jQuery UI插件保留。当创建您自己的插件时，您应该创建自己的命名空间。这样才能更清楚插件来自哪里，属于哪个范围。
jQuery UI在jQuery内置的特效上添加了一些功能。jQuery UI支持颜色动画和Class转换，同时也提供了一些额外的Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。
| API | 描述 | 也属于类别 |
|---|---|---|
| .addClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的Class。 | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| 百叶窗特效（Blind Effect） | 百叶窗特效（Blind Effect）通过将元素包裹在一个容器内，采用"拉百叶窗"效果来隐藏或显示元素。 | |
| 反弹特效（Bounce Effect） | 反弹特效（Bounce Effect）反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。 | |
| 剪辑特效（Clip Effect） | 剪辑特效（Clip Effect）通过垂直或水平方向夹剪元素来隐藏或显示一个元素。 | |
| 颜色动画（Color Animation） | 使用.animate()实现颜色动画效果。 | |
| 降落特效（Drop Effect） | 降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。 | |
| Easings | Easing函数指定动画在不同点上的行进速度。 | |
| .effect() | 对一个元素应用动画特效。 | 特效核心（Effects Core） | 方法（Method） |
| 爆炸特效（Explode Effect） | 爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素。 | |
| 淡入淡出特效（Fade Effect） | 淡入淡出特效（Fade Effect）通过淡入淡出元素来隐藏或显示一个元素。 | |
| 折叠特效（Fold Effect） | 折叠特效（Fold Effect）通过折叠元素来隐藏或显示一个元素。 | |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method） |
| 突出特效（Highlight Effect） | 突出特效（Highlight Effect）通过首先改变背景颜色来隐藏或显示一个元素。 | |
| 膨胀特效（Puff Effect） | 通过在缩放元素的同时隐藏元素来创建膨胀特效（Puff Effect）。 | |
| 跳动特效（Pulsate Effect） | 跳动特效（Pulsate Effect）通过跳动来隐藏或显示一个元素。 | |
| .removeClass() | 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的Class。 | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| 缩放特效（Scale Effect） | 按照某个百分比缩放元素。 | |
| 震动特效（Shake Effect） | 垂直或水平方向多次震动元素。 | |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method） |
| 尺寸特效（Size Effect） | 调整元素尺寸到指定宽度和高度。 | |
| 滑动特效（Slide Effect） | 把元素滑动出视区。 | |
| .switchClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的Class。 | 特效核心（Effects Core） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method） |
| .toggleClass() | 当动画样式改变时，根据Class是否存在以及switch参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个Class。 | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| 转移特效（Transfer Effect） | 把一个元素的轮廓转移到另一个元素。 |
Effects Core是由jquery.ui.effect.js提供的功能。除了下面列出的方法，jquery.ui.effect.js还包括一些Easings。
| API | 描述 | 也属于类别 |
|---|---|---|
| .addClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的Class。 | 特效（Effects） | 方法重载（Method Overrides） |
| 颜色动画（Color Animation） | 使用.animate()实现颜色动画效果。 | |
| .effect() | 对一个元素应用动画特效。 | 特效（Effects） | 方法（Method） |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效（Effects） | 方法重载（Method Overrides） | 方法（Method） |
| .removeClass() | 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的Class。 | 特效（Effects） | 方法重载（Method Overrides） |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效（Effects） | 方法重载（Method Overrides） | 方法（Method） |
| .switchClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的Class。 | 特效（Effects） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效（Effects） | 方法重载（Method Overrides） | 方法（Method） |
| .toggleClass() | 当动画样式改变时，根据Class是否存在以及switch参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个Class。 | 特效（Effects） | 方法重载（Method Overrides） |
jQuery UI 1.10 API文档中有一套基于鼠标的交互。
| API | 描述 | 也属于类别 |
|---|---|---|
| 可拖拽小部件（Draggable Widget） | 允许使用鼠标移动元素。 | |
| 可放置小部件（Droppable Widget） | 为可拖拽小部件创建目标。 | |
| 鼠标交互（Mouse Interaction） | 基本交互层。 | 实用工具（Utilities） |
| 可调整尺寸小部件（Resizable Widget） | 使用鼠标改变元素的尺寸。 | |
| 可选择小部件（Selectable Widget） | 使用鼠标选择单个元素或一组元素。 | |
| 可排序小部件（Sortable Widget） | 使用鼠标调整列表中或者网格中元素的排序。 |
jQuery UI对jQuery中几个内置的方法进行重载，以便提供额外的功能。当使用这些重载时，确保加载jQuery UI是很重要的。如果jQuery UI未加载，方法依然存在，但预期的功能将不可用，这会导致难以追踪的错误。
| API | 描述 | 也属于类别 |
|---|---|---|
| .addClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。 | 特效（Effects） | 特效核心（Effects Core） |
| .focus() | 异步聚焦到一个元素。 | 方法（Method） | UI 核心（UI Core） |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法（Method） |
| .position() | 相对另一个元素定位一个元素。 | 方法（Method） | 实用工具（Utilities） |
| .removeClass() | 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。 | 特效（Effects） | 特效核心（Effects Core） |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法（Method） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法（Method） |
| .toggleClass() | 当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。 | 特效（Effects） | 特效核心（Effects Core） |
jQuery UI主要由小部件（Widgets）、交互（Interactions）和特效（Effects）组成，不过，一些方法的使用也增加了其便利性。
| API | 描述 | 也属于类别 |
|---|---|---|
| .disableSelection() | 禁用选择匹配的元素集合内的文本内容。 | UI 核心（UI Core） |
| .effect() | 对一个元素应用动画特效。 | 特效（Effects） | 特效核心（Effects Core） |
| .enableSelection() | 启用选择匹配的元素集合内的文本内容。 | UI 核心（UI Core） |
| .focus() | 异步聚焦到一个元素。 | 方法重载（Method Overrides） | UI 核心（UI Core） |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| .position() | 相对另一个元素定位一个元素。 | 方法重载（Method Overrides） | 实用工具（Utilities） |
| .removeUniqueId() | 为匹配的元素集合移除由.uniqueId()设置的Id。 | UI 核心（UI Core） |
| .scrollParent() | 获取最近的可滚动的祖先。 | UI 核心（UI Core） |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| .uniqueId() | 为匹配的元素集合生成并申请一个唯一的Id。 | UI 核心（UI Core） |
| .zIndex() | 为元素获取z-index。 | UI 核心（UI Core） |
本节介绍jQuery UI的选择器，如下表所示：
| API | 描述 | 也属于类别 |
|---|---|---|
| :data() Selector | 选择数据已存储在指定的键下的元素。 | UI 核心（UI Core） |
| :focusable Selector | 选择可被聚焦的元素。 | UI 核心（UI Core） |
| :tabbable Selector | 选择用户可通过tab键聚焦的元素。 | UI 核心（UI Core） |
jQuery UI包含一个强大的CSS框架，用于创建自定义的jQuery小部件。该框架包括涵盖广泛的公共用户界面需求的Class，并且可以使用jQuery UI ThemeRoller进行操纵。通过使用jQuery UI CSS框架创建您自己的 UI 组件，您应采用共享标记公约，便于插件社区的代码集成。您可以查看jQuery UI 主题了解更多详情。
| API | 描述 |
|---|---|
| CSS 框架（CSS Framework） | jQuery UI 使用的允许组件主题化的 Class 名称列表。 |
| 图标（Icons） | jQuery UI 提供的图标列表。 |
| 堆叠元素（Stacking Elements） | 一种处理 z-index 和堆叠元素的模式。 |
UI核心（UI Core）功能是由jquery.ui.core.js提供的。
| API | 描述 | 也属于类别 |
|---|---|---|
| :data() Selector | 选择数据已存储在指定的键下的元素。 | 选择器（Selectors） |
| .disableSelection() | 禁用选择匹配的元素集合内的文本内容。 | 方法（Methods） |
| .enableSelection() | 启用选择匹配的元素集合内的文本内容。 | 方法（Methods） |
| .focus() | 异步聚焦到一个元素。 | 方法重载（Method Overrides） | 方法（Methods） |
| :focusable Selector | 选择可被聚焦的元素。 | 选择器（Selectors） |
| jQuery.ui.keyCode | 一个相对于数字值的关键代码描述的映射。 | |
| .removeUniqueId() | 为匹配的元素集合移除由.uniqueId()设置的Id。 | 方法（Methods） |
| .scrollParent() | 获取最近的可滚动的祖先。 | 方法（Methods） |
| :tabbable Selector | 选择用户可通过tab键聚焦的元素。 | 选择器（Selectors） |
| .uniqueId() | 为匹配的元素集合生成并申请一个唯一的Id。 | 方法（Methods） |
| .zIndex() | 为元素获取z-index。 | 方法（Methods） |
下述列表介绍了jQuery UI的一些实用工具。
| API | 描述 | 也属于类别 |
|---|---|---|
| Easings | Easing函数指定动画在不同点上的行进速度。 | |
| 部件库（Widget Factory） | 使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。 | 小部件（Widgets） |
| 插件桥（Widget Plugin Bridge） | jQuery.widget.bridge()方法是jQuery部件库（Widget Factory）的一部分。它扮演着由$.widget()创建的对象和jQuery API之间的中介。 | 小部件（Widgets） |
| 鼠标交互（Mouse Interaction） | 基本交互层。 | 交互（Interactions） |
| .position() | 相对另一个元素定位一个元素。 | 方法重载（Method Overrides） | 方法（Method） |
小部件（Widgets）是功能丰富、有状态的插件，它有一个完整的生命周期，带有方法和事件。您可以查看部件库（Widget Factory）文档了解更多详情。
| API | 描述 | 也属于类别 |
|---|---|---|
| 折叠面板部件（Accordion Widget） | 把一对标题和内容面板转换成折叠面板。 | |
| 自动完成部件（Autocomplete Widget） | 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 | |
| 按钮部件（Button Widget） | 可主题化的按钮和按钮集合。 | |
| 日期选择器部件（Datepicker Widget） | 从弹出框或在线日历选择一个日期。 | |
| 对话框部件（Dialog Widget） | 在一个交互覆盖层中打开内容。 | |
| 部件库（Widget Factory） | 使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。 | 实用工具（Utilities） |
| 插件桥（Widget Plugin Bridge） | jQuery.widget.bridge()方法是jQuery部件库（Widget Factory）的一部分。它扮演着由$.widget()创建的对象和jQuery API之间的中介。 | 实用工具（Utilities） |
| 菜单部件（Menu Widget） | 带有鼠标和键盘交互的用于导航的可主题化菜单。 | |
| 进度条部件（Progressbar Widget） | 显示一个确定的或不确定的进程状态。 | |
| 滑块部件（Slider Widget） | 拖动手柄可以选择一个数值。 | |
| 旋转器部件（Spinner Widget） | 通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。 | |
| 标签页部件（Tabs Widget） | 一种多面板的单内容区，每个面板与列表中的标题相关。 | |
| 工具提示框部件（Tooltip Widget） | 可自定义的、可主题化的工具提示框，替代原生的工具提示框。 |
本节开始，我们将为你介绍一些jQuery UI的使用实例。
jQuery UI提供了一组用户界面交互、特效、小部件、实用工具及主题。通过实例演示、查看源代码、创建主题、阅读API 文档，开始学习使用jQuery UI。
交互（Interactions）向任何元素添加基本的基于鼠标的行为。您可以只通过短短的几行代码即可创建排序列表、缩放元素、拖放行为等等。交互（Interactions）也作用于更复杂的小部件和应用程序。
小部件（Widgets）有功能齐全的UI控件，使桌面应用程序也具备Web应用程序一样丰富的功能。所有的小部件（Widgets）提供了一个核心，带有定制行为的大量扩展以及完整的主题支持。
特效（Effects）支持颜色动画和Class转换，同时也提供了一些额外的Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。
jQuery UI使用实体工具（Utilities）来创建交互（interactions）和小部件（widgets）。
本节介绍了jQuery UI的拖动（Draggable）实例，它允许使用鼠标移动元素。
如需了解更多有关draggable交互的细节，请查看API文档可拖拽小部件（Draggable Widget）。
在任意的DOM元素上启用draggable功能。通过鼠标点击并在视区中拖动来移动draggable对象。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请拖动我！</p></div> </body></html>当draggable移动到视区外时自动滚动文档。设置scroll选项为true来启用自动滚动，当滚动触发时进行微调，滚动速度是通过scrollSensitivity和 scrollSpeed选项设置的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 自动滚动</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ scroll: true }); $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>Scroll 设置为 true，默认设置</p></div> <div id="draggable2" class="ui-widget-content"> <p>scrollSensitivity 设置为 100</p></div> <div id="draggable3" class="ui-widget-content"> <p>scrollSpeed 设置为 100</p></div> <div style="height: 5000px; width: 1px;"></div> </body></html>拖动的范围可以自行定义，方法是通过定义draggable区域的边界来约束每个draggable的运动。设置axis选项来限制draggable的路径为x轴或者y轴，或者使用 containment选项来指定一个父级的DOM元素或者一个jQuery选择器，比如'document.'。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 约束运动</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2 { margin-bottom:20px; } #draggable { cursor: n-resize; } #draggable2 { cursor: e-resize; } #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } h3 { clear: left; } </style> <script> $(function() { $( "#draggable" ).draggable({ axis: "y" }); $( "#draggable2" ).draggable({ axis: "x" }); $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); $( "#draggable5" ).draggable({ containment: "parent" }); }); </script></head><body> <h3>沿着轴约束运动：</h3> <div id="draggable" class="draggable ui-widget-content"> <p>只能垂直拖拽</p></div> <div id="draggable2" class="draggable ui-widget-content"> <p>只能水平拖拽</p></div> <h3>或者在另一个 DOM 元素中约束运动：</h3><div id="containment-wrapper"> <div id="draggable3" class="draggable ui-widget-content"> <p>我被约束在盒子里</p> </div> <div class="draggable ui-widget-content"> <p id="draggable5" class="ui-widget-header">我被约束在父元素内</p> </div></div> </body></html>当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用cursorAt选项来指定相对于 draggable 的另一个位置（指定一个相对于top、right、bottom、left的像素值）。通过提供一个带有有效的CSS光标值的cursor选项，来自定义光标的外观。有效的CSS光标值包括：default、move、pointer、crosshair，等等。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 光标样式</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } }); $( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } }); $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>我总是在中间（相对于鼠标）</p></div> <div id="draggable2" class="ui-widget-content"> <p>我的光标是在 left -5 和 top -5</p></div> <div id="draggable3" class="ui-widget-content"> <p>我的光标位置只控制了 'bottom' 值</p></div> </body></html>通过delay选项设置延迟开始拖拽的毫秒数。通过distance选项设置光标被按下且拖拽指定像素后才允许拖拽。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 延迟开始</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ distance: 20 }); $( "#draggable2" ).draggable({ delay: 1000 }); $( ".ui-draggable" ).disableSelection(); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>只有把我拖拽了 20 像素后，拖拽才开始</p></div> <div id="draggable2" class="ui-widget-content"> <p>不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始</p></div> </body></html>draggable上的start、drag和stop事件。拖拽开始时触发start事件，拖拽期间触发drag事件，拖拽停止时触发stop事件。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 事件</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 16em; padding: 0 1em; } #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } #draggable ul li span.ui-icon { float: left; } #draggable ul li span.count { font-weight: bold; } </style> <script> $(function() { var $start_counter = $( "#event-start" ), $drag_counter = $( "#event-drag" ), $stop_counter = $( "#event-stop" ), counts = [ 0, 0, 0 ]; $( "#draggable" ).draggable({ start: function() { counts[ 0 ]++; updateCounterStatus( $start_counter, counts[ 0 ] ); }, drag: function() { counts[ 1 ]++; updateCounterStatus( $drag_counter, counts[ 1 ] ); }, stop: function() { counts[ 2 ]++; updateCounterStatus( $stop_counter, counts[ 2 ] ); } }); function updateCounterStatus( $event_counter, new_count ) { // 首先更新视觉状态... if ( !$event_counter.hasClass( "ui-state-hover" ) ) { $event_counter.addClass( "ui-state-hover" ) .siblings().removeClass( "ui-state-hover" ); } // ...然后更新数字 $( "span.count", $event_counter ).text( new_count ); } }); </script></head><body> <div id="draggable" class="ui-widget ui-widget-content"> <p>请拖拽我，触发一连串的事件。</p> <ul class="ui-helper-reset"> <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" 被调用 <span class="count">0</span>x</li> <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" 被调用 <span class="count">0</span>x</li> <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" 被调用 <span class="count">0</span>x</li> </ul></div> </body></html>只有当光标在draggable上指定部分时才允许拖拽。使用handle选项来指定用于拖拽对象的元素（或元素组）的jQuery选择器。
或者当光标在draggable内指定元素（或元素组）上时不允许拖拽。使用 handle 选项来指定取消拖拽功能的jQuery选择器。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - Handles</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable p { cursor: move; } </style> <script> $(function() { $( "#draggable" ).draggable({ handle: "p" }); $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }); $( "div, p" ).disableSelection(); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p class="ui-widget-header">您只可以在这个范围内拖拽我</p></div> <div id="draggable2" class="ui-widget-content"> <p>您可以把我向四周拖拽…</p> <p class="ui-widget-header">…但是您不可以在这个范围内拖拽我</p></div> </body></html>当带有布尔值revert选项的draggable停止拖拽时，返回draggable（或它的助手）到原始位置。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 还原位置</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ revert: true }); $( "#draggable2" ).draggable({ revert: true, helper: "clone" }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>还原</p></div> <div id="draggable2" class="ui-widget-content"> <p>还原助手</p></div> </body></html>对齐draggable到DOM元素的内部或外部边界。使用snap、snapMode（inner, outer, both）和snapTolerance（当调用对齐时，draggable与元素之间的距离，以像素为单位）选项。
或者对齐draggable到网格。通过grid选项设置网格单元的尺寸（以像素为单位的高度或宽度）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } </style> <script> $(function() { $( "#draggable" ).draggable({ snap: true }); $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); $( "#draggable4" ).draggable({ grid: [ 20, 20 ] }); $( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); }); </script></head><body> <div id="snaptarget" class="ui-widget-header"> <p>我是对齐目标</p></div> <br style="clear:both"> <div id="draggable" class="draggable ui-widget-content"> <p>默认（snap: true），对齐到所有其他的 draggable 元素</p></div> <div id="draggable2" class="draggable ui-widget-content"> <p>我只对齐到大盒子</p></div> <div id="draggable3" class="draggable ui-widget-content"> <p>我只对齐到大盒子的外边缘</p></div> <div id="draggable4" class="draggable ui-widget-content"> <p>我对齐到一个 20 x 20 网格</p></div> <div id="draggable5" class="draggable ui-widget-content"> <p>我对齐到一个 80 x 80 网格</p></div> </body></html>给用户提供反馈，就像以助手方式拖拽对象一样。helper选项接受值'original'（用光标移动draggable对象），'clone'（用光标移动draggable的副本），或者一个返回DOM元素的函数（该元素在拖拽期间显示在光标附近）。通过opacity选项控制助手的透明度。
为了区别哪一个draggable正在被拖拽，让在运动中的draggable保持最前。如果正在拖拽，使用zIndex选项来设置助手的高度z-index，或者使用stack选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 视觉反馈</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2, #draggable3 { margin-bottom:20px; } #set { clear:both; float:left; width: 368px; height: 120px; } p { clear:both; margin:0; padding:1em 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ helper: "original" }); $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); $( "#draggable3" ).draggable({ cursor: "move", cursorAt: { top: -12, left: -20 }, helper: function( event ) { return $( "<div class='ui-widget-header'>I'm a custom helper</div>" ); } }); $( "#set div" ).draggable({ stack: "#set div" }); }); </script></head><body> <h3 class="docs">助手：</h3> <div id="draggable" class="ui-widget-content"> <p>原始的</p></div> <div id="draggable2" class="ui-widget-content"> <p>半透明的克隆</p></div> <div id="draggable3" class="ui-widget-content"> <p>自定义助手（与 cursorAt 结合）</p></div> <h3 class="docs">堆叠：</h3><div id="set"> <div class="ui-widget-content"> <p>我们是 draggables..</p> </div> <div class="ui-widget-content"> <p>..它的 z-index 是自动控制的..</p> </div> <div class="ui-widget-content"> <p>..带有 stack 选项。</p> </div></div> </body></html>Draggable与Sortable的无缝交互。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding: 5px; width: 150px; } </style> <script> $(function() { $( "#sortable" ).sortable({ revert: true }); $( "#draggable" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "ul, li" ).disableSelection(); }); </script></head><body> <ul> <li id="draggable" class="ui-state-highlight">请拖拽我</li></ul> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> </body></html>为可拖拽小部件创建目标。
如需了解更多有关droppable交互的细节，请查看API文档可放置小部件（Droppable Widget）。
在任意的DOM元素上启用droppable功能，并为可拖拽小部件创建目标。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请把我拖拽到目标处！</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里！</p></div> </body></html>使用accept选项指定目标droppable接受哪一个元素（或元素组）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 接受</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } </style> <script> $(function() { $( "#draggable, #draggable-nonvalid" ).draggable(); $( "#droppable" ).droppable({ accept: "#draggable", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable-nonvalid" class="ui-widget-content"> <p>我是不能被放置的 draggable</p></div> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>accept: '#draggable'</p></div> </body></html>当使用嵌套的droppable时 — 例如，您可以有一个树形的可编辑的目录结构，带有文件夹和文档节点—greedy选项设置为true来防止当draggable被放置在子节点（droppable）上时的事件传播。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 防止传播</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; } #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable, #droppable-inner" ).droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); return false; } }); $( "#droppable2, #droppable2-inner" ).droppable({ greedy: true, activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable-inner" class="ui-widget-header"> <p>内部 droppable（不带有 greedy）</p> </div></div> <div id="droppable2" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable2-inner" class="ui-widget-header"> <p>内部 droppable（带有 greedy）</p> </div></div> </body></html>当带有布尔值revert选项的draggable停止拖拽时，返回draggable（或它的助手）到原始位置。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 还原 draggable 的位置</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable({ revert: "valid" }); $( "#draggable2" ).draggable({ revert: "invalid" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "已放置！" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>当被放置在目标上时还原</p></div> <div id="draggable2" class="ui-widget-content"> <p>当未被放置在目标上时还原</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里</p></div> </body></html>演示如何使用折叠面板来展示产品的目录结构，使用拖拽和放置来添加产品到购物车，购物车中的产品是可排序的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 购物车演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> h1 { padding: .2em; margin: 0; } #products { float:left; width: 500px; margin-right: 2em; } #cart { width: 200px; float: left; margin-top: 1em; } /* 定义列表样式，以便最大化 droppable */ #cart ol { margin: 0; padding: 1em 0 1em 3em; } </style> <script> $(function() { $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // 获取由 droppable 与 sortable 交互而加入的条目 // 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项 $( this ).removeClass( "ui-state-default" ); } }); }); </script></head><body> <div id="products"> <h1 class="ui-widget-header">产品</h1> <div id="catalog"> <h2><a href="#">T-Shirts</a></h2> <div> <ul> <li>Lolcat Shirt</li> <li>Cheezeburger Shirt</li> <li>Buckit Shirt</li> </ul> </div> <h2><a href="#">Bags</a></h2> <div> <ul> <li>Zebra Striped</li> <li>Black Leather</li> <li>Alligator Leather</li> </ul> </div> <h2><a href="#">Gadgets</a></h2> <div> <ul> <li>iPhone</li> <li>iPod</li> <li>iPad</li> </ul> </div> </div></div> <div id="cart"> <h1 class="ui-widget-header">购物车</h1> <div class="ui-widget-content"> <ol> <li class="placeholder">添加产品到这里</li> </ol> </div></div> </body></html>您可以通过拖拽照片到回收站或者点击回收站图标来删除照片。
您可以通过拖拽照片到相册或者点击回收利用图标来还原照片。
您可以通过点击缩放图标来查看大图。jQuery UI对话框（dialog）部件用于模态窗口。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 简单的照片管理器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #gallery { float: left; width: 65%; min-height: 12em; } .gallery.custom-state-active { background: #eee; } .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } .gallery li h5 { margin: 0 0 0.4em; cursor: move; } .gallery li a { float: right; } .gallery li a.ui-icon-zoomin { float: left; } .gallery li img { width: 100%; cursor: move; } #trash { float: right; width: 32%; min-height: 18em; padding: 1%; } #trash h4 { line-height: 16px; margin: 0 0 0.4em; } #trash h4 .ui-icon { float: left; } #trash .gallery h5 { display: none; } </style> <script> $(function() { // 这是相册和回收站 var $gallery = $( "#gallery" ), $trash = $( "#trash" ); // 让相册的条目可拖拽 $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // 点击一个图标不会启动拖拽 revert: "invalid", // 当未被放置时，条目会还原回它的初始位置 containment: "document", helper: "clone", cursor: "move" }); // 让回收站可放置，接受相册的条目 $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function( event, ui ) { deleteImage( ui.draggable ); } }); // 让相册可放置，接受回收站的条目 $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function( event, ui ) { recycleImage( ui.draggable ); } }); // 图像删除功能 var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='还原图像' class='ui-icon ui-icon-refresh'>还原图像</a>"; function deleteImage( $item ) { $item.fadeOut(function() { var $list = $( "ul", $trash ).length ? $( "ul", $trash ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash ); $item.find( "a.ui-icon-trash" ).remove(); $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() { $item .animate({ width: "48px" }) .find( "img" ) .animate({ height: "36px" }); }); }); } // 图像还原功能 var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='删除图像' class='ui-icon ui-icon-trash'>删除图像</a>"; function recycleImage( $item ) { $item.fadeOut(function() { $item .find( "a.ui-icon-refresh" ) .remove() .end() .css( "width", "96px") .append( trash_icon ) .find( "img" ) .css( "height", "72px" ) .end() .appendTo( $gallery ) .fadeIn(); }); } // 图像预览功能，演示 ui.dialog 作为模态窗口使用 function viewLargerImage( $link ) { var src = $link.attr( "href" ), title = $link.siblings( "img" ).attr( "alt" ), $modal = $( "img[src$='" + src + "']" ); if ( $modal.length ) { $modal.dialog( "open" ); } else { var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" ) .attr( "src", src ).appendTo( "body" ); setTimeout(function() { img.dialog({ title: title, width: 400, modal: true }); }, 1 ); } } // 通过事件代理解决图标行为 $( "ul.gallery > li" ).click(function( event ) { var $item = $( this ), $target = $( event.target ); if ( $target.is( "a.ui-icon-trash" ) ) { deleteImage( $item ); } else if ( $target.is( "a.ui-icon-zoomin" ) ) { viewLargerImage( $target ); } else if ( $target.is( "a.ui-icon-refresh" ) ) { recycleImage( $item ); } return false; }); }); </script></head><body> <div class="ui-widget ui-helper-clearfix"> <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras_min.jpg" alt="High Tatras 的最高峰" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 2</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras2_min.jpg" alt="绿山湖畔的小屋" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 3</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras3_min.jpg" alt="计划登高" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 4</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras4_min.jpg" alt="在 Kozi kopka 的顶部" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li></ul> <div id="trash" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">回收站</span> 回收站</h4></div> </div> </body></html>当悬停在droppable上时，或者当droppable被激活（即一个可接受的draggable被放置在droppable上）时，改变droppable的外观。使用hoverClass或 activeClass选项来分别指定class。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 视觉反馈</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } h3 { clear: left; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#draggable2" ).draggable(); $( "#droppable2" ).droppable({ accept: "#draggable2", activeClass: "ui-state-default", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <h3>当悬停在 droppable 上时的反馈：</h3> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里</p></div> <h3>当激活 draggable 时的反馈：</h3> <div id="draggable2" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable2" class="ui-widget-header"> <p>请放置在这里</p></div> </body></html>jQuery UI缩放能够使用鼠标改变元素的尺寸。
如需了解更多有关resizable交互的细节，请查看API文档可调整尺寸小部件（Resizable Widget）。
在任意的DOM元素上启用resizable功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable(); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">缩放（Resizable）</h3></div> </body></html>使用animate选项（布尔值）使缩放行为动画化。当该选项设置为true时，拖拽轮廓到所需的位置，元素会在拖拽停止时以动画形式调整到该尺寸。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 1px dotted gray; } </style> <script> $(function() { $( "#resizable" ).resizable({ animate: true }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">动画</h3></div> </body></html>定义缩放区域的边界。使用containment选项来指定一个父级的DOM元素或一个jQuery选择器，比如'document.'。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 限制缩放区域</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #container { width: 300px; height: 300px; } #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } #resizable { background-position: top left; width: 150px; height: 150px; } #resizable, #container { padding: 0.5em; } </style> <script> $(function() { $( "#resizable" ).resizable({ containment: "#container" }); }); </script></head><body> <div id="container" class="ui-widget-content"> <h3 class="ui-widget-header">限制</h3> <div id="resizable" class="ui-state-active"> <h3 class="ui-widget-header">缩放（Resizable）</h3> </div></div> </body></html>通过delay选项设置延迟开始缩放的毫秒数。通过distance选项设置光标被按下且拖拽指定像素后才允许缩放。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 延迟开始</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; } #resizable h3, #resizable2 h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ delay: 1000 }); $( "#resizable2" ).resizable({ distance: 40 }); }); </script></head><body> <h3 class="docs">时间延迟 (ms):</h3><div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">时间</h3></div> <h3 class="docs">距离延迟 (px):</h3><div id="resizable2" class="ui-widget-content"> <h3 class="ui-widget-header">距离</h3></div> </body></html>通过设置helper选项为一个CSS class，当缩放时只显示元素的轮廓。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 助手</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 2px dotted #00F; } </style> <script> $(function() { $( "#resizable" ).resizable({ helper: "ui-resizable-helper" }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">助手</h3></div> </body></html>使用maxHeight、maxWidth、minHeight和minWidth选项限制resizable元素的最大或最小高度或宽度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 最大/最小尺寸</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 200px; height: 150px; padding: 5px; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ maxHeight: 250, maxWidth: 350, minHeight: 150, minWidth: 200 }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">放大/缩小</h3></div> </body></html>保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置aspectRatio选项为true，且可选地传递一个新的比率（比如，4/3）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 保持纵横比</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 160px; height: 90px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ aspectRatio: 16 / 9 }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">保持纵横比</h3></div> </body></html>对齐resizable元素到网格。通过grid选项设置网格单元的尺寸（以像素为单位的高度和宽度）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 对齐到网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ grid: 50 }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">网格</h3></div> </body></html>通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给alsoResize选项传递一个共享的选择器。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 同步缩放</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { background-position: top left; } #resizable, #also { width: 150px; height: 120px; padding: 0.5em; } #resizable h3, #also h3 { text-align: center; margin: 0; } #also { margin-top: 1em; } </style> <script> $(function() { $( "#resizable" ).resizable({ alsoResize: "#also" }); $( "#also" ).resizable(); }); </script></head><body> <div id="resizable" class="ui-widget-header"> <h3 class="ui-state-active">缩放</h3></div> <div id="also" class="ui-widget-content"> <h3 class="ui-widget-header">同步缩放</h3></div> </body></html>可缩放的文本框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 文本框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-resizable-se { bottom: 17px; } </style> <script> $(function() { $( "#resizable" ).resizable({ handles: "se" }); }); </script></head><body> <textarea id="resizable" rows="5" cols="20"></textarea> </body></html>通过设置ghost选项为true，可在缩放期间显示一个半透明的元素，而不是显示一个实际的元素。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 视觉反馈</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-ghost { border: 1px dotted gray; } </style> <script> $(function() { $( "#resizable" ).resizable({ ghost: true }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Ghost</h3></div> </body></html>jQuery UI选择（Selectable）实例中，你可以使用鼠标选择单个元素或一组元素。
如需了解更多有关selectable交互的细节，请查看API文档可选择小部件（Selectable Widget）。
在某个DOM元素上或者一组元素上启用selectable功能。通过鼠标拖拽选择条目。按住Ctrl键，选择多个不相邻的条目。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 选择（Selectable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable(); }); </script></head><body> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li></ol> </body></html>让selectable条目显示为网格，使用CSS使得它们带有相同的尺寸且浮动显示。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 选择（Selectable） - 显示为网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } </style> <script> $(function() { $( "#selectable" ).selectable(); }); </script></head><body> <ol id="selectable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li></ol> </body></html>写一个函数，在stop事件发生时触发，来收集被选中条目的索引值。呈现这些值作为反馈，或者以数据字符串形式进行传递。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 选择（Selectable） - 序列化</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable({ stop: function() { var result = $( "#select-result" ).empty(); $( ".ui-selected", this ).each(function() { var index = $( "#selectable li" ).index( this ); result.append( " #" + ( index + 1 ) ); }); } }); }); </script></head><body> <p id="feedback"><span>您已经选择了：</span> <span id="select-result">无</span>。</p> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li></ol> </body></html>jQuery UI排序（Sortable）允许你使用鼠标调整列表中或者网格中元素的顺序。
如需了解更多有关sortable交互的细节，请查看API文档可排序小部件（Sortable Widget）。
在任意的DOM元素上启用sortable功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable各个条目共享draggable 属性。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 默认功能</title><link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script></head><body> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li></ul> </body></html>通过向connectWith选项传递一个选择器，来把一个列表中的元素排序到另一个列表中，反之亦然。最简单的办法是将带有某个CSS class的所有相关的列表分组，然后传递该class到sortable函数（比如，connectWith: '.myclass'）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 连接列表</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); </script></head><body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li></ul> </body></html>通过放置列表项到顶部适当的标签页中，来把一个列表中的元素排序到另一个列表中，反之亦然。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 标签页连接列表</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "#sortable1, #sortable2" ).sortable().disableSelection(); var $tabs = $( "#tabs" ).tabs(); var $tab_items = $( "ul:first li", $tabs ).droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function( event, ui ) { var $item = $( this ); var $list = $( $item.find( "a" ).attr( "href" ) ) .find( ".connectedSortable" ); ui.draggable.hide( "slow", function() { $tabs.tabs( "option", "active", $tab_items.index( $item ) ); $( this ).appendTo( $list ).show( "slow" ); }); } }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> </ul> <div id="tabs-1"> <ul id="sortable1" class="connectedSortable ui-helper-reset"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> </div> <div id="tabs-2"> <ul id="sortable2" class="connectedSortable ui-helper-reset"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> </div></div> </body></html>通过时间延迟和距离延迟来防止意外的排序。通过delay选项设置开始排序之前必须拖拽的毫秒数。通过distance选项设置开始排序之前必须拖拽的像素数。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 延迟开始</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } </style> <script> $(function() { $( "#sortable1" ).sortable({ delay: 300 }); $( "#sortable2" ).sortable({ distance: 15 }); $( "li" ).disableSelection(); }); </script></head><body> <h3 class="docs">时间延迟 300ms：</h3> <ul id="sortable1"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li></ul> <h3 class="docs">距离延迟 15px：</h3> <ul id="sortable2"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li></ul> </body></html>让sortable条目显示为网格，使用CSS使得它们带有相同的尺寸且浮动显示。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 显示为网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script></head><body> <ul id="sortable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li></ul> </body></html>当拖拽一个sortable条目到一个新的位置时，其他条目将为该条目腾出空间。向placeholder选项传递一个class来定义可视化的空白的样式。使用布尔值的 forcePlaceholderSize选项来设置占位符的尺寸。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 放置占位符</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } html>body #sortable li { height: 1.5em; line-height: 1.2em; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; } </style> <script> $(function() { $( "#sortable" ).sortable({ placeholder: "ui-state-highlight" }); $( "#sortable" ).disableSelection(); }); </script></head><body> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 6</li> <li class="ui-state-default">Item 7</li></ul> </body></html>通过把选项设置为false，来阻止一个列表中的所有条目被放置到一个单独的空列表中。默认情况下，sortable条目可被放置到空的列表中。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 处理空列表</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "ul.droptrue" ).sortable({ connectWith: "ul" }); $( "ul.dropfalse" ).sortable({ connectWith: "ul", dropOnEmpty: false }); $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); }); </script></head><body> <ul id="sortable1" class="droptrue"> <li class="ui-state-default">可被放置到..</li> <li class="ui-state-default">..一个空列表中</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> <ul id="sortable2" class="dropfalse"> <li class="ui-state-highlight">不可被放置到..</li> <li class="ui-state-highlight">..一个空列表中</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li></ul> <ul id="sortable3" class="droptrue"></ul> <br style="clear:both"> </body></html>指定通过向items选项传递一个jQuery选择器哪些项目可排序。该选项之外的项目则是不可排序的，同时它们也不是sortable条目的有效的目标。
如果只想防止特定的条目排序，则向cancel选项传递一个jQuery选择器。已取消的条目依然是其他条目的有效的排序目标。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 包含/排除条目</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } </style> <script> $(function() { $( "#sortable1" ).sortable({ items: "li:not(.ui-state-disabled)" }); $( "#sortable2" ).sortable({ cancel: ".ui-state-disabled" }); $( "#sortable1 li, #sortable2 li" ).disableSelection(); }); </script></head><body> <h3 class="docs">指定哪个条目是 sortable：</h3> <ul id="sortable1"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable 或者一个放置目标）</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable 或者一个放置目标）</li> <li class="ui-state-default">Item 4</li></ul> <h3 class="docs">取消排序（但作为放置目标）：</h3> <ul id="sortable2"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable）</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable）</li> <li class="ui-state-default">Item 4</li></ul> </body></html>启用门户组件（样式化的div）作为sortable，并使用connectWith选项来允许在列之间进行排序。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 门户组件（Portlets）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> body { min-width: 520px; } .column { width: 170px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; padding: 0.3em; } .portlet-header { padding: 0.2em 0.3em; margin-bottom: 0.5em; position: relative; } .portlet-toggle { position: absolute; top: 50%; right: 0; margin-top: -8px; } .portlet-content { padding: 0.4em; } .portlet-placeholder { border: 1px dotted black; margin: 0 1em 1em 0; height: 50px; } </style> <script> $(function() { $( ".column" ).sortable({ connectWith: ".column", handle: ".portlet-header", cancel: ".portlet-toggle", placeholder: "portlet-placeholder ui-corner-all" }); $( ".portlet" ) .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) .find( ".portlet-header" ) .addClass( "ui-widget-header ui-corner-all" ) .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); $( ".portlet-toggle" ).click(function() { var icon = $( this ); icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" ); icon.closest( ".portlet" ).find( ".portlet-content" ).toggle(); }); }); </script></head><body> <div class="column"> <div class="portlet"> <div class="portlet-header">订阅</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">新闻</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column"> <div class="portlet"> <div class="portlet-header">购物</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column"> <div class="portlet"> <div class="portlet-header">链接</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">图像</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> </body></html>在一个有限的空间内显示用于呈现信息的可折叠的内容面板。
如需了解更多有关accordion部件的细节，请查看API文档折叠面板部件（Accordion Widget）。
点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。
基本的HTML标记是一系列的标题（H3标签）和内容div，因此内容不用通过JavaScript即可用。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion(); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3>部分 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> </body></html>默认情况下，折叠面板总是保持一个部分是打开的。为了让所有部分都是折叠的，可设置collapsible选项为true。点击当前打开的部分，来折叠它的内容面板。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 折叠内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion({ collapsible: true }); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> </body></html>通过icons选项自定义标题图标，icons选项接受标题默认的和激活的（打开的）状态的class。使用UI CSS框架中的任意class，或者使用背景图像创建自定义的 class。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 自定义图标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $( "#accordion" ).accordion({ icons: icons }); $( "#toggle" ).button().click(function() { if ( $( "#accordion" ).accordion( "option", "icons" ) ) { $( "#accordion" ).accordion( "option", "icons", null ); } else { $( "#accordion" ).accordion( "option", "icons", icons ); } }); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> <button id="toggle">切换图标</button> </body></html>由于折叠面板是由块级元素组成的，默认情况下它的宽度会填充可用的水平空间。为了填充由容器分配的垂直空间，设置heightStyle选项为"fill"，脚本会自动设置折叠面板的尺寸为父容器的高度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 填充空间</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #accordion-resizer { padding: 10px; width: 350px; height: 220px; } </style> <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "fill" }); }); $(function() { $( "#accordion-resizer" ).resizable({ minHeight: 140, minWidth: 200, resize: function() { $( "#accordion" ).accordion( "refresh" ); } }); }); </script></head><body> <h3 class="docs">重新调整外部容器：</h3> <div id="accordion-resizer" class="ui-widget-content"> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div></div> </body></html>设置heightStyle: "content"，让折叠面板保持它们初始的高度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 非自动高度</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "content" }); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div></div> </body></html>点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。
基本的HTML标记是一系列的标题（H3标签）和内容div，因此内容不用通过JavaScript即可用。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 当悬停时打开</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion({ event: "click hoverintent" }); }); /* * hoverIntent | Copyright 2011 Brian Cherne * http://cherne.net/brian/resources/jquery.hoverIntent.html * modified by the jQuery UI team */ $.event.special.hoverintent = { setup: function() { $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler ); }, teardown: function() { $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler ); }, handler: function( event ) { var currentX, currentY, timeout, args = arguments, target = $( event.target ), previousX = event.pageX, previousY = event.pageY; function track( event ) { currentX = event.pageX; currentY = event.pageY; }; function clear() { target .unbind( "mousemove", track ) .unbind( "mouseout", clear ); clearTimeout( timeout ); } function handler() { var prop, orig = event; if ( ( Math.abs( previousX - currentX ) + Math.abs( previousY - currentY ) ) < 7 ) { clear(); event = $.Event( "hoverintent" ); for ( prop in orig ) { if ( !( prop in event ) ) { event[ prop ] = orig[ prop ]; } } // 防止访问原始事件，因为新事件会被异步触发，旧事件不再可用 (#6028) delete event.originalEvent; target.trigger( event ); } else { previousX = currentX; previousY = currentY; timeout = setTimeout( handler, 100 ); } } timeout = setTimeout( handler, 100 ); target.bind({ mousemove: track, mouseout: clear }); } }; </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, cond imentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit e u ante scelerisque vulputate. </p> </div> <h3>部分 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turp is porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Pha sellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum prim is in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> </body></html>拖拽标题来给面板重新排序。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 排序（Sortable）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> /* 当排序时，IE 存在布局问题（查看 #5413） */ .group { zoom: 1 } </style> <script> $(function() { $( "#accordion" ) .accordion({ header: "> div > h3" }) .sortable({ axis: "y", handle: "h3", stop: function( event, ui ) { // 当排序时，IE 不能注册 blur，所以触发 focusout 处理程序来移除 .ui-state-focus ui.item.children( "h3" ).triggerHandler( "focusout" ); } }); }); </script></head><body> <div id="accordion"> <div class="group"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> </div> <div class="group"> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> </div> <div class="group"> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <div class="group"> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div></div> </body></html>jQuery UI的自动完成（Autocomplete）是根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
如需了解更多有关autocomplete部件的细节，请查看API文档自动完成部件（Autocomplete Widget）。
当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入"ja"尝试一下，可以得到Java或 JavaScript。
数据源是一个简单的JavaScript数组，使用source选项提供给部件。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"></div> </body></html>autocomplete域使用自定义的source选项来匹配带有重音字符的结果项，即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符，则不会显示非重音的结果项。
尝试键入"Jo"，会看到"John"和"Jörn"，然后键入"Jö"，只会看到"Jörn"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 包含重音</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á": "a", "ö": "o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "#developer" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); }); </script></head><body> <div class="ui-widget"> <form> <label for="developer">开发人员：</label> <input id="developer"> </form></div> </body></html>分类的搜索结果。尝试键入"a"或"n"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 分类</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } </style> <script> $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); </script> <script> $(function() { var data = [ { label: "anders", category: "" }, { label: "andreas", category: "" }, { label: "antal", category: "" }, { label: "annhhx10", category: "Products" }, { label: "annk K12", category: "Products" }, { label: "annttop C13", category: "Products" }, { label: "anders andersson", category: "People" }, { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; $( "#search" ).catcomplete({ delay: 0, source: data }); }); </script></head><body> <label for="search">搜索：</label><input id="search"> </body></html>一个由Autocomplete和Button创建的自定义部件。您可以键入一些字符，来获得基于您的输入过滤的结果，或者使用按钮从完整列表中选择。
该输入是从一个已有的select元素中读取，传递给带有自定义的source选项的Autocomplete。
这是一个不被支持的不完美的部件。这里纯粹是为了演示autocomplete定制功能。如需了解更多有关该部件工作原理的细节，请点击这里查看相关的jQuery文章。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 组合框（Combobox）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; /* 支持： IE7 */ *height: 1.7em; *top: 0.1em; } .custom-combobox-input { margin: 0; padding: 0.3em; } </style> <script> (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : ""; this.input = $( "<input>" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" ) .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .click(function() { input.focus(); // 如果已经可见则关闭 if ( wasOpen ) { return; } // 传递空字符串作为搜索的值，显示所有的结果 input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( event, ui ) { // 选择一项，不执行其他动作 if ( ui.item ) { return; } // 搜索一个匹配（不区分大小写） var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // 找到一个匹配，不执行其他动作 if ( valid ) { return; } // 移除无效的值 this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.data( "ui-autocomplete" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); </script></head><body> <div class="ui-widget"> <label>您喜欢的编程语言：</label> <select id="combobox"> <option value="">请选择...</option> <option value="ActionScript">ActionScript</option> <option value="AppleScript">AppleScript</option> <option value="Asp">Asp</option> <option value="BASIC">BASIC</option> <option value="C">C</option> <option value="C++">C++</option> <option value="Clojure">Clojure</option> <option value="COBOL">COBOL</option> <option value="ColdFusion">ColdFusion</option> <option value="Erlang">Erlang</option> <option value="Fortran">Fortran</option> <option value="Groovy">Groovy</option> <option value="Haskell">Haskell</option> <option value="Java">Java</option> <option value="JavaScript">JavaScript</option> <option value="Lisp">Lisp</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Python">Python</option> <option value="Ruby">Ruby</option> <option value="Scala">Scala</option> <option value="Scheme">Scheme</option> </select></div><button id="toggle">显示基础的选择框</button> </body></html>您可以使用自定义数据格式，并通过简单地重载默认的聚焦和选择行为来显示数据。
尝试键入"j"，或者按向下箭头按键，即可得到一个项目列表。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } </style> <script> $(function() { var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script></head><body> <div id="project-label">选择一个项目（请键入 "j"）：</div><img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""><input id="project"><input type="hidden" id="project-id"><p id="project-description"></p> </body></html>用法：键入一些字符，比如"j"，可以看到相关的编程语言结果。选择一个值，然后继续键入字符来添加其他的值。
本实例演示如何使用source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 多个值</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // 当选择一个条目时不离开文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // 回到 autocomplete，但是提取最后的条目 response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // 防止在获得焦点时插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除当前输入 terms.pop(); // 添加被选项 terms.push( ui.item.value ); // 添加占位符，在结尾添加逗号+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script></head><body> <div class="ui-widget"> <label for="tags">编程语言：</label> <input id="tags" size="50"></div> </body></html>用法：键入至少两个字符来获取鸟的名称。选择一个值，然后继续键入字符来添加其他的值。
本实例演示如何使用source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 多个值，远程</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function split( val ) { return val.split( /,s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // 当选择一个条目时不离开文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // 自定义最小长度 var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { // 防止在获得焦点时插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除当前输入 terms.pop(); // 添加被选项 terms.push( ui.item.value ); // 添加占位符，在结尾添加逗号+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">鸟：</label> <input id="birds" size="50"></div> </body></html>当您在文本域中键入字符时，Autocomplete部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关城市的名称。
在本实例中，数据源是geonames.org webservice。虽然选择一个元素后文本域中是该城市名称，但是会显示更多的信息以便找到正确的条目。数据也可以回调，显示在下面的结果框中。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 远程 JSONP 数据源</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #city { width: 25em; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function( data ) { response( $.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); }, minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script></head><body> <div class="ui-widget"> <label for="city">您的城市：</label> <input id="city"> Powered by <a href="http://geonames.org" rel="external nofollow" target="_blank" target="_blank">geonames.org</a></div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 结果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div> </body></html>当您在文本域中键入字符时，Autocomplete部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。
在本实例中，数据源是可返回JSON数据的服务器端脚本，通过一个简单的source选项来指定。另外，minLength选项设置为2，避免查询返回太多的结果，select事件用于显示一些反馈。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 远程数据源</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">鸟：</label> <input id="birds"></div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 结果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div> </body></html>当您在文本域中键入字符时，Autocomplete部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。
为了提高性能，这里添加了一些本地缓存，其他与远程数据源实例相似。在这里，缓存只保存了一个查询，并可以扩展到缓存多个值，每个条目一个值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 远程缓存</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { var cache = {}; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; } $.getJSON( "search.php", request, function( data, status, xhr ) { cache[ term ] = data; response( data ); }); } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">鸟：</label> <input id="birds"></div> </body></html>当显示一个长列表的选项时，您可以简单地为autocomplete菜单设置max-height来防止菜单显示太长。尝试键入"a"或"s"来获得一个可滚动的长列表的结果。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 可滚动的结果</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete { max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow-x: hidden; } /* IE 6 不支持 max-height * 我们使用 height 代替，但是这会强制菜单总是显示为那个高度 */ * html .ui-autocomplete { height: 100px; } </style> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"></div> </body></html>本实例演示如何获取一些XML数据，并使用jQuery的方法解析它，然后把它提供给autocomplete作为数据源。
本实例也可作为解析远程XML数据源的参考 - 解析在每次source回调请求时发生。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - XML 数据</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div/>" ).text( message ).prependTo( "#log" ); $( "#log" ).attr( "scrollTop", 0 ); } $.ajax({ url: "london.xml", dataType: "xml", success: function( xmlResponse ) { var data = $( "geoname", xmlResponse ).map(function() { return { value: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), id: $( "geonameId", this ).text() }; }).get(); $( "#birds" ).autocomplete({ source: data, minLength: 0, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : "Nothing selected, input was " + this.value ); } }); } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">London 匹配：</label> <input id="birds"></div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 结果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div> </body></html>jQuery UI使用带有适当的悬停（hover）和激活（active）的样式的可主题化按钮（Button）来加强标准表单元素（比如按钮、输入框、锚）的功能。
在本教程的API文档按钮部件（Button Widget）部分，介绍了更多与button部件相关的细节。
可用于按钮的标记实例：一个button元素，一个类型为submit的input元素和一个锚。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "input[type=submit], a, button" ) .button() .click(function( event ) { event.preventDefault(); }); }); </script></head><body> <button>一个 button 元素</button> <input type="submit" value="一个提交按钮"> <a href="#">一个锚</a> </body></html>通过button部件把复选框显示为切换按钮样式。与复选框相关的label元素作为按钮文本。
本实例通过在一个公共的容器上调用.buttonset()，演示了三个显示为按钮样式的复选框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 复选框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#check" ).button(); $( "#format" ).buttonset(); }); </script> <style> #format { margin-top: 2em; } </style></head><body> <input type="checkbox" id="check"><label for="check">切换</label> <div id="format"> <input type="checkbox" id="check1"><label for="check1">B</label> <input type="checkbox" id="check2"><label for="check2">I</label> <input type="checkbox" id="check3"><label for="check3">U</label></div> </body></html>一些带有文本和图标的各种组合的按钮：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 图标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" }, text: false }).next().button({ icons: { primary: "ui-icon-locked" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script></head><body> <button>只带有图标的按钮</button><button>图标在左侧的按钮</button><button>带有两个图标的按钮</button><button>带有两个图标且不带文本的按钮</button> </body></html>三个单选按钮转变为一套按钮。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 单选</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#radio" ).buttonset(); }); </script></head><body> <form> <div id="radio"> <input type="radio" id="radio1" name="radio"><label for="radio1">选择 1</label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">选择 2</label> <input type="radio" id="radio3" name="radio"><label for="radio3">选择 3</label> </div></form> </body></html><!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 分割按钮</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-menu { position: absolute; width: 100px; } </style> <script> $(function() { $( "#rerun" ) .button() .click(function() { alert( "Running the last action" ); }) .next() .button({ text: false, icons: { primary: "ui-icon-triangle-1-s" } }) .click(function() { var menu = $( this ).parent().next().show().position({ my: "left top", at: "left bottom", of: this }); $( document ).one( "click", function() { menu.hide(); }); return false; }) .parent() .buttonset() .next() .hide() .menu(); }); </script></head><body> <div> <div> <button id="rerun">运行最后的动作</button> <button id="select">选择一个动作</button> </div> <ul> <li><a href="#">打开...</a></li> <li><a href="#">保存</a></li> <li><a href="#">删除</a></li> </ul></div> </body></html>一个多媒体播放器的工具栏。请看基础的标记：一些button元素，Shuffle按钮是一个类型为checkbox的input，Repeat选项是三个类型为radio的input。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 工具栏</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #toolbar { padding: 4px; display: inline-block; } /* support: IE7 */ *+html #toolbar { display: inline; } </style> <script> $(function() { $( "#beginning" ).button({ text: false, icons: { primary: "ui-icon-seek-start" } }); $( "#rewind" ).button({ text: false, icons: { primary: "ui-icon-seek-prev" } }); $( "#play" ).button({ text: false, icons: { primary: "ui-icon-play" } }) .click(function() { var options; if ( $( this ).text() === "play" ) { options = { label: "pause", icons: { primary: "ui-icon-pause" } }; } else { options = { label: "play", icons: { primary: "ui-icon-play" } }; } $( this ).button( "option", options ); }); $( "#stop" ).button({ text: false, icons: { primary: "ui-icon-stop" } }) .click(function() { $( "#play" ).button( "option", { label: "play", icons: { primary: "ui-icon-play" } }); }); $( "#forward" ).button({ text: false, icons: { primary: "ui-icon-seek-next" } }); $( "#end" ).button({ text: false, icons: { primary: "ui-icon-seek-end" } }); $( "#shuffle" ).button(); $( "#repeat" ).buttonset(); }); </script></head><body> <div id="toolbar" class="ui-widget-header ui-corner-all"> <button id="beginning">开头</button> <button id="rewind">快退</button> <button id="play">播放</button> <button id="stop">停止</button> <button id="forward">快进</button> <button id="end">结尾</button> <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label> <span id="repeat"> <input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label> <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label> <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label> </span></div> </body></html>jQuery UI日期选择器（Datepicker）可以从弹出框或内联日历选择一个日期。
本教程的API文档日期选择器部件（Datepicker Widget）中介绍了更多关于datepicker部件的细节。
日期选择器（Datepicker）绑定到一个标准的表单input字段上。把焦点移到input上（点击或者使用tab键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上的任意地方（输入框即失去焦点），或者点击Esc键来关闭。如果选择了一个日期，则反馈显示为input的值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>当打开或关闭datepicker时使用不同的动画。从下拉框中选择一个动画，然后在输入框中点击来查看它的效果。您可以使用三个标准动画中任意一个，或者使用UI特效中的任意一个。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); $( "#anim" ).change(function() { $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); }); }); </script></head><body><p>日期：<input type="text" id="datepicker" size="30"></p><p>动画：<br> <select id="anim"> <option value="show">Show (默认)</option> <option value="slideDown">滑下</option> <option value="fadeIn">淡入</option> <option value="blind">Blind (UI 百叶窗特效)</option> <option value="bounce">Bounce (UI 反弹特效)</option> <option value="clip">Clip (UI 剪辑特效)</option> <option value="drop">Drop (UI 降落特效)</option> <option value="fold">Fold (UI 折叠特效)</option> <option value="slide">Slide (UI 滑动特效)</option> <option value="">无</option> </select></p></body></html>datepicker可以显示其他月份的日期，这些日期也可以设置成可选择的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showOtherMonths: true, selectOtherMonths: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>通过布尔值的showButtonPanel选项为选择当天日期显示一个"Today"按钮，为关闭日历显示一个"Done"按钮。默认情况下，当按钮栏显示时会启用每个按钮，但是按钮可通过其他的选项进行关闭。按钮文本可自定义。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示按钮栏</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showButtonPanel: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>datepicker是嵌套在页面中显示，而不是显示在一个覆盖层中。只需要简单地在div上调用.datepicker()即可，而不是在input上调用。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 内联显示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); }); </script></head><body> 日期：<div id="datepicker"></div> </body></html>显示月份和年份的下拉框，而不是显示静态的月份/年份标题，这样便于在大范围的时间跨度上导航。添加布尔值changeMonth和changeYear选项即可。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示月份 & 年份菜单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>设置numberOfMonths选项为一个整数2，或者大于2的整数，来在一个datepicker中显示多个月份。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示多个月份</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>以各种方式显示日期反馈。从下拉框中选择一种日期格式，然后在输入框中点击并选择一个日期，查看所选格式的日期显示。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 格式化日期</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); $( "#format" ).change(function() { $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); }); }); </script></head><body> <p>日期：<input type="text" id="datepicker" size="30"></p> <p>格式选项：<br> <select id="format"> <option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="d M, y">Short - d M, y</option> <option value="d MM, y">Medium - d MM, y</option> <option value="DD, d MM, yy">Full - DD, d MM, yy</option> <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option> </select></p> </body></html>点击输入框旁边的图标来显示datepicker。设置datepicker在获得焦点时打开（默认行为），或者在点击图标时打开，或者在获得焦点/点击图标时打开。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 图标触发器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>本地化datepicker日历语言和格式（默认为English/Western格式）。datepicker包含对从右到左读取的语言的内建支持，比如Arabic和Hebrew。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 本地化日历</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); $( "#locale" ).change(function() { $( "#datepicker" ).datepicker( "option", $.datepicker.regional[ $( this ).val() ] ); }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"> <select id="locale"> <option value="ar">Arabic ((العربية</option> <option value="zh-TW">Chinese Traditional (繁體中文)</option> <option value="">English</option> <option value="fr" selected="selected">French (Français)</option> <option value="he">Hebrew ((עברית</option> </select></p> </body></html>使用altField和altFormat选项，无论何时选择日期，会在另一个输入框中填充带有一定格式的日期。这个功能通过对电脑友好性的日期进一步加工后，向用户呈现一个用户友好性的日期。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 填充另一个输入框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ altField: "#alternate", altFormat: "DD, d MM, yy" }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p> </body></html>通过minDate和maxDate选项限制可选择的日期范围。设置起止日期为实际的日期（new Date(2009, 1 - 1, 26)），或者为与今天的一个数值偏移（-20），或者为一个周期和单位的字符串（'+1M +10D'）。如果设置为字符串，使用'D'表示天，使用'W'表示周，使用'M'表示月，使用'Y'表示年。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 限制日期范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>选择要搜索的日期范围。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 选择一个日期范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); }); </script></head><body> <label for="from">从</label><input type="text" id="from" name="from"><label for="to">到</label><input type="text" id="to" name="to"> </body></html>datepicker可以显示一年中的第几周。默认的计算是按照ISO 8601定义：每周从星期一开始，每年的第一周包含该年的第一个星期四。这就意味着一年中的一些天可能是属于另一年中的周。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示一年中的第几周</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showWeek: true, firstDay: 1 }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>在一个交互覆盖层中打开内容。
如需了解更多有关dialog部件的细节，请查看API文档对话框部件（Dialog Widget）。
基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像select元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过'x'图标关闭。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog" ).dialog(); }); </script></head><body> <div id="dialog" title="基本的对话框"> <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p></div> </body></html>可以通过为show/hide属性指定一个特效来动画显示对话框。您必须为想使用的特效引用独立的特效文件。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script></head><body> <div id="dialog" title="Basic dialog"> <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p></div> <button id="opener">打开对话框</button> </body></html>模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 基本的模态</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); </script></head><body> <div id="dialog-modal" title="基本的模态对话框"> <p>添加模态覆盖屏幕，让对话框看起来更突出，因为它让页面上其他内容变暗。</p></div> <p>Sed vel diam id libero <a href="http://www.51coolma.cn">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body></html>确认一个动作可能是破坏性的也可能是有意义的。设置modal选项为true，并通过buttons选项来指定主要的和次要的用户动作。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 模态确认</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); </script></head><body> <div id="dialog-confirm" title="清空回收站吗？"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>这些项目将被永久删除，并且无法恢复。您确定吗？</p></div> <p>Sed vel diam id libero <a href="http://www.51coolma.cn">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body></html>使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入form标记，设置modal选项为true，并通过buttons选项来指定主要的和次要的用户动作。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 模态表单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } </style> <script> $(function() { var name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ), tips = $( ".validateTips" ); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "" + n + " 的长度必须在 " + min + " 和 " + max + " 之间。" ); return false; } else { return true; } } function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" ); updateTips( n ); return false; } else { return true; } } $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "创建一个帐户": function() { var bValid = true; allFields.removeClass( "ui-state-error" ); bValid = bValid && checkLength( name, "username", 3, 16 ); bValid = bValid && checkLength( email, "email", 6, 80 ); bValid = bValid && checkLength( password, "password", 5, 16 ); bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。" ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid = bValid && checkRegexp( email, /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i, "eg. ui@jquery.com" ); bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密码字段只允许： a-z 0-9" ); if ( bValid ) { $( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); $( this ).dialog( "close" ); } }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); }); }); </script></head><body> <div id="dialog-form" title="创建新用户"> <p class="validateTips">所有的表单字段都是必填的。</p> <form> <fieldset> <label for="name">名字</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"> <label for="email">邮箱</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"> <label for="password">密码</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"> </fieldset> </form></div> <div id="users-contain" class="ui-widget"> <h1>已有的用户：</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>名字</th> <th>邮箱</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>johndoe1</td> </tr> </tbody> </table></div><button id="create-user">创建新用户</button> </body></html>使用模态对话框来在下一步动作执行之前确认信息和动作。设置modal选项为true，并通过buttons选项来指定主要的动作（Ok）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 模态消息</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); }); </script></head><body> <div id="dialog-message" title="下载完成"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 您的文件已经成功下载到文件夹中。 </p> <p> 当前使用存储空间的 <b>36%</b>。 </p></div> <p>Sed vel diam id libero <a href="http://www.51coolma.cn">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body></html>带有鼠标和键盘交互的用于导航的可主题化菜单。
如需了解更多有关menu部件的细节，请查看API文档菜单部件（Menu Widget）。
一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 菜单（Menu） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body> <ul id="menu"> <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> <li><a href="#">Addyston</a></li> <li> <a href="#">Delphi</a> <ul> <li class="ui-state-disabled"><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li><a href="#">Saarland</a></li> <li> <a href="#">Salzburg</a> <ul> <li> <a href="#">Delphi</a> <ul> <li><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li> <a href="#">Delphi</a> <ul> <li><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li><a href="#">Perch</a></li> </ul> </li> <li class="ui-state-disabled"><a href="#">Amesville</a></li></ul> </body></html>一个带有默认配置的菜单，显示如何使用带有图标的菜单。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 菜单（Menu） - 图标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body> <ul id="menu"> <li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li> <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li> <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>缩小</a></li> <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>打印...</a></li> <li> <a href="#">播放</a> <ul> <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>上一个</a></li> <li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li> <li><a href="#"><span class="ui-icon ui-icon-play"></span>播放</a></li> <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>下一个</a></li> </ul> </li></ul> </body></html>jQuery UI进度条（Progressbar）可以显示一个确定的或不确定的进程状态。
如需了解更多有关progressbar部件的细节，请查看API文档进度条部件（Progressbar Widget）。
默认的确定的进度条。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); </script></head><body> <div id="progressbar"></div> </body></html>自定义更新的标签。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 自定义标签</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } </style> <script> $(function() { var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" ); progressbar.progressbar({ value: false, change: function() { progressLabel.text( progressbar.progressbar( "value" ) + "%" ); }, complete: function() { progressLabel.text( "完成！" ); } }); function progress() { var val = progressbar.progressbar( "value" ) || 0; progressbar.progressbar( "value", val + 1 ); if ( val < 99 ) { setTimeout( progress, 100 ); } } setTimeout( progress, 3000 ); }); </script></head><body> <div id="progressbar"><div class="progress-label">加载...</div></div> </body></html>不确定的进度条，并可在确定和不确定的样式之间切换。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 不确定的值</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#progressbar" ).progressbar({ value: false }); $( "button" ).on( "click", function( event ) { var target = $( event.target ), progressbar = $( "#progressbar" ), progressbarValue = progressbar.find( ".ui-progressbar-value" ); if ( target.is( "#numButton" ) ) { progressbar.progressbar( "option", { value: Math.floor( Math.random() * 100 ) }); } else if ( target.is( "#colorButton" ) ) { progressbarValue.css({ "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 ) }); } else if ( target.is( "#falseButton" ) ) { progressbar.progressbar( "option", "value", false ); } }); }); </script> <style> #progressbar .ui-progressbar-value { background-color: #ccc; } </style></head><body> <div id="progressbar"></div><button id="numButton">随机值 - 确定</button><button id="falseButton">不确定</button><button id="colorButton">随机颜色</button> </body></html>拖动手柄来选择一个数值。
如需了解更多有关slider部件的细节，请查看API文档滑块部件（Slider Widget）。
基本的滑块是水平的，有一个单一的手柄，可以用鼠标或箭头键进行移动。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider" ).slider(); }); </script></head><body> <div id="slider"></div> </body></html>组合了三个滑块，来创建一个简单的RGB颜色选择器。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 颜色选择器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } </style> <script> function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#swatch" ).css( "background-color", "#" + hex ); } $(function() { $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 255 ); $( "#green" ).slider( "value", 140 ); $( "#blue" ).slider( "value", 60 ); }); </script></head><body class="ui-widget-content" style="border:0;"> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 简单的颜色选择器</p> <div id="red"></div><div id="green"></div><div id="blue"></div> <div id="swatch" class="ui-widget-content ui-corner-all"></div> </body></html>组合水平的和垂直的滑块，每个都带有各自的选项，来创建一个音乐播放器的UI。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 多个滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #eq span { height:120px; float:left; margin:15px } </style> <script> $(function() { // 设置主音量 $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // 设置图形均衡器 $( "#eq > span" ).each(function() { // 从标记读取初始值并删除 var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); }); </script></head><body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> 主音量</p> <div id="master" style="width:260px; margin:15px;"></div> <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> 图形均衡器</p> <div id="eq"> <span>88</span> <span>77</span> <span>55</span> <span>33</span> <span>40</span> <span>45</span> <span>70</span></div> </body></html>将range选项设置为true，来获取带有两个拖拽手柄的值的范围。手柄之间的控件用不同的背景颜色填充来表示该区间的值是可选择的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 范围滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script></head><body> <p> <label for="amount">价格范围：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-range"></div> </body></html>固定范围滑块的最大值，用户只能选择最小值。设置range选项为"max"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 带有固定最大值的范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range-max" ).slider({ range: "max", min: 1, max: 10, value: 2, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">最小的房间数量：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p><div id="slider-range-max"></div> </body></html>固定范围滑块的最小值，用户只能选择最大值。将range选项设置为"min"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 带有固定最小值的范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 700, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">最大价格：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-range-min"></div> </body></html>如何绑定一个滑块到一个已有的select元素。选择保持可见以便显示变化。当选择改变时，同时更新滑块。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 绑定到 select 的滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var select = $( "#minbeds" ); var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); }); }); </script></head><body> <form id="reservation"> <label for="minbeds">最小的床位数</label> <select name="minbeds" id="minbeds"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select></form> </body></html>使用滑块来操作页面上内容的定位。本实例中，它是一个能获取值的滚动条。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 滑块滚动条</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } </style> <script> $(function() { //滚动面板部分 var scrollPane = $( ".scroll-pane" ), scrollContent = $( ".scroll-content" ); //创建滑块 var scrollbar = $( ".scroll-bar" ).slider({ slide: function( event, ui ) { if ( scrollContent.width() > scrollPane.width() ) { scrollContent.css( "margin-left", Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) ) + "px" ); } else { scrollContent.css( "margin-left", 0 ); } } }); //追加要处理的图标 var handleHelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handleHelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); //由于滑块手柄滚动，改变要隐藏的溢出部分 scrollPane.css( "overflow", "hidden" ); //根据要滚动距离按比例定义滚动条和手柄的尺寸 function sizeScrollbar() { var remainder = scrollContent.width() - scrollPane.width(); var proportion = remainder / scrollContent.width(); var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); scrollbar.find( ".ui-slider-handle" ).css({ width: handleSize, "margin-left": -handleSize / 2 }); handleHelper.width( "" ).width( scrollbar.width() - handleSize ); } //基于滚动内容位置，重置滑块的值 function resetValue() { var remainder = scrollPane.width() - scrollContent.width(); var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : parseInt( scrollContent.css( "margin-left" ) ); var percentage = Math.round( leftVal / remainder * 100 ); scrollbar.slider( "value", percentage ); } //如果滑块是 100%，且窗口变大，则显示内容 function reflowContent() { var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); var gap = scrollPane.width() - showing; if ( gap > 0 ) { scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); } } //当缩放窗口时改变手柄的位置 $( window ).resize(function() { resetValue(); sizeScrollbar(); reflowContent(); }); //初始化滚动条大小 setTimeout( sizeScrollbar, 10 );//safari 超时 }); </script></head><body> <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header">1</div> <div class="scroll-content-item ui-widget-header">2</div> <div class="scroll-content-item ui-widget-header">3</div> <div class="scroll-content-item ui-widget-header">4</div> <div class="scroll-content-item ui-widget-header">5</div> <div class="scroll-content-item ui-widget-header">6</div> <div class="scroll-content-item ui-widget-header">7</div> <div class="scroll-content-item ui-widget-header">8</div> <div class="scroll-content-item ui-widget-header">9</div> <div class="scroll-content-item ui-widget-header">10</div> <div class="scroll-content-item ui-widget-header">11</div> <div class="scroll-content-item ui-widget-header">12</div> <div class="scroll-content-item ui-widget-header">13</div> <div class="scroll-content-item ui-widget-header">14</div> <div class="scroll-content-item ui-widget-header">15</div> <div class="scroll-content-item ui-widget-header">16</div> <div class="scroll-content-item ui-widget-header">17</div> <div class="scroll-content-item ui-widget-header">18</div> <div class="scroll-content-item ui-widget-header">19</div> <div class="scroll-content-item ui-widget-header">20</div> </div> <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <div class="scroll-bar"></div> </div></div> </body></html>通过把step选项设置为一个整数来设置滑块值的增量，通常是滑块最大值的除数。默认增量是1。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 对齐增量</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider" ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">捐款金额（$50 增量）：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider"></div> </body></html>改变范围滑块的方向为垂直的。通过.height()分配一个高度值，或通过CSS设置高度，同时设置orientation选项为"vertical"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 垂直的范围滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range" ).slider({ orientation: "vertical", range: true, values: [ 17, 67 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script></head><body> <p> <label for="amount">销售目标（百万）：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-range" style="height:250px;"></div> </body></html>改变滑块的方向为垂直的。通过.height()分配一个高度值，或通过CSS设置高度，同时设置orientation选项为"vertical"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 垂直的滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">体积：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-vertical" style="height:200px;"></div> </body></html>通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。
如需了解更多有关spinner部件的细节，请查看API文档旋转器部件（Spinner Widget）。
默认的旋转器。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var spinner = $( "#spinner" ).spinner(); $( "#disable" ).click(function() { if ( spinner.spinner( "option", "disabled" ) ) { spinner.spinner( "enable" ); } else { spinner.spinner( "disable" ); } }); $( "#destroy" ).click(function() { if ( spinner.data( "ui-spinner" ) ) { spinner.spinner( "destroy" ); } else { spinner.spinner(); } }); $( "#getvalue" ).click(function() { alert( spinner.spinner( "value" ) ); }); $( "#setvalue" ).click(function() { spinner.spinner( "value", 5 ); }); $( "button" ).button(); }); </script></head><body> <p> <label for="spinner">选择一个值：</label> <input id="spinner" name="value"></p> <p> <button id="disable">切换禁用/启用</button> <button id="destroy">切换部件</button></p> <p> <button id="getvalue">获取值</button> <button id="setvalue">设置值为 5</button></p> </body></html>本实例是一个捐款表格，带有货币选择和数量旋转器。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 货币</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#currency" ).change(function() { $( "#spinner" ).spinner( "option", "culture", $( this ).val() ); }); $( "#spinner" ).spinner({ min: 5, max: 2500, step: 25, start: 1000, numberFormat: "C" }); }); </script></head><body> <p> <label for="currency">要捐款的货币</label> <select id="currency" name="currency"> <option value="en-US">US {#content}lt;/option> <option value="de-DE">EUR €</option> <option value="ja-JP">YEN ¥</option> </select></p><p> <label for="spinner">要捐款的数量：</label> <input id="spinner" name="spinner" value="5"></p></body></html>本实例是一个小数旋转器。增量设置为0.01。处理文化变化的代码会读取当前的选择器的值，当改变文化时，会基于新的文化重新设置值的样式。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 小数</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#spinner" ).spinner({ step: 0.01, numberFormat: "n" }); $( "#culture" ).change(function() { var current = $( "#spinner" ).spinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner" ).spinner( "value", current ); }); }); </script></head><body> <p> <label for="spinner">小数旋转器：</label> <input id="spinner" name="spinner" value="5.06"></p><p> <label for="culture">选择一种用于格式化的文化：</label> <select id="culture"> <option value="en-EN" selected="selected">English</option> <option value="de-DE">German</option> <option value="ja-JP">Japanese</option> </select></p></body></html>谷歌地图集成，使用旋转器来改变纬度和经度。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 地图</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="http://maps.google.com/maps/api/js?sensor=false" rel="external nofollow" ></script> <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { function latlong() { return new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); } function position() { map.setCenter( latlong() ); } $( "#lat, #lng" ).spinner({ step: .001, change: position, stop: position }); var map = new google.maps.Map( $("#map")[0], { zoom: 8, center: latlong(), mapTypeId: google.maps.MapTypeId.ROADMAP }); }); </script> <style> #map { width:500px; height:500px; } </style></head><body> <label for="lat">纬度</label><input id="lat" name="lat" value="44.797"><br><label for="lng">经度</label><input id="lng" name="lng" value="-93.278"> <div id="map"></div></body></html>溢出旋转器限制范围从-10到10。对于10以上的值，会溢出到-10，反之亦然。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 溢出</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#spinner" ).spinner({ spin: function( event, ui ) { if ( ui.value > 10 ) { $( this ).spinner( "value", -10 ); return false; } else if ( ui.value < -10 ) { $( this ).spinner( "value", 10 ); return false; } } }); }); </script></head><body> <p> <label for="spinner">选择一个值：</label> <input id="spinner" name="value"></p></body></html>一个扩展自旋转器的自定义部件。使用 全球化（Globalization）插件来解析和输出时间戳，带有自定义的step和page选项。向上/向下光标用于分钟的递增/递减，向上/向下翻页用于小时的递增/递减。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 时间</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $.widget( "ui.timespinner", $.ui.spinner, { options: { // 秒 step: 60 * 1000, // 小时 page: 60 }, _parse: function( value ) { if ( typeof value === "string" ) { // 已经是一个时间戳 if ( Number( value ) == value ) { return Number( value ); } return +Globalize.parseDate( value ); } return value; }, _format: function( value ) { return Globalize.format( new Date(value), "t" ); } }); $(function() { $( "#spinner" ).timespinner(); $( "#culture" ).change(function() { var current = $( "#spinner" ).timespinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner" ).timespinner( "value", current ); }); }); </script></head><body> <p> <label for="spinner">时间旋转器：</label> <input id="spinner" name="spinner" value="08:30 PM"></p><p> <label for="culture">选择一种用于格式化的文化：</label> <select id="culture"> <option value="en-EN" selected="selected">English</option> <option value="de-DE">German</option> </select></p></body></html>一种多面板的单内容区，每个面板与列表中的标题相关。
如需了解更多有关tabs部件的细节，请查看API文档标签页部件（Tabs Widget）。
点击标签页，切换被划分为不同逻辑部分的内容。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs(); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>点击选中的标签页来切换内容的关闭/打开状态。为了启用这个功能，需要设置collapsible选项为true。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 折叠内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs({ collapsible: true }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p><strong>再次点击标签页来关闭内容面板。</strong></p> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p><strong>再次点击标签页来关闭内容面板。</strong></p> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p><strong>再次点击标签页来关闭内容面板。</strong></p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>在标签页链接中设置href的值来为标签页通过Ajax获取外部的内容。当Ajax请求在等待响应时，标签页的标签变为"Loading..."，当加载完成后返回常规的标签。
标签3和4演示了慢加载和损坏的AJAX标签，以及如何处理这些情况下的服务器端的错误。请注意，这两个都要求web服务器能解释PHP。它们在文件系统以外无法工作。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 通过 Ajax 获取内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs({ beforeLoad: function( event, ui ) { ui.jqXHR.error(function() { ui.panel.html( "不能加载该标签页。如果这不是一个演示。" + "我们会尽快修复这个问题。" ); }); } }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">预加载</a></li> <li><a href="ajax/content1.html">标签 1</a></li> <li><a href="ajax/content2.html">标签 2</a></li> <li><a href="ajax/content3-slow.php">标签 3 （慢的）</a></li> <li><a href="ajax/content4-broken.php">标签 4 （损坏的）</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div></div> </body></html>通过event选项设置当鼠标悬停时切换各部分的打开/关闭状态。event的默认值是"click"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 当鼠标悬停时打开</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs({ event: "mouseover" }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>简单的标签页添加和移除。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 简单的操作</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #dialog label, #dialog input { display:block; } #dialog label { margin-top: 0.5em; } #dialog input, #dialog textarea { width: 95%; } #tabs { margin-top: 1em; } #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } #add_tab { cursor: pointer; } </style> <script> $(function() { var tabTitle = $( "#tab_title" ), tabContent = $( "#tab_content" ), tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", tabCounter = 2; var tabs = $( "#tabs" ).tabs(); // 模态对话框的初始化：自定义按钮和一个重置内部表单的 "close" 回调 var dialog = $( "#dialog" ).dialog({ autoOpen: false, modal: true, buttons: { Add: function() { addTab(); $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { form[ 0 ].reset(); } }); // addTab 表单：当提交时调用 addTab 函数，并关闭对话框 var form = dialog.find( "form" ).submit(function( event ) { addTab(); dialog.dialog( "close" ); event.preventDefault(); }); // 实际的 addTab 函数：使用上面表单的输入添加新的标签页 function addTab() { var label = tabTitle.val() || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $( tabTemplate.replace( /#{href}/g, "#" + id ).replace( /#{label}/g, label ) ), tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" ); tabs.tabs( "refresh" ); tabCounter++; } // addTab 按钮：值打开对话框 $( "#add_tab" ) .button() .click(function() { dialog.dialog( "open" ); }); // 关闭图标：当点击时移除标签页 tabs.delegate( "span.ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); tabs.bind( "keyup", function( event ) { if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) { var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); } }); }); </script></head><body> <div id="dialog" title="Tab data"> <form> <fieldset class="ui-helper-reset"> <label for="tab_title">标题</label> <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all"> <label for="tab_content">内容</label> <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> </fieldset> </form></div> <button id="add_tab">添加标签页</button> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">移除标签页</span></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div></div> </body></html>拖拽上面的标签页来对它们进行重新排序。
只需要简单地调用.ui-tabs-nav元素上的.sortable()，即可让标签页可排序。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 排序（Sortable）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var tabs = $( "#tabs" ).tabs(); tabs.find( ".ui-tabs-nav" ).sortable({ axis: "x", stop: function() { tabs.tabs( "refresh" ); } }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>通过一些额外的CSS（用于定位的）和JS（在元素上放置正确的class），标签页皆可放置在内容的底部。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 底部标签页</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs(); // 修改 class $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ) .removeClass( "ui-corner-all ui-corner-top" ) .addClass( "ui-corner-bottom" ); // 移动导航到底部 $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" ); }); </script> <style> /* 强制一个高度，这样标签页就不会随着内容高度的改变而改变 */ #tabs .tabs-spacer { float: left; height: 200px; } .tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; } .tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; } .tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; } </style></head><body> <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div class="tabs-spacer"></div> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>点击标签页，切换被划分为不同逻辑部分的内容。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 垂直的标签页</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" ); $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" ); }); </script> <style> .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <h2>内容标题 1</h2> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <h2>内容标题 2</h2> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <h2>内容标题 3</h2> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>jQuery UI可自定义的、可主题化的工具提示框，替代原生的工具提示框。
如需了解更多有关tooltip部件的细节，请查看API文档工具提示框部件（Tooltip Widget）。
悬停在链接上，或者使用tab键循环切换聚焦在每个元素上。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( document ).tooltip(); }); </script> <style> label { display: inline-block; width: 5em; } </style></head><body> <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>悬停在链接上，或者使用tab键循环切换聚焦在每个元素上。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义样式</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); </script> <style> .ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; } </style></head><body> <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>本实例演示了如何使用show和hide选项来自定义动画，也可以使用open事件来自定义动画。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#show-option" ).tooltip({ show: { effect: "slideDown", delay: 250 } }); $( "#hide-option" ).tooltip({ hide: { effect: "explode", delay: 250 } }); $( "#open-event" ).tooltip({ show: null, position: { my: "left top", at: "left bottom" }, open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); } }); }); </script></head><body> <p>这里有多种方式自定义工具提示框的动画。</p><p>您可以使用 <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" rel="external nofollow" target="_blank" title="向下滑动显示">show</a> 和<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" rel="external nofollow" target="_blank" title="爆炸隐藏">hide</a> 选项。</p><p>您也可以使用 <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" rel="external nofollow" target="_blank" title="向下移动显示">open</a> 事件。</p> </body></html>该示例演示如何通过自定义items和content选项，来组合不同的事件委托工具提示框到一个单一的实例中。
您可能需要与地图工具提示框进行交互，这是未来版本中的一个待实现的功能。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .photo { width: 300px; text-align: center; } .photo .ui-widget-header { margin: 1em 0; } .map { width: 350px; height: 350px; } .ui-tooltip { max-width: 350px; } </style> <script> $(function() { $( document ).tooltip({ items: "img, [data-geo], [title]", content: function() { var element = $( this ); if ( element.is( "[data-geo]" ) ) { var text = element.text(); return "<img class='map' alt='" + text + "' src='http://maps.google.com/maps/api/staticmap?" + "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + text + "'>"; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); } if ( element.is( "img" ) ) { return element.attr( "alt" ); } } }); }); </script></head><body> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>圣史蒂芬大教堂（St. Stephen's Cathedral）</h2> <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" rel="external nofollow" target="_blank" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG" rel="external nofollow" target="_blank" > <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen's Cathedral）" class="ui-corner-all"> </a></div> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>塔桥（Tower Bridge）</h2> <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" rel="external nofollow" target="_blank" data-geo="">英国伦敦（London, England）</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg" rel="external nofollow" target="_blank" > <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/tower-bridge.jpg" alt="塔桥（Tower Bridge）" class="ui-corner-all"> </a></div> <p>所有的图片源自 <a href="http://commons.wikimedia.org/wiki/Main_Page" rel="external nofollow" target="_blank" >Wikimedia Commons</a>，且归 <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" rel="external nofollow" target="_blank" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版权持有人所有。</p> </body></html>使用下面的按钮来显示帮助文本，或者只需要让鼠标悬停在输入框上或者让输入框获得焦点，即可显示相应输入框的帮助文本。
在CSS中定义一个固定的宽度，让同时显示所有的帮助文本时看起来更一致。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 表单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> label { display: inline-block; width: 5em; } fieldset div { margin-bottom: 2em; } fieldset .help { display: inline-block; } .ui-tooltip { width: 210px; } </style> <script> $(function() { var tooltips = $( "[title]" ).tooltip(); $( "<button>" ) .text( "Show help" ) .button() .click(function() { tooltips.tooltip( "open" ); }) .insertAfter( "form" ); }); </script></head><body> <form> <fieldset> <div> <label for="firstname">名字</label> <input id="firstname" name="firstname" title="请提供您的名字。"> </div> <div> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" title="请提供您的姓氏。"> </div> <div> <label for="address">地址</label> <input id="address" name="address" title="您的家庭或工作地址。"> </div> </fieldset></form> </body></html>本实例中的工具提示框是相对于鼠标进行定位的，当鼠标在元素上移动时，它会跟随鼠标移动。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 跟踪鼠标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> label { display: inline-block; width: 5em; } </style> <script> $(function() { $( document ).tooltip({ track: true }); }); </script></head><body><p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>一个虚拟的视频播放器，带有喜欢/分享/统计按钮，每个按钮都带有自定义样式的工具提示框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 视频播放器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; } .ui-tooltip { border: 1px solid white; background: rgba(20, 20, 20, 1); color: white; } .set { display: inline-block; } .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } </style> <script> $(function() { function notify( input ) { var msg = "已选择 " + $.trim( input.data( "tooltip-title" ) || input.text() ); $( "<div>" ) .appendTo( document.body ) .text( msg ) .addClass( "notification ui-state-default ui-corner-bottom" ) .position({ my: "center top", at: "center top", of: window }) .show({ effect: "blind" }) .delay( 1000 ) .hide({ effect: "blind", duration: "slow" }, function() { $( this ).remove(); }); } $( "button" ).each(function() { var button = $( this ).button({ icons: { primary: $( this ).data( "icon" ) }, text: !!$( this ).attr( "title" ) }); button.click(function() { notify( button ); }); }); $( ".set" ).buttonset({ items: "button" }); $( document ).tooltip({ position: { my: "center top", at: "center bottom+5", }, show: { duration: "fast" }, hide: { effect: "hide" } }); }); </script></head><body> <div class="player">这里是视频 (HTML5?)</div><div class="tools"> <span class="set"> <button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button> <button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button> </span> <div class="set"> <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button> <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button> </div> <button title="分享这个视频">分享</button> <button data-icon="ui-icon-alert">标记为不恰当</button></div> </body></html>jQuery UI特效（Effect）可以对一个元素添加动画特效。
如需了解更多有关.effect()方法的细节，请查看API文档.effect()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .effect() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // 运行特效 $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; // 回调函数 function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">特效（Effect）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fade">淡入淡出特效（Fade Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option> <option value="transfer">转移特效（Transfer Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>本实例使用HTML Canvas元素，绘制了jQuery UI提供的所有easings。点击每个图可查看该easing的行为。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - Easing 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .graph { float: left; margin-left: 10px; } </style> <script> $(function() { if ( !$( "<canvas>" )[0].getContext ) { $( "<div>" ).text( "您的浏览器不支持 canvas，本演示需要在支持 canvas 的浏览器下进行。" ).appendTo( "#graphs" ); return; } var i = 0, width = 100, height = 100; $.each( $.easing, function( name, impl ) { var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; canvas.width = width; canvas.height = height; var drawHeight = height * 0.8, cradius = 10; ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; // 绘制背景 ctx.beginPath(); ctx.moveTo( cradius, 0 ); ctx.quadraticCurveTo( 0, 0, 0, cradius ); ctx.lineTo( 0, height - cradius ); ctx.quadraticCurveTo( 0, height, cradius, height ); ctx.lineTo( width - cradius, height ); ctx.quadraticCurveTo( width, height, width, height - cradius ); ctx.lineTo( width, 0 ); ctx.lineTo( cradius, 0 ); ctx.fill(); // 绘制底线 ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight + .5 ); ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); // 绘制顶线 ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); // 绘制 easing ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; ctx.moveTo( width * 0.1, drawHeight ); $.each( new Array( width ), function( position ) { var state = position / width, val = impl( state, position, 0, 1, width ); ctx.lineTo( position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7 ); }); ctx.stroke(); // 点击时动态改变 graph.click(function() { wrap .animate( { height: "hide" }, 2000, name ) .delay( 800 ) .animate( { height: "show" }, 2000, name ); }); graph.width( width ).height( height + text.height() + 10 ); }); }); </script></head><body> <div id="graphs"></div> </body></html>使用自定义效果来显示匹配的元素。
在本教程的API文档.show()中介绍了更多有关.show()方法的细节。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .show() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 100 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 280, height: 185 } }; } // 运行特效 $( "#effect" ).show( selectedEffect, options, 500, callback ); }; // 回调函数 function callback() { setTimeout(function() { $( "#effect:visible" ).removeAttr( "style" ).fadeOut(); }, 1000 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); $( "#effect" ).hide(); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">显示（Show）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>jQuery UI隐藏（Hide）通过使用自定义的效果来隐藏匹配的元素。
如需了解更多有关.hide()方法的细节，请查看API文档.hide()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .hide() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // 运行特效 $( "#effect" ).hide( selectedEffect, options, 1000, callback ); }; // 回调函数 function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">隐藏（Hide）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>使用自定义效果来显示或隐藏匹配的元素。
如需了解更多有关.toggle()方法的细节，请查看API文档.toggle()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .toggle() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; width: 240px; height: 135px; padding: 0.4em; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // 运行特效 $( "#effect" ).toggle( selectedEffect, options, 500 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">切换（Toggle）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，为匹配的元素集合内的每个元素添加指定的Class。
如需了解更多有关.addClass()方法的细节，请查看API文档.addClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .addClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function() { $( "#effect" ).addClass( "newClass", 1000, callback ); return false; }); function callback() { setTimeout(function() { $( "#effect" ).removeClass( "newClass" ); }, 1500 ); } }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，为匹配的元素集合内的每个元素移除指定的Class。
如需了解更多有关.removeClass()方法的细节，请查看API文档.removeClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .removeClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function() { $( "#effect" ).removeClass( "newClass", 1000, callback ); return false; }); function callback() { setTimeout(function() { $( "#effect" ).addClass( "newClass" ); }, 1500 ); } }); </script></head><body> <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，根据Class是否存在以及switch参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个Class。
如需了解更多有关.toggleClass()方法的细节，请查看API文档.toggleClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .toggleClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function() { $( "#effect" ).toggleClass( "newClass", 1000 ); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的Class。
如需了解更多有关.switchClass()方法的细节，请查看API文档.switchClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .switchClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; } .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function(){ $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div><a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>使用.animate()实现颜色动画效果。
如需了解更多有关颜色动画（Color Animation）的细节，请查看API文档颜色动画（Color Animation）。
jQuery UI捆绑了jQuery Color插件，jQuery Color插件提供了颜色动画及其他许多与颜色相关的实用功能。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - 动画（Animation）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { var state = true; $( "#button" ).click(function() { if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } state = !state; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">动画（Animation）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">切换特效</a> </body></html>相对窗口、文档、锚、光标/鼠标等元素定位一个元素。
如需了解更多有关.position()方法的细节，请查看API文档.position()。
使用表单控件配置位置，或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 定位（Position） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #parent { width: 60%; height: 40px; margin: 10px auto; padding: 5px; border: 1px solid #777; background-color: #fbca93; text-align: center; } .positionable { position: absolute; display: block; right: 0; bottom: 0; background-color: #bcd5e6; text-align: center; } #positionable1 { width: 75px; height: 75px; } #positionable2 { width: 120px; height: 40px; } select, input { margin-left: 15px; } </style> <script> $(function() { function position() { $( ".positionable" ).position({ of: $( "#parent" ), my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } $( ".positionable" ).css( "opacity", 0.5 ); $( "select, input" ).bind( "click keyup change", position ); $( "#parent" ).draggable({ drag: position }); position(); }); </script></head><body> <div id="parent"> <p> 这是父元素的位置。 </p></div> <div class="positionable" id="positionable1"> <p> to position </p></div> <div class="positionable" id="positionable2"> <p> to position 2 </p></div> <div style="padding: 20px; margin-top: 75px;"> 定位... <div style="padding-bottom: 20px;"> <b>my:</b> <select id="my_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="my_vertical"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> </select> </div> <div style="padding-bottom: 20px;"> <b>at:</b> <select id="at_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="at_vertical"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> </select> </div> <div style="padding-bottom: 20px;"> <b>collision:</b> <select id="collision_horizontal"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="flipfit">flipfit</option> <option value="none">none</option> </select> <select id="collision_vertical"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="flipfit">flipfit</option> <option value="none">none</option> </select> </div></div> </body></html>一个照片浏览器的原型，使用Position分别把图片定为在左边、中间、右边，然后循环显示。使用顶部的链接来循环图像，或者在图像的左侧或右侧点击来循环图像。请注意，当调整窗口大小时，会重新定位图像。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 定位（Position） - 图像循环</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> body { margin: 0; } #container { overflow: hidden; position: relative; height: 400px; } img { position: absolute; } </style> <script> $(function() { // 重构部件，去除这些插件方法 $.fn.left = function( using ) { return this.position({ my: "right middle", at: "left+25 middle", of: "#container", collision: "none", using: using }); }; $.fn.right = function( using ) { return this.position({ my: "left middle", at: "right-25 middle", of: "#container", collision: "none", using: using }); }; $.fn.center = function( using ) { return this.position({ my: "center middle", at: "center middle", of: "#container", using: using }); }; $( "img:eq(0)" ).left(); $( "img:eq(1)" ).center(); $( "img:eq(2)" ).right(); function animate( to ) { $( this ).stop( true, false ).animate( to ); } function next( event ) { event.preventDefault(); $( "img:eq(2)" ).center( animate ); $( "img:eq(1)" ).left( animate ); $( "img:eq(0)" ).right().appendTo( "#container" ); } function previous( event ) { event.preventDefault(); $( "img:eq(0)" ).center( animate ); $( "img:eq(1)" ).right( animate ); $( "img:eq(2)" ).left().prependTo( "#container" ); } $( "#previous" ).click( previous ); $( "#next" ).click( next ); $( "img" ).click(function( event ) { $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).resize(function() { $( "img:eq(0)" ).left( animate ); $( "img:eq(1)" ).center( animate ); $( "img:eq(2)" ).right( animate ); }); }); </script></head><body> <div id="container"> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/earth.jpg" width="458" height="308" alt="earth"> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/flight.jpg" width="512" height="307" alt="flight"> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/rocket.jpg" width="300" height="353" alt="rocket"> <a id="previous" href="#">上一个</a> <a id="next" href="#">下一个</a></div> </body></html>使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。
如需了解更多有关部件库（Widget Factory）的细节，请查看API文档部件库（Widget Factory）。
该演示展示了一个简单的使用部件库（jquery.ui.widget.js）创建的自定义的小部件。
三个区块是以不同的方式初始化的。点击改变他们的背景颜色。查看源码及注释理解工作原理。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 部件库（Widget Factory） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .custom-colorize { font-size: 20px; position: relative; width: 75px; height: 75px; } .custom-colorize-changer { font-size: 10px; position: absolute; right: 0; bottom: 0; } </style> <script> $(function() { // 部件定义，其中 "custom" 是命名空间，"colorize" 是部件名称 $.widget( "custom.colorize", { // 默认选项 options: { red: 255, green: 0, blue: 0, // 回调 change: null, random: null }, // 构造函数 _create: function() { this.element // 添加一个主题化的 class .addClass( "custom-colorize" ) // 防止双击来选择文本 .disableSelection(); this.changer = $( "<button>", { text: "改变", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // 绑定 changer 按钮上的 click 事件到 random 方法 this._on( this.changer, { // 当小部件被禁用时，_on 不会调用 random click: "random" }); this._refresh(); }, // 当创建及之后改变选项时调用 _refresh: function() { this.element.css( "background-color", "rgb(" + this.options.red +"," + this.options.green + "," + this.options.blue + ")" ); // 触发一个回调/事件 this._trigger( "change" ); }, // 一个改变颜色为随机值的公共方法 // 可通过 .colorize( "random" ) 直接调用 random: function( event ) { var colors = { red: Math.floor( Math.random() * 256 ), green: Math.floor( Math.random() * 256 ), blue: Math.floor( Math.random() * 256 ) }; // 触发一个事件，检查是否已取消 if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // 自动移除通过 _on 绑定的事件 // 在这里重置其他的修改 _destroy: function() { // 移除生成的元素 this.changer.remove(); this.element .removeClass( "custom-colorize" ) .enableSelection() .css( "background-color", "transparent" ); }, // _setOptions 是通过一个带有所有改变的选项的哈希来调用的 // 当改变选项时总是刷新 _setOptions: function() { // _super 和 _superApply this._superApply( arguments ); this._refresh(); }, // _setOption 是为每个独立的改变的选项调用的 _setOption: function( key, value ) { // 防止无效的颜色值 if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) { return; } this._super( key, value ); } }); // 通过默认选项进行初始化 $( "#my-widget1" ).colorize(); // 通过两个自定义的选项进行初始化 $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // 通过自定义的 green 值和一个只允许颜色足够绿的随机的回调进行初始化 $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); // 点击切换 enabled/disabled $( "#disable" ).click(function() { // 为每个小部件使用自定义的选择器来找到所有的实例 // 所有的实例一起切换，所以我们可以从第一个开始检查状态 if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { $( ":custom-colorize" ).colorize( "enable" ); } else { $( ":custom-colorize" ).colorize( "disable" ); } }); // 在初始化后，点击设置选项 $( "#black" ).click( function() { $( ":custom-colorize" ).colorize( "option", { red: 0, green: 0, blue: 0 }); }); }); </script></head><body> <div> <div id="my-widget1">改变颜色</div> <div id="my-widget2">改变颜色</div> <div id="my-widget3">改变颜色</div> <button id="disable">切换 disabled 选项</button> <button id="black">改为黑色</button></div> </body></html>jQuery UI是建立在jQuery JavaScript库上的一组用户界面交互、特效、小部件及主题。通过使用jQuery UI，您可以创建高度交互的Web应用程序，或者是仅仅向窗体控件添加一个日期选择器。
jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的jQuery插件使用模式略有不同。所有的jQuery UI小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
为了更好地体验什么是jQuery UI，请查看jQuery UI 实例。
在实例演示部分，导航列出了jQuery UI提供的所有交互部件和小部件。选择一个交互部件或小部件，您将看到特定插件的一些演示配置。在每个演示中，您可以查看源代码，更改主题，且URL可以被添加书签。例如，您可以查看折叠面板部件填充空间实例演示页面。
jQuery UI是一个建立在jQuery JavaScript库上的小部件和交互库，您可以使用它创建高度交互的Web应用程序。
本节介绍了jQuery UI的一些工作特性。
jQuery UI继承了jQuery简易使用的特性，提供高度抽象接口，短期改善网站易用性。
采用MIT & GPL双协议授权，轻松满足自由产品至企业产品各种授权需求。
兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。
支持WAI-ARIA，通过标准XHTML代码提供渐进增强，保证低端环境可访问性。
提供近20种预设主题，并可自定义多达60项可配置样式规则，提供24种背景纹理选择。
从结构规划到代码编写，全程开放，文档、代码、讨论，人人均可参与。
Google为发布代码提供CDN内容分发网络支持。
开发包内置包含中文在内的40多种语言包。
在开始使用jQuery UI前，你需要正确的下载jQuery UI。
请从jQuery UI网站上的Download Builder（下载生成器）页面下载jQuery UI的副本。
jQuery UI的下载生成器（Download Builder）允许您选择您需要下载的组件，为项目获取一个自定义的库版本。
下述是创建自定义jQuery UI需要的三个步骤：
在下载生成器（Download Builder）页面的第一栏列出了jQuery UI所有的JavaScript组件分类：核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果库（Effects）。jQuery UI中的一些组件依赖于其他组件，当选中这些组件时，它所依赖的其他组件也都会自动被选中。您所选的组件将会合并到一个jQuery UI JavaScript文件。
在下载生成器（Download Builder）页面，您将看到一个文本框，列出了一系列为jQuery UI小部件预先设计的主题。您可以从这些提供的主题中选择一个，也可以使用 ThemeRoller自定义一个主题（详见后面章节的讲解）。
高级主题设置： 下载生成器（Download Builder）的主题部分也为主题提供了一些高级配置设置。如果您打算在一个页面上使用多个主题，这些字段会派上用场。如果您打算在一个页面上只使用一个主题，那么您完全可以跳过这些设置。
在下载生成器（Download Builder）中，最后一步是选择一个版本号。这个步骤很重要，因为jQuery UI的版本是配合特定的jQuery版本设计的。目前的版本有：
点击Download按钮，完成下载。您将得到一个包含您所选组件的自定义zip文件。
本节介绍了jQuery UI的简单使用。
当您下载好了jQuery UI，您将得到一个zip压缩包，该压缩包会包含下列文件：
/css//development-bundle//js/index.html在文本编辑器中打开index.html，您将看到引用了一些外部文件：主题、jQuery和jQuery UI。通常情况下，您需要在页面中引用这三个文件，以便使用jQuery UI 的窗体小部件和交互部件：
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" /><script src="js/jquery.min.js"></script><script src="js/jquery-ui.custom.min.js"></script>一旦您引用了这些必要的文件，您就能向您的页面添加一些jQuery小部件。比如，要制作一个日期选择器（datepicker）小部件，您需要向页面添加一个文本输入框，然后再调用.datepicker()，如下所示：
HTML:
<input type="text" name="date" id="date" />JavaScript:
$( "#date" ).datepicker();
如需查看jQuery UI小部件和交互部件的实例演示，请访问jQuery UI 实例。
您已经了解了jQuery UI下载生成器（Download Builder）如何定制一个包含您所需选项的自定义版本的值，在本节内容中，您将看到其他的定制方式。
jQuery UI中的每个插件都有一个默认配置，默认配置值一般是根据最基本最常见的使用情况设置的。如果您想要让某个插件设置成非默认值，您可以使用"options"重写它的默认设置。选项是一组属性，作为参数传递给jQuery UI小部件。例如，滑块（slider）小部件具有orientation选项，该选项允许您指定滑块是水平的还是垂直的。为了设置滑块的该选项，您只需将它作为一个参数传递，如下所示：
$( "#mySliderDiv" ).slider({ orientation: "vertical"});您可以传递更多不同的选项，每个选项之间用逗号分隔：
$( "#mySliderDiv" ).slider({ orientation: "vertical", min: 0, max: 150, value: 50});请记得选项需放在大括号{ }内。上面的实例只是一个简单的讲解，如需获取整套jQuery UI小部件的详细信息，请查看jQuery UI 实例。
如果您想要设计自己的主题，jQuery UI提供了一个非常完美的用于主题定制的应用程序，这就是ThemeRoller。具体定制请访问jQuery UI ThemeRoller。
ThemeRoller为所有使用jQuery UI小部件设计的元素提供了一个自定义接口。当您调整左栏中的"levers"，右栏中的小部件将根据您的设计进行显示。ThemeRoller的Gallery选项卡提供了一些与设计主题，与下载生成器（Download Builder）页面提供的一样。您可以基于这些主题做调整，或者直接下载。
当您点击ThemeRoller页面中的"Download theme"按钮，将跳转到下载生成器（Download Builder）页面，您的自定义主题会在主体下拉菜单中自动选中。您可以进一步配置下载包。一旦下载完成，您将看到example.html页面使用了您自定义的主题。
提示： 如果您需要编辑您的主题，只需打开CSS文件，找到第43行，"To view and modify this theme, visit ..."，该url即为在ThemeRoller中打开主题进行编辑的链接。
jQuery UI包含了许多维持状态的小部件（Widget），它与典型的jQuery插件使用模式略有不同。jQuery UI小部件的安装方式与大部分jQuery插件的安装方式类似，jQuery UI 的小部件是基于部件库（Widget Factory）创建的，小部件库提供了通用的API。所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
本节将通过进度条（progressbar）小部件代码实例介绍常见的功能。
为了跟踪部件的状态，我们首先介绍一下小部件的全生命周期。当小部件安装时，生命周期开始。我们只需要在一个或多个元素上调用插件，即安装了小部件。
$( "#elem" ).progressbar();上述操作将会初始化jQuery对象中的每个元素，在本例中，元素id为"elem"。因为我们调用无参数的.progressbar()方法，小部件则会按照它的默认选项进行初始化。我们可以在安装时传递一组选项，这样既可重写默认选项。
$( "#elem" ).progressbar({ value: 20 });安装时传递的选项数目多少可根据我们的需要而定。任何我们未传递的选项则都使用它们的默认值。
选项是小部件状态的组成部分，所以我们也可以在安装后再进行设置选项。我们将在后续的option方法中介绍这部分内容。
既然小部件已经初始化，我们就可以查询它的状态，或者在小部件上执行动作。所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法，我们可以向jQuery插件传递方法的名称。例如，为了在进度条（progressbar）小部件上调用value方法，我们应该使用：
$( "#elem" ).progressbar( "value" );如果方法接受参数，我们可以在方法名后传递参数。例如，为了传递参数40给value方法，我们可以使用下述操作：
$( "#elem" ).progressbar( "value", 40 );就像jQuery中的其他方法一样，大部分的小部件方法为链接返回jQuery对象。
$( "#elem" ) .progressbar( "value", 90 ) .addClass( "almost-done" );每个小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。
正如我们前面所提到的，我们可以在初始化之后通过option方法改变选项。例如，我们可以通过调用option方法将progressbar（进度条）的value设置为30。
$( "#elem" ).progressbar( "option", "value", 30 );请注意，这与之前我们调用value方法的实例有所不同。在本实例中，我们调用option方法，改变value选项为30。
我们也可以为某个选项获取当前的值。
$( "#elem" ).progressbar( "option", "value" );另外，我们可以通过给option方法传递一个对象，一次更新多个选项。
$( "#elem" ).progressbar( "option", { value: 100, disabled: true});您也许注意到option方法有着与jQuery代码中取值器和设置器相同的标志，就像.css()和.attr()。唯一的不同就是您必须传递字符串"option"作为第一个参数。
disable方法禁用小部件。在进度条（progressbar）实例中，这会改变样式让进度条显示为禁用状态。
$( "#elem" ).progressbar( "disable" );调用disable方法等同于设置disabled选项为true。
enable方法是disable方法的对立面。
$( "#elem" ).progressbar( "enable" );调用enable方法等同于设置disabled选项为false。
如果您不再需要小部件，那么可以销毁它，返回到最初的标记。这意味着小部件生命周期的终止。
$( "#elem" ).progressbar( "destroy" );一旦您销毁了一个小部件，您就不能在该部件上调用任何方法，除非您再次初始化这个小部件。如果您要移除元素，可以直接通过.remove()，也可以通过 .html()或.empty()修改祖先，小部件会自动销毁。
一些小部件生成包装器元素，或与原始元素断开连接的元素。在下面的实例中，widget将返回生成的元素。在进度条（progressbar）实例中，没有生成的包装器，widget方法返回原始的元素。
$( "#elem" ).progressbar( "widget" );所有的小部件都有跟他们各种行为相关的事件，用于在状态改变时通知您。对于大多数的小部件，当事件被触发时，名称以小部件名称为前缀。例如，我们可以绑定进度条的change事件，一旦值发生变化时就触发。
$( "#elem" ).bind( "progressbarchange", function() { alert( "The value has changed!" );});每个事件都有一个相对应的回调，作为选项进行呈现。我们可以使用进度条（progressbar）的change回调，这等同于绑定progressbarchange事件。
$( "#elem" ).progressbar({ change: function() { alert( "The value has changed!" ); }});大多数事件是针对特定的小部件，所有的小部件都有一个公共的create事件。该事件在小部件被创建时即被触发。
本节将介绍jQuery UI主题。
jQuery UI平台包含两个子框架：小部件框架和CSS框架。
所有的jQuery UI插件都允许开发人员无缝集成UI小部件到他们网站或应用程序的外观和感观。每个插件通过CSS定义样式，且包含了两层样式信息：标准的jQuery UI CSS 框架样式和具体的插件样式。
jQuery UI CSS框架提供了语义表示的类，用来表明小部件内元素的角色，比如标题、内容或可点击区域。这些在所有的小部件中都是一致的，一个可点击的tab（标签页）、accordion（折叠面板）或button（按钮）都有相同的ui-state-defaultclass，用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时，这个class就变成ui-state-hover，当选中这些元素时则变成ui-state-active。这些class的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。
CSS框架样式封装在一个单独的文件中，名为ui.theme.css。这个文件时通过ThemeRoller应用程序来修改的。框架样式只包含影响外观和感观的属性，只要是颜色、背景图像、图标等。所以这些是"安全的"样式，不会影响到插件的功能。这种分隔意味着开发人员可以通过在theme.css文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者bug修复将是可用的，这些不通过修改即可与主题一起使用。
由于框架样式只覆盖了外观和感观，所以还需要包含具体的插件样式表，这些样式表包括了所有额外的让小部件具有功能性的结构样式规则，比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于themes/base文件夹内，且配合插件进行命名，比如"jquery.ui.accordion.css"。这些样式必须认真编辑，因为它们与脚本一起提供了框架样式的覆盖。
我们鼓励所有的开发人员创建jQuery插件，jQuery UI CSS框架使得最终用户更容易定制主题和使用插件。
下面列出了三种主题化jQuery UI插件的一般方法：
ui.theme.css文件和一个包含了所有必需的背景图像及图标精灵的images文件夹。这个方法是最早的创建和维护主题的方式，但是它对ThemeRoller中提供的选项限制了自定义。ui.theme.css文件，或者任意一个独立插件的样式表。例如，您可以很容易地调整所有按钮的角半径为不同于其他UI组件的值，或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围，您甚至可以在一个UI中同时使用多个主题。为了易于维护，建议只更改ui.theme.css文件和图像。ThemeRoller是一个Web应用程序，jQuery UI能够从中设计和下载自定义主题。您可以访问jQuery UI ThemeRoller进行主题定制。
jQuery UI ThemeRoller是由波士顿的Filament Group, Inc设计和开发的。
在ThemeRoller的界面上存在不同的面板，各面板分别是全局字体和圆角半径设置、小部件容器样式、可点击元素的互动状态，及覆盖和阴影的各种样式。这些面板允许配置各种CSS属性，比如字体尺寸、颜色、粗细、背景颜色和纹理、边框颜色、文本颜色、图标颜色、圆角半径，等等。
ThemeRoller主题可以通过永久链接URL进行查看，它包含一些预先设计的主题可供选择。主题馆（Gallery）可以通过位于应用程序界面顶端的标签栏进行访问。从主题馆（Gallery）中，您可以预览和下载主题，甚至可以选择一个主题，然后切换到"Roll Your Own"标签页进行调整。
当您设计完主题后，您可以下载主题以便在项目中进行使用。ThemeRoller在顶部有一个"Download theme（下载主题）"按钮，可以生成一个zip压缩包，包含了所有的主题相关文件。下载文件中的图像是按照您的规格进行生成的，并保存为高质量的PNG文件。
您的主题将包含图像和CSS，组成了jQuery UI CSS框架的自定义版本，包含了所有插件的图像和CSS。
一旦下载了主题，解压缩后，您将看到一个名为themes的文件夹。该文件夹包括了主题所需的CSS和图像。复制主题文件夹到您的项目中，并在页面中链接 themes/all.css文件。
ThemeRoller生成了一个jQuery UI CSS框架的自定义版本，用于开发您自己的ThemeRoller-ready jQuery组件。通过这个框架生成的类被设计来提供通用的用户界面的设计情况，包括状态、图标以及各种辅助类。
如需了解更多jQuery UI CSS框架的开发信息，请查看主题化 API 文档。
jQuery UI的CSS框架功能强大，它是为了创建自定义jQuery小部件而设计的。框架包括很多适合多数用户界面需要的CSS类，且可使用jQuery UI ThemeRoller进行维护。通过使用jQuery UI CSS框架创建您自己的UI组件。您需采用共享标记公约，以便在插件社区的代码集成。
以下的CSS类根据样式是否是固定的结构化的，或者是否是可主题化的（颜色、字体、背景等），来分别定义在ui.core.css和ui.theme.css两个文件中。这些类被设计来用于用户界面元素，以便获得整个应用程序的视觉一致性，可通过jQuery UI ThemeRoller对组件进行主题化。
.ui-helper-hidden：对元素应用display: none。.ui-helper-hidden-accessible：对元素应用访问隐藏（通过页面绝对定位）。.ui-helper-reset：UI元素的基本样式重置。重置的元素比如：padding、margin、text-decoration、list-style等等。.ui-helper-clearfix：对父元素应用浮动包装属性。.ui-helper-zfix：对<iframe>元素应用iframe "fix" CSS。.ui-widget：对所有小部件的外部容器应用的Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和1em的字体尺寸，以应对 Windows浏览器中的继承问题。.ui-widget-header：对标题容器应用的Class。对元素及其子元素的文本、链接、图标应用标题容器样式。.ui-widget-content：对内容容器应用的Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）.ui-state-default：对可点击按钮元素应用的Class。对元素及其子元素的文本、链接、图标应用"clickable default"容器样式。.ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable hover"容器样式。.ui-state-focus：当键盘聚焦在可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable hover"容器样式。.ui-state-active：当鼠标点击可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable active"容器样式。.ui-state-highlight：对高亮或者选中元素应用的Class。对元素及其子元素的文本、链接、图标应用"highlight"容器样式。.ui-state-error：对错误消息容器元素应用的Class。对元素及其子元素的文本、链接、图标应用"error"容器样式。.ui-state-error-text：对只有无背景的错误文本颜色应用的Class。可用于表单标签，也可以对子图标应用错误图标颜色。.ui-state-disabled：对禁用的UI元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。.ui-priority-primary：对第一优先权的按钮应用的Class。应用粗体文本。.ui-priority-secondary：对第二优先权的按钮应用的Class。应用正常粗细的文本，对元素应用轻微的透明度。.ui-icon：对图标元素应用的基本Class。设置尺寸为16px方块，隐藏内部文本，对"content"状态的精灵图像设置背景图像。注意： .ui-iconclass将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default容器内的ui-icon元素将根据ui-state-default的图标颜色进行着色。在声明.ui-iconclass之后，接着您可以声明一个秒速图标类型的class。通常情况下，图标class遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一个指向右侧的三角形图标，如下所示：.ui-icon-triangle-1-e
jQuery UI的ThemeRoller在它的预览一栏中提供了全套的CSS框架图标。将鼠标悬浮在图标上可查看class名称。
.ui-corner-tl：对元素的左上角应用圆角半径。.ui-corner-tr：对元素的右上角应用圆角半径。.ui-corner-bl：对元素的左下角应用圆角半径。.ui-corner-br：对元素的右下角应用圆角半径。.ui-corner-top：对元素上边的左右角应用圆角半径。.ui-corner-bottom：对元素下边的左右角应用圆角半径。.ui-corner-right：对元素右边的上下角应用圆角半径。.ui-corner-left：对元素左边的上下角应用圆角半径。.ui-corner-all：对元素的所有四个角应用圆角半径。.ui-widget-overlay：对覆盖屏幕应用100%宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。.ui-widget-shadow：对覆盖应用的Class，设置了不透明度、上偏移/左偏移，以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距（padding）进行应用的。偏移是通过设置上外边距（margin）和左外边距（margin）进行应用的（可以是正数，也可以是负数）。主题是以特定的方式来增加他们的易用性。通常，文件目录结构如下所示：
themename/– 您的主题必须完全包含在一个单独的以主题名称命名的文件夹内。themename/themename.css– 这是基本的CSS文件。无论使用了哪个插件，该文件都必须在每个使用主题的页面中引用。该文件应该是轻量级的，只包括要点。themename/themename.pluginname.css– 您支持的每个插件都需要一个CSS文件。插件的名称应直接包含在文件名中。例如，如果您为tabs（标签页）插件进行主题化，则有：themename.tabs.js。themename/img.png– 您的主题可以包含图像。它们可以根据您的喜好进行命名，这里没有特定的命名惯例。如需了解主题文件结构是如何完成的实例，请访问jQuery UI 基本主题。
为主题编写样式是非常简单的，这是因为主题的灵活性。
所有的主题都应该有一个基本的CSS class。这个主要的class允许用户启用禁用主题。您的根class的格式应该是.ui-themename。且它在HTML文件中的用法如下所示：
<html><head> <title>My Site</title> <link rel="stylesheet" href="themename/themename.css" /> <link rel="stylesheet" href="othertheme/othertheme.css" /> <link rel="stylesheet" href="othertheme/othertheme.dialog.css" /></head><body class="ui-themename"> <div class="ui-othertheme"> <div class="ui-dialog">This is a modal dialog.</div> </div></body></html>在上面的实例中，发生了一些重要的事情：
<div>及其中的每个元素（包括模态对话框）都是根据othertheme的样式进行主题化的。如果我们打开themename.css文件进行查看，我们可以看到如下代码：
body.ui-themename { background:#111; color:snow; }.ui-themename a, a.ui-themename { color:#68D; outline:none; }.ui-themename a:visited, a.ui-themename:visited { color:#D66; }.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }请注意，themename.css文件只包括全局通用的样式信息，特定插件的样式信息不在这里进行定义。这里的样式对所有主题都是适用的。不用担心一个主题会占据多个文件 - 这些会在创建和下载的过程被简化。
jQuery UI部件库（Widget Factory）是一个可扩展的基础，所有的jQuery UI小部件都是在上面进行创建的。使用部件库（Widget Factory）来创建插件，提供了方便的状态管理，同时也为一些常见的任务提供了便捷，比如暴露插件方法，实例化后改变选项等。
jQuery UI部件库的相关内容如下：
jQuery UI的部件库（Widget Factory）使得创建小部件变得更加容易，这些小部件扩展了已有小部件的功能。这样子您就能在已有的基础上创建出功能强大的小部件，也可以在已有的小部件功能上做细微的调整。
注意：在学习本章节之前，需要明白什么是部件库（Widget Factory），及它是怎么工作的。如果您对这些知识还不熟悉，那么请先查看如何使用部件库（Widget Factory）章节。
通过部件库（Widget Factory）创建小部件是通过向$.widget()传递小部件名称和一个原型对象来完成的。下面的实例是在"custom"命名空间中创建一个 "superDialog"小部件。
$.widget( "custom.superDialog", {} );为了支持扩展，$.widget()可选性地接受作为父部件使用的小部件的构造函数。当指定一个父部件时，把它作为第二个参数进行传递，放在小部件名称后面，在小部件原型对象前面。
就像上面的实例，下面也要在"custom"命名空间中创建一个"superDialog"小部件。但是这次传递的是jQuery UI 的 dialog（对话框）小部件的构造函数（$.ui.dialog），表示superDialog小部件应该使用jQuery UI的dialog（对话框）小部件作为父部件。
$.widget( "custom.superDialog", $.ui.dialog, {} );在这里，superDialog和dialog两个小部件实质上是等价的，只是名称和命名空间不同而已。为了让我们新的小部件更具特点，我们可以添加一些方法到它的原型对象上。
小部件的原型对象是传递给$.widget()的最后一个参数。到目前为止，我们的实例使用的是一个空的对象。现在让我们给这个对象添加一个方法：
$.widget( "custom.superDialog", $.ui.dialog, { red: function() { this.element.css( "color", "red" ); }}); // Create a new <div>, convert it into a superDialog, and call the red() method.$( "<div>I am red</div>" ) .superDialog() .superDialog( "red" );现在superDialog有一个red()方法，这会把它的文本颜色改为红色。请注意，部件库（Widget Factory）是如何自动设置this为小部件的实例对象。如需了解实例上所有可用的方法和属性列表，请访问部件库（Widget Factory） API 文档。
有时候，您需要调整或添加已有部件方法的行为。您可以把方法名称指定为原型对象上需要重载的方法名称。下面的实例重载了 dialog（对话框）的open()方法。由于对话框默认是打开的，当运行这段代码时，"open"将会被记录。
$.widget( "custom.superDialog", $.ui.dialog, { open: function() { console.log( "open" ); }}); // Create a new <div>, and convert it into a superDialog.$( "<div>" ).superDialog();当运行这段代码时，有一个问题。由于我们重载了open()的默认行为，所以dialog（对话框）不再显示在屏幕上。
当我们在原型对象上使用方法，我们实际上是重载了原始的方法，在原型链中使用了一个新的方法。
为了让父部件方法可用，部件库（Widget Factory）提供了两个方法：_super()和_superApply()。
_super() 和 _superApply() 来访问父部件_super()和_superApply()在父部件中调用了同样的方法。请看下面的实例。就像上一个实例，这个实例也重载了open()方法来记录"open"。然而，这次运行_super()是调用了dialog（对话框）的open()，并打开对话框。
$.widget( "custom.superDialog", $.ui.dialog, { open: function() { console.log( "open" ); // Invoke the parent widget's open(). return this._super(); }}); $( "<div>" ).superDialog();_super()和_superApply()实际上等同于最初的Function.prototype.call()和Function.prototype.apply()方法。因此，_super()接受一个参数列表，_superApply()接受一个数组作为参数。下面的实例演示了这二者之间的不同。
$.widget( "custom.superDialog", $.ui.dialog, { _setOption: function( key, value ) { // Both invoke dialog's setOption() method. _super() requires the arguments // be passed as an argument list, _superApply() as a single array. this._super( key, value ); this._superApply( arguments ); }});jQuery UI 1.9添加了重定义小部件的功能。因此，可以不用创建一个新的小部件，我们只需要传递$.widget()这样一个已有的小部件名称和构造函数即可。下面的实例在open()中添加了相同的记录，但不是通过创建一个新的小部件来完成的。
$.widget( "ui.dialog", $.ui.dialog, { open: function() { console.log( "open" ); return this._super(); }}); $( "<div>" ).dialog();通过这个方法，我们可以扩展一个已有的小部件方法，但是仍然可以使用_super()来访问原始的方法 - 这些都不是通过创建一个新的小部件来完成的，而是直接重定义小部件即可。
当在小部件扩展及它们的插件之间进行交互时候，有一点值得注意，父部件的插件不能用来调用子部件元素上的方法。下面的实例演示了这一点。
$.widget( "custom.superDialog", $.ui.dialog, {} ); var dialog = $( "<div>" ).superDialog(); // This works.dialog.superDialog( "close" ); // This doesn't.dialog.dialog( "close" );上面的实例中，父部件的插件，dialog()，不能调用superDialog元素上的close()方法。如需了解更多调用小部件方法的知识，请查看小部件（Widget）方法调用。
目前为止，我们看到的实例都有在小部件原型上扩展的方法。在原型上重载的方法影响了小部件的所有实例。
为了演示这一点，请看下面的实例。dialog（对话框）的两个势力都使用了相同的open()方法。
$.widget( "ui.dialog", $.ui.dialog, { open: function() { console.log( "open" ); return this._super(); }}); // Create two dialogs, both use the same open(), therefore "open" is logged twice.$( "<div>" ).dialog();$( "<div>" ).dialog();有时候，您只需要改变小部件的某个实例的行为。为了做到这点，您需要使用正常的JavaScript属性分配，获得对实例的引用，并重载该方法。具体如下面实例所示。
var dialogInstance = $( "<div>" ) .dialog() // Retrieve the dialog's instance and store it. .data( "ui-dialog" ); // Override the close() method for this dialogdialogInstance.close = function() { console.log( "close" );}; // Create a second dialog$( "<div>" ).dialog(); // Select both dialogs and call close() on each of them.// "close" will only be logged once.$( ":data(ui-dialog)" ).dialog( "close" );个性化实例的重载方法技术是完美的一次性定制。
本节介绍了jQuery UI小部件（Widget）方法调用的两种方式。
小部件（Widget）是通过部件库（Widget Factory）使用方法来改变他们初始化后的状态和执行动作而被创建的。有两种调用小部件方法的方式 - 通过部件库（Widget Factory）创建的插件，或者通过调用元素实例对象上的方法。
使用小部件的插件调用方法，把方法名称以字符串形式进行传递。例如，点击这里查看，如何调用dialog（对话框）小部件的close()方法。
$( ".selector" ).dialog( "close" );如果方法要求参数 ，请作为额外的参数传递给插件。点击这里查看，如何调用 dialog（对话框）的option()方法。
$( ".selector" ).dialog( "option", "height" );这会返回dialog（对话框）的height选项的值。
每个小部件的每个实例都是使用jQuery.data()存储在元素上。为了检索实例对象，请使用小部件的全称作为键名调用jQuery.data()。具体如下面实例所示。
var dialog = $( ".selector" ).data( "ui-dialog" );在您引用实例对象之后，可以直接在上面调用方法。
var dialog = $( ".selector" ).data( "ui-dialog" );dialog.close();在jQuery UI 1.11中，新的instance()方法会使得这个过程变得更简单。
$( ".selector" ).dialog( "instance" ).close();大多数通过小部件的插件调用的方法将返回一个jQuery对象，所以方法调用可以通过额外的jQuery方法链接。当在实例上进行调用时，则会返回undefined。具体如下面实例所示。
var dialog = $( ".selector" ).dialog(); // Instance invocation - returns undefineddialog.data( "ui-dialog" ).close(); // Plugin invocation - returns a jQuery objectdialog.dialog( "close" ); // Therefore, plugin method invocation makes it possible to// chain method calls with other jQuery functionsdialog.dialog( "close" ) .css( "color", "red" );例外的是，返回小部件相关信息的那些方法。例如dialog（对话框）的isOpen()方法。
$( ".selector" ) .dialog( "isOpen" ) // This will throw a TypeError .css( "color", "red" );这会产生一个TypeError错误，因为isOpen()返回的是一个布尔值，而不是一个jQuery对象。
编写jQuery插件与向jQuery.prototype（通常显示为$.fn）添加方法一样简单，且需要遵循一些简单的规则，比如返回this。所以为什么会存在部件库（Widget Factory）？
在本章节中，我们将讲解部件库（Widget Factory）的好处，并了解何时使用它，以及为什么要使用它。
大多数jQuery插件是无状态的，它们执行一些动作即完成了它们的任务。例如，如果您使用.text( "hello" )设置元素的文本，没有安装阶段，结果都是一样的。对于这种类型的插件，它只是扩展了jQuery的原型。
然而，一些插件是有状态的，它们有全生命周期、维持状态以及对变化的反应。这些插件需要大量专门的代码来初始化和状态管理（有时是销毁）。这就导致出现了用于创建有状态插件的模板。更糟糕的是，每个插件的作者按照不同的方式进行管理插件的生命周期和状态，这就导致了不同的插件有不同的API样式。部件库（Widget Factory）旨在解决这些问题，它移除了模板，并为插件创建了一个一致的API。
部件库（Widget Factory）定义了如何创建和销毁小部件，获取和设置选项，调用方法，以及监听小部件触发的事件。通过使用部件库（Widget Factory）来创建有状态的插件，会自动符合定义的标准，让新用户更容易使用您的插件。另外，部件库（Widget Factory）还能实现定义接口的功能。如果您对部件库（Widget Factory）提供的API还不熟悉，请查看如何使用部件库（Widget Factory）。
当您创建一个接受选项的插件时，您应该为尽可能多的选项定义defaults。然后在初始化时，把用户提供的选项与defaults进行合并。您也可以暴露defaults，这样用户就可以更改默认值。在jQuery插件中，一个常用的模式如下所示：
$.fn.plugin = function( options ) { options = $.extend( {}, $.fn.plugin.defaults, options ); // Plugin logic goes here.}; $.fn.plugin.defaults = { param1: "foo", param2: "bar", param3: "baz"};部件库（Widget Factory）也提供了这个功能，并在这上面做了改进。使用部件库（Widget Factory）之后，它将如下所示。
$.widget( "ns.plugin", { // Default options. options: { param1: "foo", param2: "bar", param3: "baz" }, _create: function() { // Options are already merged and stored in this.options // Plugin logic goes here. } });在本节中，我们将介绍jQuery UI如何使用部件库。
在下述的示例中，我们将创建一个进度条，这可以通过调用jQuery.widget()来完成，它带有两个参数：一个是要创建的插件名称，一个是包含支持插件的函数的对象文字。当插件被调用时，它将创建一个新的插件实例，所有的函数都将在该实例的语境中被执行。这与两种重要方式的标准jQuery插件不同。首先，语境是一个对象，不是DOM元素。其次，语境总是一个单一的对象，不是一个集合。
$.widget( "custom.progressbar", { _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }});插件的名称必须包含命名空间，在这个实例中，我们使用了custom命名空间。您只能创建一层深的命名空间，因此，custom.progressbar是一个有效的插件名称，而very.custom.progressbar不是一个有效的插件名称。
我们看到部件库（Widget Factory）为我们提供了两个属性。this.element是一个包含一个元素的jQuery对象。如果我们的插件在包含多个元素的jQuery对象上调用，则会为每个元素创建一个单独的插件实例，且每个实例都会有自己的this.element。第二个属性，this.options，是一个包含所有插件选项的键名/键值对的哈希（hash）。这些选项可以被传给插件，如下所示：
$( "<div></div>" ) .appendTo( "body" ) .progressbar({ value: 20 });当我们调用jQuery.widget()，它通过给jQuery.fn（用于创建标准插件的系统） 添加函数来扩展jQuery。所添加的函数名称是基于您传给jQuery.widget() 的名称，不带命名空间-"progressbar"。传给插件的选项是在插件实例中获取设置的值。如下面的实例所示，我们可以为任意一个选项指定默认值。当设计您的API时，您应该清楚你的插件的最常见的使用情况，以便您可以设置适当的默认值，且确保使所有的选项真正可选。
$.widget( "custom.progressbar", { // Default options. options: { value: 0 }, _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }});现在我们可以初始化我们的进度条，我们将通过在插件实例上调用方法来执行动作。为了定义一个插件方法，我们只在我们传给jQuery.widget()的对象中引用函数。我们也可以通过给函数名加下划线前缀来定义"private"方法。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }, // Create a public method. value: function( value ) { // No value passed, act as a getter. if ( value === undefined ) { return this.options.value; } // Value passed, act as a setter. this.options.value = this._constrain( value ); var progress = this.options.value + "%"; this.element.text( progress ); }, // Create a private method. _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } }); 为了在插件实例上调用方法，您可以向jQuery插件传递方法的名称。如果您调用的方法接受参数，您只需简单地在方法名后面传递这些参数即可。
注意：通过向同一个用于初始化插件的jQuery函数传递方法名来执行方法。这样做是为了在保持链方法调用时防止jQuery命名空间污染。在本章节的后续，我们将看到看起来更自然的其他用法。
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ value: 20 }); // Get the current value.alert( bar.progressbar( "value" ) ); // Update the value.bar.progressbar( "value", 50 ); // Get the current value again.alert( bar.progressbar( "value" ) );option()方法是自动提供给插件的。option()方法允许您在初始化后获取并设置选项。该方法像jQuery的.css()和.attr()方法：您可以只传递一个名称作为取值器来使用，也可以传递一个名称和值作为设置器使用，或者传递一个键名/键值对的哈希来设置多个值。当作为取值器使用时，插件将返回与传入名称相对应的选项的当前值。当作为设置器使用时，插件的_setOption方法将被每个被设置的选项调用。我们可以在我们的插件中指定一个_setOption方法来反应选项更改。对于更改选项要独立执行的动作，我们可以重载_setOptions。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } }); 最简单的扩展插件的方法是添加回调，这样用户就可以在插件状态发生变化时做出反应。我们可以看下面的实例如何在进度达到100%时添加回调到进度条。_trigger()方法有三个参数：回调名称，一个启动回调的jQuery事件对象，以及一个与事件相关的数据哈希。回调名称是唯一一个必需的参数，但是对于想要在插件上实现自定义功能的用户，其他的参数是非常有用的。例如，如果我们创建一个可拖拽插件，我们可以在触发拖拽回调时传递mousemove事件，这将允许用户对基于由事件对象提供的x/y坐标上的拖拽做出反应。请注意，传递到_trigger()的原始的事件必须是一个jQuery事件，而不是一个原生的浏览器事件。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); if ( this.options.value == 100 ) { this._trigger( "complete", null, { value: 100 } ); } }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } }); 回调函数本质上只是附加选项，所以您可以像其他选项一样获取并设置它们。无论何时执行回调，都会有一个相对应的事件被触发。事件类型是通过连接插件的名称和回调函数名称确定的。回调和事件都接受两个相同的参数：一个事件对象和一个与事件相关的数据哈希，具体如下面实例所示。您的插件可能需要包含防止用户使用的功能，为了做到这点，最好的方法就是创建爱你可撤销的回调。用户可以撤销回调或者相关的事件，与他们撤销任何一个原生事件一样，都是通过调用 event.preventDefault()或返回false来实现的。如果用户撤销回调，_trigger()方法将返回false，这样您就能在插件内实现合适的功能。
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ complete: function( event, data ) { alert( "Callbacks are great!" ); } }) .bind( "progressbarcomplete", function( event, data ) { alert( "Events bubble and support many handlers for extreme flexibility." ); alert( "The progress bar value is " + data.value ); }); bar.progressbar( "option", "value", 100 );现在我们已经看到如何使用部件库（Widget Factory）创建一个插件，接下来让我们看看它实际上是如何工作的。当您调用jQuery.widget()时，它将为插件创建一个构造函数，并设置您为插件实例传入的作为原型的对象。所有自动添加到插件的功能都来自一个基本的小部件原型，该原型定义为jQuery.Widget.prototype。当创建插件实例时，会使用jQuery.data把它存储在原始的DOM元素上，插件名作为键名。
由于插件实例直接链接到DOM元素上，您可以直接访问插件实例，而不需要遍历插件方法。这将允许您直接在插件实例上调用方法，而不需要传递字符串形式的方法名，同时您也可以直接访问插件的属性。
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar() .data( "progressbar" ); // Call a method directly on the plugin instance.bar.option( "value", 50 ); // Access properties on the plugin instance.alert( bar.options.value );您也可以在不遍历插件方法的情况下创建一个实例，通过选项和元素直接调用构造函数即可：var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") ); // Same result as before.alert( bar.options.value );插件有构造函数和原型的最大好处是易于扩展插件。通过添加或修改插件原型上的方法，我们可以修改插件所有实例的行为。例如，如果我们想要向进度条添加一个方法来重置进度为0%，我们可以向原型添加这个方法，它将在所有插件实例上可调用。
$.custom.progressbar.prototype.reset = function() { this._setOption( "value", 0 );};如需了解扩展小部件的更多细节，以及如何在一个已有的小部件上创建一个全新的小部件的更多细节，请查看通过部件库（Widget Factory）扩展小部件（Widget）。
在某些情况下，允许用户应用插件，然后再取消应用。您可以通过_destroy()方法做到这一点。在_destroy()方法内，您应该撤销在初始化和后期使用期间插件所做的一切动作。_destroy()是通过.destroy()方法被调用的，.destroy()方法是在插件实例绑定的元素从DOM上移除时被自动调用的，所以这可被用于垃圾回收。基本的.destroy()方法也处理一些常用的清理操作，比如从小部件的DOM元素上移除实例引用，从元素上解除绑定小部件命名空间中的所有事件，解除绑定所有使用_bind()添加的事件。
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); if ( this.options.value == 100 ) { this._trigger( "complete", null, { value: 100 } ); } }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; }, _destroy: function() { this.element .removeClass( "progressbar" ) .text( "" ); } }); 部件库（Widget Factory）只是创建有状态插件的一种方式。这里还有一些其他不同的模型可以使用，且每个都有各自的优势和劣势。部件库（Widget Factory）解决了很多常见的问题，且大大提高了效率，同时也大大提高了代码的重用性，使它适合于jQuery UI及其他有状态的插件。
请注意，在本章节中我们使用了custom命名空间。ui命名空间被官方的jQuery UI插件保留。当创建您自己的插件时，您应该创建自己的命名空间。这样才能更清楚插件来自哪里，属于哪个范围。
jQuery UI在jQuery内置的特效上添加了一些功能。jQuery UI支持颜色动画和Class转换，同时也提供了一些额外的Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。
| API | 描述 | 也属于类别 |
|---|---|---|
| .addClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的Class。 | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| 百叶窗特效（Blind Effect） | 百叶窗特效（Blind Effect）通过将元素包裹在一个容器内，采用"拉百叶窗"效果来隐藏或显示元素。 | |
| 反弹特效（Bounce Effect） | 反弹特效（Bounce Effect）反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。 | |
| 剪辑特效（Clip Effect） | 剪辑特效（Clip Effect）通过垂直或水平方向夹剪元素来隐藏或显示一个元素。 | |
| 颜色动画（Color Animation） | 使用.animate()实现颜色动画效果。 | |
| 降落特效（Drop Effect） | 降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。 | |
| Easings | Easing函数指定动画在不同点上的行进速度。 | |
| .effect() | 对一个元素应用动画特效。 | 特效核心（Effects Core） | 方法（Method） |
| 爆炸特效（Explode Effect） | 爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素。 | |
| 淡入淡出特效（Fade Effect） | 淡入淡出特效（Fade Effect）通过淡入淡出元素来隐藏或显示一个元素。 | |
| 折叠特效（Fold Effect） | 折叠特效（Fold Effect）通过折叠元素来隐藏或显示一个元素。 | |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method） |
| 突出特效（Highlight Effect） | 突出特效（Highlight Effect）通过首先改变背景颜色来隐藏或显示一个元素。 | |
| 膨胀特效（Puff Effect） | 通过在缩放元素的同时隐藏元素来创建膨胀特效（Puff Effect）。 | |
| 跳动特效（Pulsate Effect） | 跳动特效（Pulsate Effect）通过跳动来隐藏或显示一个元素。 | |
| .removeClass() | 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的Class。 | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| 缩放特效（Scale Effect） | 按照某个百分比缩放元素。 | |
| 震动特效（Shake Effect） | 垂直或水平方向多次震动元素。 | |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method） |
| 尺寸特效（Size Effect） | 调整元素尺寸到指定宽度和高度。 | |
| 滑动特效（Slide Effect） | 把元素滑动出视区。 | |
| .switchClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的Class。 | 特效核心（Effects Core） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method） |
| .toggleClass() | 当动画样式改变时，根据Class是否存在以及switch参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个Class。 | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| 转移特效（Transfer Effect） | 把一个元素的轮廓转移到另一个元素。 |
Effects Core是由jquery.ui.effect.js提供的功能。除了下面列出的方法，jquery.ui.effect.js还包括一些Easings。
| API | 描述 | 也属于类别 |
|---|---|---|
| .addClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的Class。 | 特效（Effects） | 方法重载（Method Overrides） |
| 颜色动画（Color Animation） | 使用.animate()实现颜色动画效果。 | |
| .effect() | 对一个元素应用动画特效。 | 特效（Effects） | 方法（Method） |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效（Effects） | 方法重载（Method Overrides） | 方法（Method） |
| .removeClass() | 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的Class。 | 特效（Effects） | 方法重载（Method Overrides） |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效（Effects） | 方法重载（Method Overrides） | 方法（Method） |
| .switchClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的Class。 | 特效（Effects） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效（Effects） | 方法重载（Method Overrides） | 方法（Method） |
| .toggleClass() | 当动画样式改变时，根据Class是否存在以及switch参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个Class。 | 特效（Effects） | 方法重载（Method Overrides） |
jQuery UI 1.10 API文档中有一套基于鼠标的交互。
| API | 描述 | 也属于类别 |
|---|---|---|
| 可拖拽小部件（Draggable Widget） | 允许使用鼠标移动元素。 | |
| 可放置小部件（Droppable Widget） | 为可拖拽小部件创建目标。 | |
| 鼠标交互（Mouse Interaction） | 基本交互层。 | 实用工具（Utilities） |
| 可调整尺寸小部件（Resizable Widget） | 使用鼠标改变元素的尺寸。 | |
| 可选择小部件（Selectable Widget） | 使用鼠标选择单个元素或一组元素。 | |
| 可排序小部件（Sortable Widget） | 使用鼠标调整列表中或者网格中元素的排序。 |
jQuery UI对jQuery中几个内置的方法进行重载，以便提供额外的功能。当使用这些重载时，确保加载jQuery UI是很重要的。如果jQuery UI未加载，方法依然存在，但预期的功能将不可用，这会导致难以追踪的错误。
| API | 描述 | 也属于类别 |
|---|---|---|
| .addClass() | 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。 | 特效（Effects） | 特效核心（Effects Core） |
| .focus() | 异步聚焦到一个元素。 | 方法（Method） | UI 核心（UI Core） |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法（Method） |
| .position() | 相对另一个元素定位一个元素。 | 方法（Method） | 实用工具（Utilities） |
| .removeClass() | 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。 | 特效（Effects） | 特效核心（Effects Core） |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法（Method） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法（Method） |
| .toggleClass() | 当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。 | 特效（Effects） | 特效核心（Effects Core） |
jQuery UI主要由小部件（Widgets）、交互（Interactions）和特效（Effects）组成，不过，一些方法的使用也增加了其便利性。
| API | 描述 | 也属于类别 |
|---|---|---|
| .disableSelection() | 禁用选择匹配的元素集合内的文本内容。 | UI 核心（UI Core） |
| .effect() | 对一个元素应用动画特效。 | 特效（Effects） | 特效核心（Effects Core） |
| .enableSelection() | 启用选择匹配的元素集合内的文本内容。 | UI 核心（UI Core） |
| .focus() | 异步聚焦到一个元素。 | 方法重载（Method Overrides） | UI 核心（UI Core） |
| .hide() | 使用自定义效果来隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| .position() | 相对另一个元素定位一个元素。 | 方法重载（Method Overrides） | 实用工具（Utilities） |
| .removeUniqueId() | 为匹配的元素集合移除由.uniqueId()设置的Id。 | UI 核心（UI Core） |
| .scrollParent() | 获取最近的可滚动的祖先。 | UI 核心（UI Core） |
| .show() | 使用自定义效果来显示匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| .toggle() | 使用自定义效果来显示或隐藏匹配的元素。 | 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） |
| .uniqueId() | 为匹配的元素集合生成并申请一个唯一的Id。 | UI 核心（UI Core） |
| .zIndex() | 为元素获取z-index。 | UI 核心（UI Core） |
本节介绍jQuery UI的选择器，如下表所示：
| API | 描述 | 也属于类别 |
|---|---|---|
| :data() Selector | 选择数据已存储在指定的键下的元素。 | UI 核心（UI Core） |
| :focusable Selector | 选择可被聚焦的元素。 | UI 核心（UI Core） |
| :tabbable Selector | 选择用户可通过tab键聚焦的元素。 | UI 核心（UI Core） |
jQuery UI包含一个强大的CSS框架，用于创建自定义的jQuery小部件。该框架包括涵盖广泛的公共用户界面需求的Class，并且可以使用jQuery UI ThemeRoller进行操纵。通过使用jQuery UI CSS框架创建您自己的 UI 组件，您应采用共享标记公约，便于插件社区的代码集成。您可以查看jQuery UI 主题了解更多详情。
| API | 描述 |
|---|---|
| CSS 框架（CSS Framework） | jQuery UI 使用的允许组件主题化的 Class 名称列表。 |
| 图标（Icons） | jQuery UI 提供的图标列表。 |
| 堆叠元素（Stacking Elements） | 一种处理 z-index 和堆叠元素的模式。 |
UI核心（UI Core）功能是由jquery.ui.core.js提供的。
| API | 描述 | 也属于类别 |
|---|---|---|
| :data() Selector | 选择数据已存储在指定的键下的元素。 | 选择器（Selectors） |
| .disableSelection() | 禁用选择匹配的元素集合内的文本内容。 | 方法（Methods） |
| .enableSelection() | 启用选择匹配的元素集合内的文本内容。 | 方法（Methods） |
| .focus() | 异步聚焦到一个元素。 | 方法重载（Method Overrides） | 方法（Methods） |
| :focusable Selector | 选择可被聚焦的元素。 | 选择器（Selectors） |
| jQuery.ui.keyCode | 一个相对于数字值的关键代码描述的映射。 | |
| .removeUniqueId() | 为匹配的元素集合移除由.uniqueId()设置的Id。 | 方法（Methods） |
| .scrollParent() | 获取最近的可滚动的祖先。 | 方法（Methods） |
| :tabbable Selector | 选择用户可通过tab键聚焦的元素。 | 选择器（Selectors） |
| .uniqueId() | 为匹配的元素集合生成并申请一个唯一的Id。 | 方法（Methods） |
| .zIndex() | 为元素获取z-index。 | 方法（Methods） |
下述列表介绍了jQuery UI的一些实用工具。
| API | 描述 | 也属于类别 |
|---|---|---|
| Easings | Easing函数指定动画在不同点上的行进速度。 | |
| 部件库（Widget Factory） | 使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。 | 小部件（Widgets） |
| 插件桥（Widget Plugin Bridge） | jQuery.widget.bridge()方法是jQuery部件库（Widget Factory）的一部分。它扮演着由$.widget()创建的对象和jQuery API之间的中介。 | 小部件（Widgets） |
| 鼠标交互（Mouse Interaction） | 基本交互层。 | 交互（Interactions） |
| .position() | 相对另一个元素定位一个元素。 | 方法重载（Method Overrides） | 方法（Method） |
小部件（Widgets）是功能丰富、有状态的插件，它有一个完整的生命周期，带有方法和事件。您可以查看部件库（Widget Factory）文档了解更多详情。
| API | 描述 | 也属于类别 |
|---|---|---|
| 折叠面板部件（Accordion Widget） | 把一对标题和内容面板转换成折叠面板。 | |
| 自动完成部件（Autocomplete Widget） | 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 | |
| 按钮部件（Button Widget） | 可主题化的按钮和按钮集合。 | |
| 日期选择器部件（Datepicker Widget） | 从弹出框或在线日历选择一个日期。 | |
| 对话框部件（Dialog Widget） | 在一个交互覆盖层中打开内容。 | |
| 部件库（Widget Factory） | 使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。 | 实用工具（Utilities） |
| 插件桥（Widget Plugin Bridge） | jQuery.widget.bridge()方法是jQuery部件库（Widget Factory）的一部分。它扮演着由$.widget()创建的对象和jQuery API之间的中介。 | 实用工具（Utilities） |
| 菜单部件（Menu Widget） | 带有鼠标和键盘交互的用于导航的可主题化菜单。 | |
| 进度条部件（Progressbar Widget） | 显示一个确定的或不确定的进程状态。 | |
| 滑块部件（Slider Widget） | 拖动手柄可以选择一个数值。 | |
| 旋转器部件（Spinner Widget） | 通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。 | |
| 标签页部件（Tabs Widget） | 一种多面板的单内容区，每个面板与列表中的标题相关。 | |
| 工具提示框部件（Tooltip Widget） | 可自定义的、可主题化的工具提示框，替代原生的工具提示框。 |
本节开始，我们将为你介绍一些jQuery UI的使用实例。
jQuery UI提供了一组用户界面交互、特效、小部件、实用工具及主题。通过实例演示、查看源代码、创建主题、阅读API 文档，开始学习使用jQuery UI。
交互（Interactions）向任何元素添加基本的基于鼠标的行为。您可以只通过短短的几行代码即可创建排序列表、缩放元素、拖放行为等等。交互（Interactions）也作用于更复杂的小部件和应用程序。
小部件（Widgets）有功能齐全的UI控件，使桌面应用程序也具备Web应用程序一样丰富的功能。所有的小部件（Widgets）提供了一个核心，带有定制行为的大量扩展以及完整的主题支持。
特效（Effects）支持颜色动画和Class转换，同时也提供了一些额外的Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。
jQuery UI使用实体工具（Utilities）来创建交互（interactions）和小部件（widgets）。
本节介绍了jQuery UI的拖动（Draggable）实例，它允许使用鼠标移动元素。
如需了解更多有关draggable交互的细节，请查看API文档可拖拽小部件（Draggable Widget）。
在任意的DOM元素上启用draggable功能。通过鼠标点击并在视区中拖动来移动draggable对象。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请拖动我！</p></div> </body></html>当draggable移动到视区外时自动滚动文档。设置scroll选项为true来启用自动滚动，当滚动触发时进行微调，滚动速度是通过scrollSensitivity和 scrollSpeed选项设置的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 自动滚动</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ scroll: true }); $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>Scroll 设置为 true，默认设置</p></div> <div id="draggable2" class="ui-widget-content"> <p>scrollSensitivity 设置为 100</p></div> <div id="draggable3" class="ui-widget-content"> <p>scrollSpeed 设置为 100</p></div> <div style="height: 5000px; width: 1px;"></div> </body></html>拖动的范围可以自行定义，方法是通过定义draggable区域的边界来约束每个draggable的运动。设置axis选项来限制draggable的路径为x轴或者y轴，或者使用 containment选项来指定一个父级的DOM元素或者一个jQuery选择器，比如'document.'。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 约束运动</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2 { margin-bottom:20px; } #draggable { cursor: n-resize; } #draggable2 { cursor: e-resize; } #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } h3 { clear: left; } </style> <script> $(function() { $( "#draggable" ).draggable({ axis: "y" }); $( "#draggable2" ).draggable({ axis: "x" }); $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); $( "#draggable5" ).draggable({ containment: "parent" }); }); </script></head><body> <h3>沿着轴约束运动：</h3> <div id="draggable" class="draggable ui-widget-content"> <p>只能垂直拖拽</p></div> <div id="draggable2" class="draggable ui-widget-content"> <p>只能水平拖拽</p></div> <h3>或者在另一个 DOM 元素中约束运动：</h3><div id="containment-wrapper"> <div id="draggable3" class="draggable ui-widget-content"> <p>我被约束在盒子里</p> </div> <div class="draggable ui-widget-content"> <p id="draggable5" class="ui-widget-header">我被约束在父元素内</p> </div></div> </body></html>当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用cursorAt选项来指定相对于 draggable 的另一个位置（指定一个相对于top、right、bottom、left的像素值）。通过提供一个带有有效的CSS光标值的cursor选项，来自定义光标的外观。有效的CSS光标值包括：default、move、pointer、crosshair，等等。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 光标样式</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } }); $( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } }); $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>我总是在中间（相对于鼠标）</p></div> <div id="draggable2" class="ui-widget-content"> <p>我的光标是在 left -5 和 top -5</p></div> <div id="draggable3" class="ui-widget-content"> <p>我的光标位置只控制了 'bottom' 值</p></div> </body></html>通过delay选项设置延迟开始拖拽的毫秒数。通过distance选项设置光标被按下且拖拽指定像素后才允许拖拽。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 延迟开始</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ distance: 20 }); $( "#draggable2" ).draggable({ delay: 1000 }); $( ".ui-draggable" ).disableSelection(); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>只有把我拖拽了 20 像素后，拖拽才开始</p></div> <div id="draggable2" class="ui-widget-content"> <p>不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始</p></div> </body></html>draggable上的start、drag和stop事件。拖拽开始时触发start事件，拖拽期间触发drag事件，拖拽停止时触发stop事件。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 事件</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 16em; padding: 0 1em; } #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } #draggable ul li span.ui-icon { float: left; } #draggable ul li span.count { font-weight: bold; } </style> <script> $(function() { var $start_counter = $( "#event-start" ), $drag_counter = $( "#event-drag" ), $stop_counter = $( "#event-stop" ), counts = [ 0, 0, 0 ]; $( "#draggable" ).draggable({ start: function() { counts[ 0 ]++; updateCounterStatus( $start_counter, counts[ 0 ] ); }, drag: function() { counts[ 1 ]++; updateCounterStatus( $drag_counter, counts[ 1 ] ); }, stop: function() { counts[ 2 ]++; updateCounterStatus( $stop_counter, counts[ 2 ] ); } }); function updateCounterStatus( $event_counter, new_count ) { // 首先更新视觉状态... if ( !$event_counter.hasClass( "ui-state-hover" ) ) { $event_counter.addClass( "ui-state-hover" ) .siblings().removeClass( "ui-state-hover" ); } // ...然后更新数字 $( "span.count", $event_counter ).text( new_count ); } }); </script></head><body> <div id="draggable" class="ui-widget ui-widget-content"> <p>请拖拽我，触发一连串的事件。</p> <ul class="ui-helper-reset"> <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" 被调用 <span class="count">0</span>x</li> <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" 被调用 <span class="count">0</span>x</li> <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" 被调用 <span class="count">0</span>x</li> </ul></div> </body></html>只有当光标在draggable上指定部分时才允许拖拽。使用handle选项来指定用于拖拽对象的元素（或元素组）的jQuery选择器。
或者当光标在draggable内指定元素（或元素组）上时不允许拖拽。使用 handle 选项来指定取消拖拽功能的jQuery选择器。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - Handles</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable p { cursor: move; } </style> <script> $(function() { $( "#draggable" ).draggable({ handle: "p" }); $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }); $( "div, p" ).disableSelection(); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p class="ui-widget-header">您只可以在这个范围内拖拽我</p></div> <div id="draggable2" class="ui-widget-content"> <p>您可以把我向四周拖拽…</p> <p class="ui-widget-header">…但是您不可以在这个范围内拖拽我</p></div> </body></html>当带有布尔值revert选项的draggable停止拖拽时，返回draggable（或它的助手）到原始位置。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 还原位置</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ revert: true }); $( "#draggable2" ).draggable({ revert: true, helper: "clone" }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>还原</p></div> <div id="draggable2" class="ui-widget-content"> <p>还原助手</p></div> </body></html>对齐draggable到DOM元素的内部或外部边界。使用snap、snapMode（inner, outer, both）和snapTolerance（当调用对齐时，draggable与元素之间的距离，以像素为单位）选项。
或者对齐draggable到网格。通过grid选项设置网格单元的尺寸（以像素为单位的高度或宽度）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } </style> <script> $(function() { $( "#draggable" ).draggable({ snap: true }); $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); $( "#draggable4" ).draggable({ grid: [ 20, 20 ] }); $( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); }); </script></head><body> <div id="snaptarget" class="ui-widget-header"> <p>我是对齐目标</p></div> <br style="clear:both"> <div id="draggable" class="draggable ui-widget-content"> <p>默认（snap: true），对齐到所有其他的 draggable 元素</p></div> <div id="draggable2" class="draggable ui-widget-content"> <p>我只对齐到大盒子</p></div> <div id="draggable3" class="draggable ui-widget-content"> <p>我只对齐到大盒子的外边缘</p></div> <div id="draggable4" class="draggable ui-widget-content"> <p>我对齐到一个 20 x 20 网格</p></div> <div id="draggable5" class="draggable ui-widget-content"> <p>我对齐到一个 80 x 80 网格</p></div> </body></html>给用户提供反馈，就像以助手方式拖拽对象一样。helper选项接受值'original'（用光标移动draggable对象），'clone'（用光标移动draggable的副本），或者一个返回DOM元素的函数（该元素在拖拽期间显示在光标附近）。通过opacity选项控制助手的透明度。
为了区别哪一个draggable正在被拖拽，让在运动中的draggable保持最前。如果正在拖拽，使用zIndex选项来设置助手的高度z-index，或者使用stack选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 视觉反馈</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2, #draggable3 { margin-bottom:20px; } #set { clear:both; float:left; width: 368px; height: 120px; } p { clear:both; margin:0; padding:1em 0; } </style> <script> $(function() { $( "#draggable" ).draggable({ helper: "original" }); $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); $( "#draggable3" ).draggable({ cursor: "move", cursorAt: { top: -12, left: -20 }, helper: function( event ) { return $( "<div class='ui-widget-header'>I'm a custom helper</div>" ); } }); $( "#set div" ).draggable({ stack: "#set div" }); }); </script></head><body> <h3 class="docs">助手：</h3> <div id="draggable" class="ui-widget-content"> <p>原始的</p></div> <div id="draggable2" class="ui-widget-content"> <p>半透明的克隆</p></div> <div id="draggable3" class="ui-widget-content"> <p>自定义助手（与 cursorAt 结合）</p></div> <h3 class="docs">堆叠：</h3><div id="set"> <div class="ui-widget-content"> <p>我们是 draggables..</p> </div> <div class="ui-widget-content"> <p>..它的 z-index 是自动控制的..</p> </div> <div class="ui-widget-content"> <p>..带有 stack 选项。</p> </div></div> </body></html>Draggable与Sortable的无缝交互。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding: 5px; width: 150px; } </style> <script> $(function() { $( "#sortable" ).sortable({ revert: true }); $( "#draggable" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "ul, li" ).disableSelection(); }); </script></head><body> <ul> <li id="draggable" class="ui-state-highlight">请拖拽我</li></ul> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> </body></html>为可拖拽小部件创建目标。
如需了解更多有关droppable交互的细节，请查看API文档可放置小部件（Droppable Widget）。
在任意的DOM元素上启用droppable功能，并为可拖拽小部件创建目标。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请把我拖拽到目标处！</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里！</p></div> </body></html>使用accept选项指定目标droppable接受哪一个元素（或元素组）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 接受</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } </style> <script> $(function() { $( "#draggable, #draggable-nonvalid" ).draggable(); $( "#droppable" ).droppable({ accept: "#draggable", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable-nonvalid" class="ui-widget-content"> <p>我是不能被放置的 draggable</p></div> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>accept: '#draggable'</p></div> </body></html>当使用嵌套的droppable时 — 例如，您可以有一个树形的可编辑的目录结构，带有文件夹和文档节点—greedy选项设置为true来防止当draggable被放置在子节点（droppable）上时的事件传播。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 防止传播</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; } #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable, #droppable-inner" ).droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); return false; } }); $( "#droppable2, #droppable2-inner" ).droppable({ greedy: true, activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable-inner" class="ui-widget-header"> <p>内部 droppable（不带有 greedy）</p> </div></div> <div id="droppable2" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable2-inner" class="ui-widget-header"> <p>内部 droppable（带有 greedy）</p> </div></div> </body></html>当带有布尔值revert选项的draggable停止拖拽时，返回draggable（或它的助手）到原始位置。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 还原 draggable 的位置</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable" ).draggable({ revert: "valid" }); $( "#draggable2" ).draggable({ revert: "invalid" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "已放置！" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>当被放置在目标上时还原</p></div> <div id="draggable2" class="ui-widget-content"> <p>当未被放置在目标上时还原</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里</p></div> </body></html>演示如何使用折叠面板来展示产品的目录结构，使用拖拽和放置来添加产品到购物车，购物车中的产品是可排序的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 购物车演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> h1 { padding: .2em; margin: 0; } #products { float:left; width: 500px; margin-right: 2em; } #cart { width: 200px; float: left; margin-top: 1em; } /* 定义列表样式，以便最大化 droppable */ #cart ol { margin: 0; padding: 1em 0 1em 3em; } </style> <script> $(function() { $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // 获取由 droppable 与 sortable 交互而加入的条目 // 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项 $( this ).removeClass( "ui-state-default" ); } }); }); </script></head><body> <div id="products"> <h1 class="ui-widget-header">产品</h1> <div id="catalog"> <h2><a href="#">T-Shirts</a></h2> <div> <ul> <li>Lolcat Shirt</li> <li>Cheezeburger Shirt</li> <li>Buckit Shirt</li> </ul> </div> <h2><a href="#">Bags</a></h2> <div> <ul> <li>Zebra Striped</li> <li>Black Leather</li> <li>Alligator Leather</li> </ul> </div> <h2><a href="#">Gadgets</a></h2> <div> <ul> <li>iPhone</li> <li>iPod</li> <li>iPad</li> </ul> </div> </div></div> <div id="cart"> <h1 class="ui-widget-header">购物车</h1> <div class="ui-widget-content"> <ol> <li class="placeholder">添加产品到这里</li> </ol> </div></div> </body></html>您可以通过拖拽照片到回收站或者点击回收站图标来删除照片。
您可以通过拖拽照片到相册或者点击回收利用图标来还原照片。
您可以通过点击缩放图标来查看大图。jQuery UI对话框（dialog）部件用于模态窗口。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 简单的照片管理器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #gallery { float: left; width: 65%; min-height: 12em; } .gallery.custom-state-active { background: #eee; } .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } .gallery li h5 { margin: 0 0 0.4em; cursor: move; } .gallery li a { float: right; } .gallery li a.ui-icon-zoomin { float: left; } .gallery li img { width: 100%; cursor: move; } #trash { float: right; width: 32%; min-height: 18em; padding: 1%; } #trash h4 { line-height: 16px; margin: 0 0 0.4em; } #trash h4 .ui-icon { float: left; } #trash .gallery h5 { display: none; } </style> <script> $(function() { // 这是相册和回收站 var $gallery = $( "#gallery" ), $trash = $( "#trash" ); // 让相册的条目可拖拽 $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // 点击一个图标不会启动拖拽 revert: "invalid", // 当未被放置时，条目会还原回它的初始位置 containment: "document", helper: "clone", cursor: "move" }); // 让回收站可放置，接受相册的条目 $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function( event, ui ) { deleteImage( ui.draggable ); } }); // 让相册可放置，接受回收站的条目 $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function( event, ui ) { recycleImage( ui.draggable ); } }); // 图像删除功能 var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='还原图像' class='ui-icon ui-icon-refresh'>还原图像</a>"; function deleteImage( $item ) { $item.fadeOut(function() { var $list = $( "ul", $trash ).length ? $( "ul", $trash ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash ); $item.find( "a.ui-icon-trash" ).remove(); $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() { $item .animate({ width: "48px" }) .find( "img" ) .animate({ height: "36px" }); }); }); } // 图像还原功能 var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='删除图像' class='ui-icon ui-icon-trash'>删除图像</a>"; function recycleImage( $item ) { $item.fadeOut(function() { $item .find( "a.ui-icon-refresh" ) .remove() .end() .css( "width", "96px") .append( trash_icon ) .find( "img" ) .css( "height", "72px" ) .end() .appendTo( $gallery ) .fadeIn(); }); } // 图像预览功能，演示 ui.dialog 作为模态窗口使用 function viewLargerImage( $link ) { var src = $link.attr( "href" ), title = $link.siblings( "img" ).attr( "alt" ), $modal = $( "img[src$='" + src + "']" ); if ( $modal.length ) { $modal.dialog( "open" ); } else { var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" ) .attr( "src", src ).appendTo( "body" ); setTimeout(function() { img.dialog({ title: title, width: 400, modal: true }); }, 1 ); } } // 通过事件代理解决图标行为 $( "ul.gallery > li" ).click(function( event ) { var $item = $( this ), $target = $( event.target ); if ( $target.is( "a.ui-icon-trash" ) ) { deleteImage( $item ); } else if ( $target.is( "a.ui-icon-zoomin" ) ) { viewLargerImage( $target ); } else if ( $target.is( "a.ui-icon-refresh" ) ) { recycleImage( $item ); } return false; }); }); </script></head><body> <div class="ui-widget ui-helper-clearfix"> <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras_min.jpg" alt="High Tatras 的最高峰" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 2</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras2_min.jpg" alt="绿山湖畔的小屋" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 3</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras3_min.jpg" alt="计划登高" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 4</h5> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/high_tatras4_min.jpg" alt="在 Kozi kopka 的顶部" width="96" height="72"> <a href="/attachments/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a> </li></ul> <div id="trash" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">回收站</span> 回收站</h4></div> </div> </body></html>当悬停在droppable上时，或者当droppable被激活（即一个可接受的draggable被放置在droppable上）时，改变droppable的外观。使用hoverClass或 activeClass选项来分别指定class。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 视觉反馈</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } h3 { clear: left; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#draggable2" ).draggable(); $( "#droppable2" ).droppable({ accept: "#draggable2", activeClass: "ui-state-default", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <h3>当悬停在 droppable 上时的反馈：</h3> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里</p></div> <h3>当激活 draggable 时的反馈：</h3> <div id="draggable2" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable2" class="ui-widget-header"> <p>请放置在这里</p></div> </body></html>jQuery UI缩放能够使用鼠标改变元素的尺寸。
如需了解更多有关resizable交互的细节，请查看API文档可调整尺寸小部件（Resizable Widget）。
在任意的DOM元素上启用resizable功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable(); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">缩放（Resizable）</h3></div> </body></html>使用animate选项（布尔值）使缩放行为动画化。当该选项设置为true时，拖拽轮廓到所需的位置，元素会在拖拽停止时以动画形式调整到该尺寸。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 1px dotted gray; } </style> <script> $(function() { $( "#resizable" ).resizable({ animate: true }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">动画</h3></div> </body></html>定义缩放区域的边界。使用containment选项来指定一个父级的DOM元素或一个jQuery选择器，比如'document.'。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 限制缩放区域</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #container { width: 300px; height: 300px; } #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } #resizable { background-position: top left; width: 150px; height: 150px; } #resizable, #container { padding: 0.5em; } </style> <script> $(function() { $( "#resizable" ).resizable({ containment: "#container" }); }); </script></head><body> <div id="container" class="ui-widget-content"> <h3 class="ui-widget-header">限制</h3> <div id="resizable" class="ui-state-active"> <h3 class="ui-widget-header">缩放（Resizable）</h3> </div></div> </body></html>通过delay选项设置延迟开始缩放的毫秒数。通过distance选项设置光标被按下且拖拽指定像素后才允许缩放。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 延迟开始</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; } #resizable h3, #resizable2 h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ delay: 1000 }); $( "#resizable2" ).resizable({ distance: 40 }); }); </script></head><body> <h3 class="docs">时间延迟 (ms):</h3><div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">时间</h3></div> <h3 class="docs">距离延迟 (px):</h3><div id="resizable2" class="ui-widget-content"> <h3 class="ui-widget-header">距离</h3></div> </body></html>通过设置helper选项为一个CSS class，当缩放时只显示元素的轮廓。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 助手</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 2px dotted #00F; } </style> <script> $(function() { $( "#resizable" ).resizable({ helper: "ui-resizable-helper" }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">助手</h3></div> </body></html>使用maxHeight、maxWidth、minHeight和minWidth选项限制resizable元素的最大或最小高度或宽度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 最大/最小尺寸</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 200px; height: 150px; padding: 5px; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ maxHeight: 250, maxWidth: 350, minHeight: 150, minWidth: 200 }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">放大/缩小</h3></div> </body></html>保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置aspectRatio选项为true，且可选地传递一个新的比率（比如，4/3）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 保持纵横比</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 160px; height: 90px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ aspectRatio: 16 / 9 }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">保持纵横比</h3></div> </body></html>对齐resizable元素到网格。通过grid选项设置网格单元的尺寸（以像素为单位的高度和宽度）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 对齐到网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $( "#resizable" ).resizable({ grid: 50 }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">网格</h3></div> </body></html>通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给alsoResize选项传递一个共享的选择器。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 同步缩放</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { background-position: top left; } #resizable, #also { width: 150px; height: 120px; padding: 0.5em; } #resizable h3, #also h3 { text-align: center; margin: 0; } #also { margin-top: 1em; } </style> <script> $(function() { $( "#resizable" ).resizable({ alsoResize: "#also" }); $( "#also" ).resizable(); }); </script></head><body> <div id="resizable" class="ui-widget-header"> <h3 class="ui-state-active">缩放</h3></div> <div id="also" class="ui-widget-content"> <h3 class="ui-widget-header">同步缩放</h3></div> </body></html>可缩放的文本框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 文本框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-resizable-se { bottom: 17px; } </style> <script> $(function() { $( "#resizable" ).resizable({ handles: "se" }); }); </script></head><body> <textarea id="resizable" rows="5" cols="20"></textarea> </body></html>通过设置ghost选项为true，可在缩放期间显示一个半透明的元素，而不是显示一个实际的元素。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 缩放（Resizable） - 视觉反馈</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-ghost { border: 1px dotted gray; } </style> <script> $(function() { $( "#resizable" ).resizable({ ghost: true }); }); </script></head><body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Ghost</h3></div> </body></html>jQuery UI选择（Selectable）实例中，你可以使用鼠标选择单个元素或一组元素。
如需了解更多有关selectable交互的细节，请查看API文档可选择小部件（Selectable Widget）。
在某个DOM元素上或者一组元素上启用selectable功能。通过鼠标拖拽选择条目。按住Ctrl键，选择多个不相邻的条目。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 选择（Selectable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable(); }); </script></head><body> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li></ol> </body></html>让selectable条目显示为网格，使用CSS使得它们带有相同的尺寸且浮动显示。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 选择（Selectable） - 显示为网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } </style> <script> $(function() { $( "#selectable" ).selectable(); }); </script></head><body> <ol id="selectable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li></ol> </body></html>写一个函数，在stop事件发生时触发，来收集被选中条目的索引值。呈现这些值作为反馈，或者以数据字符串形式进行传递。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 选择（Selectable） - 序列化</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable({ stop: function() { var result = $( "#select-result" ).empty(); $( ".ui-selected", this ).each(function() { var index = $( "#selectable li" ).index( this ); result.append( " #" + ( index + 1 ) ); }); } }); }); </script></head><body> <p id="feedback"><span>您已经选择了：</span> <span id="select-result">无</span>。</p> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li></ol> </body></html>jQuery UI排序（Sortable）允许你使用鼠标调整列表中或者网格中元素的顺序。
如需了解更多有关sortable交互的细节，请查看API文档可排序小部件（Sortable Widget）。
在任意的DOM元素上启用sortable功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable各个条目共享draggable 属性。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 默认功能</title><link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script></head><body> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li></ul> </body></html>通过向connectWith选项传递一个选择器，来把一个列表中的元素排序到另一个列表中，反之亦然。最简单的办法是将带有某个CSS class的所有相关的列表分组，然后传递该class到sortable函数（比如，connectWith: '.myclass'）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 连接列表</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); </script></head><body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li></ul> </body></html>通过放置列表项到顶部适当的标签页中，来把一个列表中的元素排序到另一个列表中，反之亦然。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 标签页连接列表</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "#sortable1, #sortable2" ).sortable().disableSelection(); var $tabs = $( "#tabs" ).tabs(); var $tab_items = $( "ul:first li", $tabs ).droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function( event, ui ) { var $item = $( this ); var $list = $( $item.find( "a" ).attr( "href" ) ) .find( ".connectedSortable" ); ui.draggable.hide( "slow", function() { $tabs.tabs( "option", "active", $tab_items.index( $item ) ); $( this ).appendTo( $list ).show( "slow" ); }); } }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> </ul> <div id="tabs-1"> <ul id="sortable1" class="connectedSortable ui-helper-reset"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> </div> <div id="tabs-2"> <ul id="sortable2" class="connectedSortable ui-helper-reset"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> </div></div> </body></html>通过时间延迟和距离延迟来防止意外的排序。通过delay选项设置开始排序之前必须拖拽的毫秒数。通过distance选项设置开始排序之前必须拖拽的像素数。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 延迟开始</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } </style> <script> $(function() { $( "#sortable1" ).sortable({ delay: 300 }); $( "#sortable2" ).sortable({ distance: 15 }); $( "li" ).disableSelection(); }); </script></head><body> <h3 class="docs">时间延迟 300ms：</h3> <ul id="sortable1"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li></ul> <h3 class="docs">距离延迟 15px：</h3> <ul id="sortable2"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li></ul> </body></html>让sortable条目显示为网格，使用CSS使得它们带有相同的尺寸且浮动显示。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 显示为网格</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script></head><body> <ul id="sortable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li></ul> </body></html>当拖拽一个sortable条目到一个新的位置时，其他条目将为该条目腾出空间。向placeholder选项传递一个class来定义可视化的空白的样式。使用布尔值的 forcePlaceholderSize选项来设置占位符的尺寸。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 放置占位符</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } html>body #sortable li { height: 1.5em; line-height: 1.2em; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; } </style> <script> $(function() { $( "#sortable" ).sortable({ placeholder: "ui-state-highlight" }); $( "#sortable" ).disableSelection(); }); </script></head><body> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 6</li> <li class="ui-state-default">Item 7</li></ul> </body></html>通过把选项设置为false，来阻止一个列表中的所有条目被放置到一个单独的空列表中。默认情况下，sortable条目可被放置到空的列表中。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 处理空列表</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script> $(function() { $( "ul.droptrue" ).sortable({ connectWith: "ul" }); $( "ul.dropfalse" ).sortable({ connectWith: "ul", dropOnEmpty: false }); $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); }); </script></head><body> <ul id="sortable1" class="droptrue"> <li class="ui-state-default">可被放置到..</li> <li class="ui-state-default">..一个空列表中</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> <ul id="sortable2" class="dropfalse"> <li class="ui-state-highlight">不可被放置到..</li> <li class="ui-state-highlight">..一个空列表中</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li></ul> <ul id="sortable3" class="droptrue"></ul> <br style="clear:both"> </body></html>指定通过向items选项传递一个jQuery选择器哪些项目可排序。该选项之外的项目则是不可排序的，同时它们也不是sortable条目的有效的目标。
如果只想防止特定的条目排序，则向cancel选项传递一个jQuery选择器。已取消的条目依然是其他条目的有效的排序目标。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 包含/排除条目</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } </style> <script> $(function() { $( "#sortable1" ).sortable({ items: "li:not(.ui-state-disabled)" }); $( "#sortable2" ).sortable({ cancel: ".ui-state-disabled" }); $( "#sortable1 li, #sortable2 li" ).disableSelection(); }); </script></head><body> <h3 class="docs">指定哪个条目是 sortable：</h3> <ul id="sortable1"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable 或者一个放置目标）</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable 或者一个放置目标）</li> <li class="ui-state-default">Item 4</li></ul> <h3 class="docs">取消排序（但作为放置目标）：</h3> <ul id="sortable2"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable）</li> <li class="ui-state-default ui-state-disabled">（我不是 sortable）</li> <li class="ui-state-default">Item 4</li></ul> </body></html>启用门户组件（样式化的div）作为sortable，并使用connectWith选项来允许在列之间进行排序。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 门户组件（Portlets）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> body { min-width: 520px; } .column { width: 170px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; padding: 0.3em; } .portlet-header { padding: 0.2em 0.3em; margin-bottom: 0.5em; position: relative; } .portlet-toggle { position: absolute; top: 50%; right: 0; margin-top: -8px; } .portlet-content { padding: 0.4em; } .portlet-placeholder { border: 1px dotted black; margin: 0 1em 1em 0; height: 50px; } </style> <script> $(function() { $( ".column" ).sortable({ connectWith: ".column", handle: ".portlet-header", cancel: ".portlet-toggle", placeholder: "portlet-placeholder ui-corner-all" }); $( ".portlet" ) .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) .find( ".portlet-header" ) .addClass( "ui-widget-header ui-corner-all" ) .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); $( ".portlet-toggle" ).click(function() { var icon = $( this ); icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" ); icon.closest( ".portlet" ).find( ".portlet-content" ).toggle(); }); }); </script></head><body> <div class="column"> <div class="portlet"> <div class="portlet-header">订阅</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">新闻</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column"> <div class="portlet"> <div class="portlet-header">购物</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column"> <div class="portlet"> <div class="portlet-header">链接</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">图像</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> </body></html>在一个有限的空间内显示用于呈现信息的可折叠的内容面板。
如需了解更多有关accordion部件的细节，请查看API文档折叠面板部件（Accordion Widget）。
点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。
基本的HTML标记是一系列的标题（H3标签）和内容div，因此内容不用通过JavaScript即可用。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion(); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3>部分 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> </body></html>默认情况下，折叠面板总是保持一个部分是打开的。为了让所有部分都是折叠的，可设置collapsible选项为true。点击当前打开的部分，来折叠它的内容面板。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 折叠内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion({ collapsible: true }); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> </body></html>通过icons选项自定义标题图标，icons选项接受标题默认的和激活的（打开的）状态的class。使用UI CSS框架中的任意class，或者使用背景图像创建自定义的 class。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 自定义图标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $( "#accordion" ).accordion({ icons: icons }); $( "#toggle" ).button().click(function() { if ( $( "#accordion" ).accordion( "option", "icons" ) ) { $( "#accordion" ).accordion( "option", "icons", null ); } else { $( "#accordion" ).accordion( "option", "icons", icons ); } }); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> <button id="toggle">切换图标</button> </body></html>由于折叠面板是由块级元素组成的，默认情况下它的宽度会填充可用的水平空间。为了填充由容器分配的垂直空间，设置heightStyle选项为"fill"，脚本会自动设置折叠面板的尺寸为父容器的高度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 填充空间</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #accordion-resizer { padding: 10px; width: 350px; height: 220px; } </style> <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "fill" }); }); $(function() { $( "#accordion-resizer" ).resizable({ minHeight: 140, minWidth: 200, resize: function() { $( "#accordion" ).accordion( "refresh" ); } }); }); </script></head><body> <h3 class="docs">重新调整外部容器：</h3> <div id="accordion-resizer" class="ui-widget-content"> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div></div> </body></html>设置heightStyle: "content"，让折叠面板保持它们初始的高度。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 非自动高度</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "content" }); }); </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div></div> </body></html>点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。
基本的HTML标记是一系列的标题（H3标签）和内容div，因此内容不用通过JavaScript即可用。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 当悬停时打开</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#accordion" ).accordion({ event: "click hoverintent" }); }); /* * hoverIntent | Copyright 2011 Brian Cherne * http://cherne.net/brian/resources/jquery.hoverIntent.html * modified by the jQuery UI team */ $.event.special.hoverintent = { setup: function() { $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler ); }, teardown: function() { $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler ); }, handler: function( event ) { var currentX, currentY, timeout, args = arguments, target = $( event.target ), previousX = event.pageX, previousY = event.pageY; function track( event ) { currentX = event.pageX; currentY = event.pageY; }; function clear() { target .unbind( "mousemove", track ) .unbind( "mouseout", clear ); clearTimeout( timeout ); } function handler() { var prop, orig = event; if ( ( Math.abs( previousX - currentX ) + Math.abs( previousY - currentY ) ) < 7 ) { clear(); event = $.Event( "hoverintent" ); for ( prop in orig ) { if ( !( prop in event ) ) { event[ prop ] = orig[ prop ]; } } // 防止访问原始事件，因为新事件会被异步触发，旧事件不再可用 (#6028) delete event.originalEvent; target.trigger( event ); } else { previousX = currentX; previousY = currentY; timeout = setTimeout( handler, 100 ); } } timeout = setTimeout( handler, 100 ); target.bind({ mousemove: track, mouseout: clear }); } }; </script></head><body> <div id="accordion"> <h3>部分 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, cond imentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit e u ante scelerisque vulputate. </p> </div> <h3>部分 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turp is porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>部分 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Pha sellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>部分 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum prim is in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div></div> </body></html>拖拽标题来给面板重新排序。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 折叠面板（Accordion） - 排序（Sortable）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> /* 当排序时，IE 存在布局问题（查看 #5413） */ .group { zoom: 1 } </style> <script> $(function() { $( "#accordion" ) .accordion({ header: "> div > h3" }) .sortable({ axis: "y", handle: "h3", stop: function( event, ui ) { // 当排序时，IE 不能注册 blur，所以触发 focusout 处理程序来移除 .ui-state-focus ui.item.children( "h3" ).triggerHandler( "focusout" ); } }); }); </script></head><body> <div id="accordion"> <div class="group"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> </div> <div class="group"> <h3>部分 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> </div> <div class="group"> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <div class="group"> <h3>部分 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div></div> </body></html>jQuery UI的自动完成（Autocomplete）是根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
如需了解更多有关autocomplete部件的细节，请查看API文档自动完成部件（Autocomplete Widget）。
当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入"ja"尝试一下，可以得到Java或 JavaScript。
数据源是一个简单的JavaScript数组，使用source选项提供给部件。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"></div> </body></html>autocomplete域使用自定义的source选项来匹配带有重音字符的结果项，即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符，则不会显示非重音的结果项。
尝试键入"Jo"，会看到"John"和"Jörn"，然后键入"Jö"，只会看到"Jörn"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 包含重音</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á": "a", "ö": "o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "#developer" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); }); </script></head><body> <div class="ui-widget"> <form> <label for="developer">开发人员：</label> <input id="developer"> </form></div> </body></html>分类的搜索结果。尝试键入"a"或"n"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 分类</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } </style> <script> $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); </script> <script> $(function() { var data = [ { label: "anders", category: "" }, { label: "andreas", category: "" }, { label: "antal", category: "" }, { label: "annhhx10", category: "Products" }, { label: "annk K12", category: "Products" }, { label: "annttop C13", category: "Products" }, { label: "anders andersson", category: "People" }, { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; $( "#search" ).catcomplete({ delay: 0, source: data }); }); </script></head><body> <label for="search">搜索：</label><input id="search"> </body></html>一个由Autocomplete和Button创建的自定义部件。您可以键入一些字符，来获得基于您的输入过滤的结果，或者使用按钮从完整列表中选择。
该输入是从一个已有的select元素中读取，传递给带有自定义的source选项的Autocomplete。
这是一个不被支持的不完美的部件。这里纯粹是为了演示autocomplete定制功能。如需了解更多有关该部件工作原理的细节，请点击这里查看相关的jQuery文章。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 组合框（Combobox）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; /* 支持： IE7 */ *height: 1.7em; *top: 0.1em; } .custom-combobox-input { margin: 0; padding: 0.3em; } </style> <script> (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : ""; this.input = $( "<input>" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" ) .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .click(function() { input.focus(); // 如果已经可见则关闭 if ( wasOpen ) { return; } // 传递空字符串作为搜索的值，显示所有的结果 input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( event, ui ) { // 选择一项，不执行其他动作 if ( ui.item ) { return; } // 搜索一个匹配（不区分大小写） var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // 找到一个匹配，不执行其他动作 if ( valid ) { return; } // 移除无效的值 this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.data( "ui-autocomplete" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); </script></head><body> <div class="ui-widget"> <label>您喜欢的编程语言：</label> <select id="combobox"> <option value="">请选择...</option> <option value="ActionScript">ActionScript</option> <option value="AppleScript">AppleScript</option> <option value="Asp">Asp</option> <option value="BASIC">BASIC</option> <option value="C">C</option> <option value="C++">C++</option> <option value="Clojure">Clojure</option> <option value="COBOL">COBOL</option> <option value="ColdFusion">ColdFusion</option> <option value="Erlang">Erlang</option> <option value="Fortran">Fortran</option> <option value="Groovy">Groovy</option> <option value="Haskell">Haskell</option> <option value="Java">Java</option> <option value="JavaScript">JavaScript</option> <option value="Lisp">Lisp</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Python">Python</option> <option value="Ruby">Ruby</option> <option value="Scala">Scala</option> <option value="Scheme">Scheme</option> </select></div><button id="toggle">显示基础的选择框</button> </body></html>您可以使用自定义数据格式，并通过简单地重载默认的聚焦和选择行为来显示数据。
尝试键入"j"，或者按向下箭头按键，即可得到一个项目列表。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } </style> <script> $(function() { var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script></head><body> <div id="project-label">选择一个项目（请键入 "j"）：</div><img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""><input id="project"><input type="hidden" id="project-id"><p id="project-description"></p> </body></html>用法：键入一些字符，比如"j"，可以看到相关的编程语言结果。选择一个值，然后继续键入字符来添加其他的值。
本实例演示如何使用source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 多个值</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // 当选择一个条目时不离开文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // 回到 autocomplete，但是提取最后的条目 response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // 防止在获得焦点时插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除当前输入 terms.pop(); // 添加被选项 terms.push( ui.item.value ); // 添加占位符，在结尾添加逗号+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script></head><body> <div class="ui-widget"> <label for="tags">编程语言：</label> <input id="tags" size="50"></div> </body></html>用法：键入至少两个字符来获取鸟的名称。选择一个值，然后继续键入字符来添加其他的值。
本实例演示如何使用source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 多个值，远程</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function split( val ) { return val.split( /,s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // 当选择一个条目时不离开文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // 自定义最小长度 var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { // 防止在获得焦点时插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除当前输入 terms.pop(); // 添加被选项 terms.push( ui.item.value ); // 添加占位符，在结尾添加逗号+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">鸟：</label> <input id="birds" size="50"></div> </body></html>当您在文本域中键入字符时，Autocomplete部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关城市的名称。
在本实例中，数据源是geonames.org webservice。虽然选择一个元素后文本域中是该城市名称，但是会显示更多的信息以便找到正确的条目。数据也可以回调，显示在下面的结果框中。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 远程 JSONP 数据源</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #city { width: 25em; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function( data ) { response( $.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); }, minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script></head><body> <div class="ui-widget"> <label for="city">您的城市：</label> <input id="city"> Powered by <a href="http://geonames.org" rel="external nofollow" target="_blank" target="_blank">geonames.org</a></div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 结果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div> </body></html>当您在文本域中键入字符时，Autocomplete部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。
在本实例中，数据源是可返回JSON数据的服务器端脚本，通过一个简单的source选项来指定。另外，minLength选项设置为2，避免查询返回太多的结果，select事件用于显示一些反馈。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 远程数据源</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">鸟：</label> <input id="birds"></div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 结果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div> </body></html>当您在文本域中键入字符时，Autocomplete部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。
为了提高性能，这里添加了一些本地缓存，其他与远程数据源实例相似。在这里，缓存只保存了一个查询，并可以扩展到缓存多个值，每个条目一个值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 远程缓存</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { var cache = {}; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; } $.getJSON( "search.php", request, function( data, status, xhr ) { cache[ term ] = data; response( data ); }); } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">鸟：</label> <input id="birds"></div> </body></html>当显示一个长列表的选项时，您可以简单地为autocomplete菜单设置max-height来防止菜单显示太长。尝试键入"a"或"s"来获得一个可滚动的长列表的结果。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 可滚动的结果</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete { max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow-x: hidden; } /* IE 6 不支持 max-height * 我们使用 height 代替，但是这会强制菜单总是显示为那个高度 */ * html .ui-autocomplete { height: 100px; } </style> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"></div> </body></html>本实例演示如何获取一些XML数据，并使用jQuery的方法解析它，然后把它提供给autocomplete作为数据源。
本实例也可作为解析远程XML数据源的参考 - 解析在每次source回调请求时发生。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - XML 数据</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div/>" ).text( message ).prependTo( "#log" ); $( "#log" ).attr( "scrollTop", 0 ); } $.ajax({ url: "london.xml", dataType: "xml", success: function( xmlResponse ) { var data = $( "geoname", xmlResponse ).map(function() { return { value: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), id: $( "geonameId", this ).text() }; }).get(); $( "#birds" ).autocomplete({ source: data, minLength: 0, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : "Nothing selected, input was " + this.value ); } }); } }); }); </script></head><body> <div class="ui-widget"> <label for="birds">London 匹配：</label> <input id="birds"></div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 结果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div></div> </body></html>jQuery UI使用带有适当的悬停（hover）和激活（active）的样式的可主题化按钮（Button）来加强标准表单元素（比如按钮、输入框、锚）的功能。
在本教程的API文档按钮部件（Button Widget）部分，介绍了更多与button部件相关的细节。
可用于按钮的标记实例：一个button元素，一个类型为submit的input元素和一个锚。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "input[type=submit], a, button" ) .button() .click(function( event ) { event.preventDefault(); }); }); </script></head><body> <button>一个 button 元素</button> <input type="submit" value="一个提交按钮"> <a href="#">一个锚</a> </body></html>通过button部件把复选框显示为切换按钮样式。与复选框相关的label元素作为按钮文本。
本实例通过在一个公共的容器上调用.buttonset()，演示了三个显示为按钮样式的复选框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 复选框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#check" ).button(); $( "#format" ).buttonset(); }); </script> <style> #format { margin-top: 2em; } </style></head><body> <input type="checkbox" id="check"><label for="check">切换</label> <div id="format"> <input type="checkbox" id="check1"><label for="check1">B</label> <input type="checkbox" id="check2"><label for="check2">I</label> <input type="checkbox" id="check3"><label for="check3">U</label></div> </body></html>一些带有文本和图标的各种组合的按钮：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 图标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" }, text: false }).next().button({ icons: { primary: "ui-icon-locked" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script></head><body> <button>只带有图标的按钮</button><button>图标在左侧的按钮</button><button>带有两个图标的按钮</button><button>带有两个图标且不带文本的按钮</button> </body></html>三个单选按钮转变为一套按钮。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 单选</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#radio" ).buttonset(); }); </script></head><body> <form> <div id="radio"> <input type="radio" id="radio1" name="radio"><label for="radio1">选择 1</label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">选择 2</label> <input type="radio" id="radio3" name="radio"><label for="radio3">选择 3</label> </div></form> </body></html><!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 分割按钮</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-menu { position: absolute; width: 100px; } </style> <script> $(function() { $( "#rerun" ) .button() .click(function() { alert( "Running the last action" ); }) .next() .button({ text: false, icons: { primary: "ui-icon-triangle-1-s" } }) .click(function() { var menu = $( this ).parent().next().show().position({ my: "left top", at: "left bottom", of: this }); $( document ).one( "click", function() { menu.hide(); }); return false; }) .parent() .buttonset() .next() .hide() .menu(); }); </script></head><body> <div> <div> <button id="rerun">运行最后的动作</button> <button id="select">选择一个动作</button> </div> <ul> <li><a href="#">打开...</a></li> <li><a href="#">保存</a></li> <li><a href="#">删除</a></li> </ul></div> </body></html>一个多媒体播放器的工具栏。请看基础的标记：一些button元素，Shuffle按钮是一个类型为checkbox的input，Repeat选项是三个类型为radio的input。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 按钮（Button） - 工具栏</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #toolbar { padding: 4px; display: inline-block; } /* support: IE7 */ *+html #toolbar { display: inline; } </style> <script> $(function() { $( "#beginning" ).button({ text: false, icons: { primary: "ui-icon-seek-start" } }); $( "#rewind" ).button({ text: false, icons: { primary: "ui-icon-seek-prev" } }); $( "#play" ).button({ text: false, icons: { primary: "ui-icon-play" } }) .click(function() { var options; if ( $( this ).text() === "play" ) { options = { label: "pause", icons: { primary: "ui-icon-pause" } }; } else { options = { label: "play", icons: { primary: "ui-icon-play" } }; } $( this ).button( "option", options ); }); $( "#stop" ).button({ text: false, icons: { primary: "ui-icon-stop" } }) .click(function() { $( "#play" ).button( "option", { label: "play", icons: { primary: "ui-icon-play" } }); }); $( "#forward" ).button({ text: false, icons: { primary: "ui-icon-seek-next" } }); $( "#end" ).button({ text: false, icons: { primary: "ui-icon-seek-end" } }); $( "#shuffle" ).button(); $( "#repeat" ).buttonset(); }); </script></head><body> <div id="toolbar" class="ui-widget-header ui-corner-all"> <button id="beginning">开头</button> <button id="rewind">快退</button> <button id="play">播放</button> <button id="stop">停止</button> <button id="forward">快进</button> <button id="end">结尾</button> <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label> <span id="repeat"> <input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label> <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label> <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label> </span></div> </body></html>jQuery UI日期选择器（Datepicker）可以从弹出框或内联日历选择一个日期。
本教程的API文档日期选择器部件（Datepicker Widget）中介绍了更多关于datepicker部件的细节。
日期选择器（Datepicker）绑定到一个标准的表单input字段上。把焦点移到input上（点击或者使用tab键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上的任意地方（输入框即失去焦点），或者点击Esc键来关闭。如果选择了一个日期，则反馈显示为input的值。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>当打开或关闭datepicker时使用不同的动画。从下拉框中选择一个动画，然后在输入框中点击来查看它的效果。您可以使用三个标准动画中任意一个，或者使用UI特效中的任意一个。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); $( "#anim" ).change(function() { $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); }); }); </script></head><body><p>日期：<input type="text" id="datepicker" size="30"></p><p>动画：<br> <select id="anim"> <option value="show">Show (默认)</option> <option value="slideDown">滑下</option> <option value="fadeIn">淡入</option> <option value="blind">Blind (UI 百叶窗特效)</option> <option value="bounce">Bounce (UI 反弹特效)</option> <option value="clip">Clip (UI 剪辑特效)</option> <option value="drop">Drop (UI 降落特效)</option> <option value="fold">Fold (UI 折叠特效)</option> <option value="slide">Slide (UI 滑动特效)</option> <option value="">无</option> </select></p></body></html>datepicker可以显示其他月份的日期，这些日期也可以设置成可选择的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showOtherMonths: true, selectOtherMonths: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>通过布尔值的showButtonPanel选项为选择当天日期显示一个"Today"按钮，为关闭日历显示一个"Done"按钮。默认情况下，当按钮栏显示时会启用每个按钮，但是按钮可通过其他的选项进行关闭。按钮文本可自定义。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示按钮栏</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showButtonPanel: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>datepicker是嵌套在页面中显示，而不是显示在一个覆盖层中。只需要简单地在div上调用.datepicker()即可，而不是在input上调用。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 内联显示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); }); </script></head><body> 日期：<div id="datepicker"></div> </body></html>显示月份和年份的下拉框，而不是显示静态的月份/年份标题，这样便于在大范围的时间跨度上导航。添加布尔值changeMonth和changeYear选项即可。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示月份 & 年份菜单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>设置numberOfMonths选项为一个整数2，或者大于2的整数，来在一个datepicker中显示多个月份。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示多个月份</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>以各种方式显示日期反馈。从下拉框中选择一种日期格式，然后在输入框中点击并选择一个日期，查看所选格式的日期显示。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 格式化日期</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker(); $( "#format" ).change(function() { $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); }); }); </script></head><body> <p>日期：<input type="text" id="datepicker" size="30"></p> <p>格式选项：<br> <select id="format"> <option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="d M, y">Short - d M, y</option> <option value="d MM, y">Medium - d MM, y</option> <option value="DD, d MM, yy">Full - DD, d MM, yy</option> <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option> </select></p> </body></html>点击输入框旁边的图标来显示datepicker。设置datepicker在获得焦点时打开（默认行为），或者在点击图标时打开，或者在获得焦点/点击图标时打开。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 图标触发器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>本地化datepicker日历语言和格式（默认为English/Western格式）。datepicker包含对从右到左读取的语言的内建支持，比如Arabic和Hebrew。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 本地化日历</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js" rel="external nofollow" ></script> <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); $( "#locale" ).change(function() { $( "#datepicker" ).datepicker( "option", $.datepicker.regional[ $( this ).val() ] ); }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"> <select id="locale"> <option value="ar">Arabic ((العربية</option> <option value="zh-TW">Chinese Traditional (繁體中文)</option> <option value="">English</option> <option value="fr" selected="selected">French (Français)</option> <option value="he">Hebrew ((עברית</option> </select></p> </body></html>使用altField和altFormat选项，无论何时选择日期，会在另一个输入框中填充带有一定格式的日期。这个功能通过对电脑友好性的日期进一步加工后，向用户呈现一个用户友好性的日期。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 填充另一个输入框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ altField: "#alternate", altFormat: "DD, d MM, yy" }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p> </body></html>通过minDate和maxDate选项限制可选择的日期范围。设置起止日期为实际的日期（new Date(2009, 1 - 1, 26)），或者为与今天的一个数值偏移（-20），或者为一个周期和单位的字符串（'+1M +10D'）。如果设置为字符串，使用'D'表示天，使用'W'表示周，使用'M'表示月，使用'Y'表示年。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 限制日期范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>选择要搜索的日期范围。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 选择一个日期范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); }); </script></head><body> <label for="from">从</label><input type="text" id="from" name="from"><label for="to">到</label><input type="text" id="to" name="to"> </body></html>datepicker可以显示一年中的第几周。默认的计算是按照ISO 8601定义：每周从星期一开始，每年的第一周包含该年的第一个星期四。这就意味着一年中的一些天可能是属于另一年中的周。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 显示一年中的第几周</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#datepicker" ).datepicker({ showWeek: true, firstDay: 1 }); }); </script></head><body> <p>日期：<input type="text" id="datepicker"></p> </body></html>在一个交互覆盖层中打开内容。
如需了解更多有关dialog部件的细节，请查看API文档对话框部件（Dialog Widget）。
基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像select元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过'x'图标关闭。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog" ).dialog(); }); </script></head><body> <div id="dialog" title="基本的对话框"> <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p></div> </body></html>可以通过为show/hide属性指定一个特效来动画显示对话框。您必须为想使用的特效引用独立的特效文件。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script></head><body> <div id="dialog" title="Basic dialog"> <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p></div> <button id="opener">打开对话框</button> </body></html>模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 基本的模态</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); </script></head><body> <div id="dialog-modal" title="基本的模态对话框"> <p>添加模态覆盖屏幕，让对话框看起来更突出，因为它让页面上其他内容变暗。</p></div> <p>Sed vel diam id libero <a href="http://www.51coolma.cn">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body></html>确认一个动作可能是破坏性的也可能是有意义的。设置modal选项为true，并通过buttons选项来指定主要的和次要的用户动作。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 模态确认</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); </script></head><body> <div id="dialog-confirm" title="清空回收站吗？"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>这些项目将被永久删除，并且无法恢复。您确定吗？</p></div> <p>Sed vel diam id libero <a href="http://www.51coolma.cn">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body></html>使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入form标记，设置modal选项为true，并通过buttons选项来指定主要的和次要的用户动作。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 模态表单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } </style> <script> $(function() { var name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ), tips = $( ".validateTips" ); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "" + n + " 的长度必须在 " + min + " 和 " + max + " 之间。" ); return false; } else { return true; } } function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" ); updateTips( n ); return false; } else { return true; } } $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "创建一个帐户": function() { var bValid = true; allFields.removeClass( "ui-state-error" ); bValid = bValid && checkLength( name, "username", 3, 16 ); bValid = bValid && checkLength( email, "email", 6, 80 ); bValid = bValid && checkLength( password, "password", 5, 16 ); bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。" ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid = bValid && checkRegexp( email, /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i, "eg. ui@jquery.com" ); bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密码字段只允许： a-z 0-9" ); if ( bValid ) { $( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); $( this ).dialog( "close" ); } }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); }); }); </script></head><body> <div id="dialog-form" title="创建新用户"> <p class="validateTips">所有的表单字段都是必填的。</p> <form> <fieldset> <label for="name">名字</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"> <label for="email">邮箱</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"> <label for="password">密码</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"> </fieldset> </form></div> <div id="users-contain" class="ui-widget"> <h1>已有的用户：</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>名字</th> <th>邮箱</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>johndoe1</td> </tr> </tbody> </table></div><button id="create-user">创建新用户</button> </body></html>使用模态对话框来在下一步动作执行之前确认信息和动作。设置modal选项为true，并通过buttons选项来指定主要的动作（Ok）。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框（Dialog） - 模态消息</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); }); </script></head><body> <div id="dialog-message" title="下载完成"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 您的文件已经成功下载到文件夹中。 </p> <p> 当前使用存储空间的 <b>36%</b>。 </p></div> <p>Sed vel diam id libero <a href="http://www.51coolma.cn">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body></html>带有鼠标和键盘交互的用于导航的可主题化菜单。
如需了解更多有关menu部件的细节，请查看API文档菜单部件（Menu Widget）。
一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 菜单（Menu） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body> <ul id="menu"> <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> <li><a href="#">Addyston</a></li> <li> <a href="#">Delphi</a> <ul> <li class="ui-state-disabled"><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li><a href="#">Saarland</a></li> <li> <a href="#">Salzburg</a> <ul> <li> <a href="#">Delphi</a> <ul> <li><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li> <a href="#">Delphi</a> <ul> <li><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li><a href="#">Perch</a></li> </ul> </li> <li class="ui-state-disabled"><a href="#">Amesville</a></li></ul> </body></html>一个带有默认配置的菜单，显示如何使用带有图标的菜单。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 菜单（Menu） - 图标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body> <ul id="menu"> <li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li> <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li> <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>缩小</a></li> <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>打印...</a></li> <li> <a href="#">播放</a> <ul> <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>上一个</a></li> <li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li> <li><a href="#"><span class="ui-icon ui-icon-play"></span>播放</a></li> <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>下一个</a></li> </ul> </li></ul> </body></html>jQuery UI进度条（Progressbar）可以显示一个确定的或不确定的进程状态。
如需了解更多有关progressbar部件的细节，请查看API文档进度条部件（Progressbar Widget）。
默认的确定的进度条。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); </script></head><body> <div id="progressbar"></div> </body></html>自定义更新的标签。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 自定义标签</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } </style> <script> $(function() { var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" ); progressbar.progressbar({ value: false, change: function() { progressLabel.text( progressbar.progressbar( "value" ) + "%" ); }, complete: function() { progressLabel.text( "完成！" ); } }); function progress() { var val = progressbar.progressbar( "value" ) || 0; progressbar.progressbar( "value", val + 1 ); if ( val < 99 ) { setTimeout( progress, 100 ); } } setTimeout( progress, 3000 ); }); </script></head><body> <div id="progressbar"><div class="progress-label">加载...</div></div> </body></html>不确定的进度条，并可在确定和不确定的样式之间切换。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar） - 不确定的值</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#progressbar" ).progressbar({ value: false }); $( "button" ).on( "click", function( event ) { var target = $( event.target ), progressbar = $( "#progressbar" ), progressbarValue = progressbar.find( ".ui-progressbar-value" ); if ( target.is( "#numButton" ) ) { progressbar.progressbar( "option", { value: Math.floor( Math.random() * 100 ) }); } else if ( target.is( "#colorButton" ) ) { progressbarValue.css({ "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 ) }); } else if ( target.is( "#falseButton" ) ) { progressbar.progressbar( "option", "value", false ); } }); }); </script> <style> #progressbar .ui-progressbar-value { background-color: #ccc; } </style></head><body> <div id="progressbar"></div><button id="numButton">随机值 - 确定</button><button id="falseButton">不确定</button><button id="colorButton">随机颜色</button> </body></html>拖动手柄来选择一个数值。
如需了解更多有关slider部件的细节，请查看API文档滑块部件（Slider Widget）。
基本的滑块是水平的，有一个单一的手柄，可以用鼠标或箭头键进行移动。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider" ).slider(); }); </script></head><body> <div id="slider"></div> </body></html>组合了三个滑块，来创建一个简单的RGB颜色选择器。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 颜色选择器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } </style> <script> function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#swatch" ).css( "background-color", "#" + hex ); } $(function() { $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 255 ); $( "#green" ).slider( "value", 140 ); $( "#blue" ).slider( "value", 60 ); }); </script></head><body class="ui-widget-content" style="border:0;"> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 简单的颜色选择器</p> <div id="red"></div><div id="green"></div><div id="blue"></div> <div id="swatch" class="ui-widget-content ui-corner-all"></div> </body></html>组合水平的和垂直的滑块，每个都带有各自的选项，来创建一个音乐播放器的UI。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 多个滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #eq span { height:120px; float:left; margin:15px } </style> <script> $(function() { // 设置主音量 $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // 设置图形均衡器 $( "#eq > span" ).each(function() { // 从标记读取初始值并删除 var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); }); </script></head><body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> 主音量</p> <div id="master" style="width:260px; margin:15px;"></div> <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> 图形均衡器</p> <div id="eq"> <span>88</span> <span>77</span> <span>55</span> <span>33</span> <span>40</span> <span>45</span> <span>70</span></div> </body></html>将range选项设置为true，来获取带有两个拖拽手柄的值的范围。手柄之间的控件用不同的背景颜色填充来表示该区间的值是可选择的。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 范围滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script></head><body> <p> <label for="amount">价格范围：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-range"></div> </body></html>固定范围滑块的最大值，用户只能选择最小值。设置range选项为"max"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 带有固定最大值的范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range-max" ).slider({ range: "max", min: 1, max: 10, value: 2, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">最小的房间数量：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p><div id="slider-range-max"></div> </body></html>固定范围滑块的最小值，用户只能选择最大值。将range选项设置为"min"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 带有固定最小值的范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 700, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">最大价格：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-range-min"></div> </body></html>如何绑定一个滑块到一个已有的select元素。选择保持可见以便显示变化。当选择改变时，同时更新滑块。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 绑定到 select 的滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var select = $( "#minbeds" ); var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); }); }); </script></head><body> <form id="reservation"> <label for="minbeds">最小的床位数</label> <select name="minbeds" id="minbeds"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select></form> </body></html>使用滑块来操作页面上内容的定位。本实例中，它是一个能获取值的滚动条。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 滑块滚动条</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } </style> <script> $(function() { //滚动面板部分 var scrollPane = $( ".scroll-pane" ), scrollContent = $( ".scroll-content" ); //创建滑块 var scrollbar = $( ".scroll-bar" ).slider({ slide: function( event, ui ) { if ( scrollContent.width() > scrollPane.width() ) { scrollContent.css( "margin-left", Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) ) + "px" ); } else { scrollContent.css( "margin-left", 0 ); } } }); //追加要处理的图标 var handleHelper = scrollbar.find( ".ui-slider-handle" ) .mousedown(function() { scrollbar.width( handleHelper.width() ); }) .mouseup(function() { scrollbar.width( "100%" ); }) .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); //由于滑块手柄滚动，改变要隐藏的溢出部分 scrollPane.css( "overflow", "hidden" ); //根据要滚动距离按比例定义滚动条和手柄的尺寸 function sizeScrollbar() { var remainder = scrollContent.width() - scrollPane.width(); var proportion = remainder / scrollContent.width(); var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); scrollbar.find( ".ui-slider-handle" ).css({ width: handleSize, "margin-left": -handleSize / 2 }); handleHelper.width( "" ).width( scrollbar.width() - handleSize ); } //基于滚动内容位置，重置滑块的值 function resetValue() { var remainder = scrollPane.width() - scrollContent.width(); var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : parseInt( scrollContent.css( "margin-left" ) ); var percentage = Math.round( leftVal / remainder * 100 ); scrollbar.slider( "value", percentage ); } //如果滑块是 100%，且窗口变大，则显示内容 function reflowContent() { var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); var gap = scrollPane.width() - showing; if ( gap > 0 ) { scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); } } //当缩放窗口时改变手柄的位置 $( window ).resize(function() { resetValue(); sizeScrollbar(); reflowContent(); }); //初始化滚动条大小 setTimeout( sizeScrollbar, 10 );//safari 超时 }); </script></head><body> <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header">1</div> <div class="scroll-content-item ui-widget-header">2</div> <div class="scroll-content-item ui-widget-header">3</div> <div class="scroll-content-item ui-widget-header">4</div> <div class="scroll-content-item ui-widget-header">5</div> <div class="scroll-content-item ui-widget-header">6</div> <div class="scroll-content-item ui-widget-header">7</div> <div class="scroll-content-item ui-widget-header">8</div> <div class="scroll-content-item ui-widget-header">9</div> <div class="scroll-content-item ui-widget-header">10</div> <div class="scroll-content-item ui-widget-header">11</div> <div class="scroll-content-item ui-widget-header">12</div> <div class="scroll-content-item ui-widget-header">13</div> <div class="scroll-content-item ui-widget-header">14</div> <div class="scroll-content-item ui-widget-header">15</div> <div class="scroll-content-item ui-widget-header">16</div> <div class="scroll-content-item ui-widget-header">17</div> <div class="scroll-content-item ui-widget-header">18</div> <div class="scroll-content-item ui-widget-header">19</div> <div class="scroll-content-item ui-widget-header">20</div> </div> <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <div class="scroll-bar"></div> </div></div> </body></html>通过把step选项设置为一个整数来设置滑块值的增量，通常是滑块最大值的除数。默认增量是1。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 对齐增量</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider" ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">捐款金额（$50 增量）：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider"></div> </body></html>改变范围滑块的方向为垂直的。通过.height()分配一个高度值，或通过CSS设置高度，同时设置orientation选项为"vertical"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 垂直的范围滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-range" ).slider({ orientation: "vertical", range: true, values: [ 17, 67 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script></head><body> <p> <label for="amount">销售目标（百万）：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-range" style="height:250px;"></div> </body></html>改变滑块的方向为垂直的。通过.height()分配一个高度值，或通过CSS设置高度，同时设置orientation选项为"vertical"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 滑块（Slider） - 垂直的滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) ); }); </script></head><body> <p> <label for="amount">体积：</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"></p> <div id="slider-vertical" style="height:200px;"></div> </body></html>通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。
如需了解更多有关spinner部件的细节，请查看API文档旋转器部件（Spinner Widget）。
默认的旋转器。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var spinner = $( "#spinner" ).spinner(); $( "#disable" ).click(function() { if ( spinner.spinner( "option", "disabled" ) ) { spinner.spinner( "enable" ); } else { spinner.spinner( "disable" ); } }); $( "#destroy" ).click(function() { if ( spinner.data( "ui-spinner" ) ) { spinner.spinner( "destroy" ); } else { spinner.spinner(); } }); $( "#getvalue" ).click(function() { alert( spinner.spinner( "value" ) ); }); $( "#setvalue" ).click(function() { spinner.spinner( "value", 5 ); }); $( "button" ).button(); }); </script></head><body> <p> <label for="spinner">选择一个值：</label> <input id="spinner" name="value"></p> <p> <button id="disable">切换禁用/启用</button> <button id="destroy">切换部件</button></p> <p> <button id="getvalue">获取值</button> <button id="setvalue">设置值为 5</button></p> </body></html>本实例是一个捐款表格，带有货币选择和数量旋转器。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 货币</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#currency" ).change(function() { $( "#spinner" ).spinner( "option", "culture", $( this ).val() ); }); $( "#spinner" ).spinner({ min: 5, max: 2500, step: 25, start: 1000, numberFormat: "C" }); }); </script></head><body> <p> <label for="currency">要捐款的货币</label> <select id="currency" name="currency"> <option value="en-US">US {#content}lt;/option> <option value="de-DE">EUR €</option> <option value="ja-JP">YEN ¥</option> </select></p><p> <label for="spinner">要捐款的数量：</label> <input id="spinner" name="spinner" value="5"></p></body></html>本实例是一个小数旋转器。增量设置为0.01。处理文化变化的代码会读取当前的选择器的值，当改变文化时，会基于新的文化重新设置值的样式。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 小数</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#spinner" ).spinner({ step: 0.01, numberFormat: "n" }); $( "#culture" ).change(function() { var current = $( "#spinner" ).spinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner" ).spinner( "value", current ); }); }); </script></head><body> <p> <label for="spinner">小数旋转器：</label> <input id="spinner" name="spinner" value="5.06"></p><p> <label for="culture">选择一种用于格式化的文化：</label> <select id="culture"> <option value="en-EN" selected="selected">English</option> <option value="de-DE">German</option> <option value="ja-JP">Japanese</option> </select></p></body></html>谷歌地图集成，使用旋转器来改变纬度和经度。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 地图</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="http://maps.google.com/maps/api/js?sensor=false" rel="external nofollow" ></script> <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { function latlong() { return new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); } function position() { map.setCenter( latlong() ); } $( "#lat, #lng" ).spinner({ step: .001, change: position, stop: position }); var map = new google.maps.Map( $("#map")[0], { zoom: 8, center: latlong(), mapTypeId: google.maps.MapTypeId.ROADMAP }); }); </script> <style> #map { width:500px; height:500px; } </style></head><body> <label for="lat">纬度</label><input id="lat" name="lat" value="44.797"><br><label for="lng">经度</label><input id="lng" name="lng" value="-93.278"> <div id="map"></div></body></html>溢出旋转器限制范围从-10到10。对于10以上的值，会溢出到-10，反之亦然。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 溢出</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#spinner" ).spinner({ spin: function( event, ui ) { if ( ui.value > 10 ) { $( this ).spinner( "value", -10 ); return false; } else if ( ui.value < -10 ) { $( this ).spinner( "value", 10 ); return false; } } }); }); </script></head><body> <p> <label for="spinner">选择一个值：</label> <input id="spinner" name="value"></p></body></html>一个扩展自旋转器的自定义部件。使用 全球化（Globalization）插件来解析和输出时间戳，带有自定义的step和page选项。向上/向下光标用于分钟的递增/递减，向上/向下翻页用于小时的递增/递减。
<!doctype html><html><head> <meta charset="utf-8"> <title>jQuery UI 旋转器（Spinner） - 时间</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script> <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $.widget( "ui.timespinner", $.ui.spinner, { options: { // 秒 step: 60 * 1000, // 小时 page: 60 }, _parse: function( value ) { if ( typeof value === "string" ) { // 已经是一个时间戳 if ( Number( value ) == value ) { return Number( value ); } return +Globalize.parseDate( value ); } return value; }, _format: function( value ) { return Globalize.format( new Date(value), "t" ); } }); $(function() { $( "#spinner" ).timespinner(); $( "#culture" ).change(function() { var current = $( "#spinner" ).timespinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner" ).timespinner( "value", current ); }); }); </script></head><body> <p> <label for="spinner">时间旋转器：</label> <input id="spinner" name="spinner" value="08:30 PM"></p><p> <label for="culture">选择一种用于格式化的文化：</label> <select id="culture"> <option value="en-EN" selected="selected">English</option> <option value="de-DE">German</option> </select></p></body></html>一种多面板的单内容区，每个面板与列表中的标题相关。
如需了解更多有关tabs部件的细节，请查看API文档标签页部件（Tabs Widget）。
点击标签页，切换被划分为不同逻辑部分的内容。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs(); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>点击选中的标签页来切换内容的关闭/打开状态。为了启用这个功能，需要设置collapsible选项为true。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 折叠内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs({ collapsible: true }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p><strong>再次点击标签页来关闭内容面板。</strong></p> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p><strong>再次点击标签页来关闭内容面板。</strong></p> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p><strong>再次点击标签页来关闭内容面板。</strong></p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>在标签页链接中设置href的值来为标签页通过Ajax获取外部的内容。当Ajax请求在等待响应时，标签页的标签变为"Loading..."，当加载完成后返回常规的标签。
标签3和4演示了慢加载和损坏的AJAX标签，以及如何处理这些情况下的服务器端的错误。请注意，这两个都要求web服务器能解释PHP。它们在文件系统以外无法工作。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 通过 Ajax 获取内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs({ beforeLoad: function( event, ui ) { ui.jqXHR.error(function() { ui.panel.html( "不能加载该标签页。如果这不是一个演示。" + "我们会尽快修复这个问题。" ); }); } }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">预加载</a></li> <li><a href="ajax/content1.html">标签 1</a></li> <li><a href="ajax/content2.html">标签 2</a></li> <li><a href="ajax/content3-slow.php">标签 3 （慢的）</a></li> <li><a href="ajax/content4-broken.php">标签 4 （损坏的）</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div></div> </body></html>通过event选项设置当鼠标悬停时切换各部分的打开/关闭状态。event的默认值是"click"。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 当鼠标悬停时打开</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs({ event: "mouseover" }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>简单的标签页添加和移除。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 简单的操作</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #dialog label, #dialog input { display:block; } #dialog label { margin-top: 0.5em; } #dialog input, #dialog textarea { width: 95%; } #tabs { margin-top: 1em; } #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } #add_tab { cursor: pointer; } </style> <script> $(function() { var tabTitle = $( "#tab_title" ), tabContent = $( "#tab_content" ), tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", tabCounter = 2; var tabs = $( "#tabs" ).tabs(); // 模态对话框的初始化：自定义按钮和一个重置内部表单的 "close" 回调 var dialog = $( "#dialog" ).dialog({ autoOpen: false, modal: true, buttons: { Add: function() { addTab(); $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { form[ 0 ].reset(); } }); // addTab 表单：当提交时调用 addTab 函数，并关闭对话框 var form = dialog.find( "form" ).submit(function( event ) { addTab(); dialog.dialog( "close" ); event.preventDefault(); }); // 实际的 addTab 函数：使用上面表单的输入添加新的标签页 function addTab() { var label = tabTitle.val() || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $( tabTemplate.replace( /#{href}/g, "#" + id ).replace( /#{label}/g, label ) ), tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" ); tabs.tabs( "refresh" ); tabCounter++; } // addTab 按钮：值打开对话框 $( "#add_tab" ) .button() .click(function() { dialog.dialog( "open" ); }); // 关闭图标：当点击时移除标签页 tabs.delegate( "span.ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); tabs.bind( "keyup", function( event ) { if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) { var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); } }); }); </script></head><body> <div id="dialog" title="Tab data"> <form> <fieldset class="ui-helper-reset"> <label for="tab_title">标题</label> <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all"> <label for="tab_content">内容</label> <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> </fieldset> </form></div> <button id="add_tab">添加标签页</button> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">移除标签页</span></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div></div> </body></html>拖拽上面的标签页来对它们进行重新排序。
只需要简单地调用.ui-tabs-nav元素上的.sortable()，即可让标签页可排序。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 排序（Sortable）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { var tabs = $( "#tabs" ).tabs(); tabs.find( ".ui-tabs-nav" ).sortable({ axis: "x", stop: function() { tabs.tabs( "refresh" ); } }); }); </script></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>通过一些额外的CSS（用于定位的）和JS（在元素上放置正确的class），标签页皆可放置在内容的底部。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 底部标签页</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs(); // 修改 class $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ) .removeClass( "ui-corner-all ui-corner-top" ) .addClass( "ui-corner-bottom" ); // 移动导航到底部 $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" ); }); </script> <style> /* 强制一个高度，这样标签页就不会随着内容高度的改变而改变 */ #tabs .tabs-spacer { float: left; height: 200px; } .tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; } .tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; } .tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; } </style></head><body> <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div class="tabs-spacer"></div> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>点击标签页，切换被划分为不同逻辑部分的内容。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 标签页（Tabs） - 垂直的标签页</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" ); $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" ); }); </script> <style> .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style></head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <h2>内容标题 1</h2> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <h2>内容标题 2</h2> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <h2>内容标题 3</h2> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div> </body></html>jQuery UI可自定义的、可主题化的工具提示框，替代原生的工具提示框。
如需了解更多有关tooltip部件的细节，请查看API文档工具提示框部件（Tooltip Widget）。
悬停在链接上，或者使用tab键循环切换聚焦在每个元素上。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( document ).tooltip(); }); </script> <style> label { display: inline-block; width: 5em; } </style></head><body> <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>悬停在链接上，或者使用tab键循环切换聚焦在每个元素上。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义样式</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); </script> <style> .ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; } </style></head><body> <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>本实例演示了如何使用show和hide选项来自定义动画，也可以使用open事件来自定义动画。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义动画</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script> $(function() { $( "#show-option" ).tooltip({ show: { effect: "slideDown", delay: 250 } }); $( "#hide-option" ).tooltip({ hide: { effect: "explode", delay: 250 } }); $( "#open-event" ).tooltip({ show: null, position: { my: "left top", at: "left bottom" }, open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); } }); }); </script></head><body> <p>这里有多种方式自定义工具提示框的动画。</p><p>您可以使用 <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" rel="external nofollow" target="_blank" title="向下滑动显示">show</a> 和<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" rel="external nofollow" target="_blank" title="爆炸隐藏">hide</a> 选项。</p><p>您也可以使用 <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" rel="external nofollow" target="_blank" title="向下移动显示">open</a> 事件。</p> </body></html>该示例演示如何通过自定义items和content选项，来组合不同的事件委托工具提示框到一个单一的实例中。
您可能需要与地图工具提示框进行交互，这是未来版本中的一个待实现的功能。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .photo { width: 300px; text-align: center; } .photo .ui-widget-header { margin: 1em 0; } .map { width: 350px; height: 350px; } .ui-tooltip { max-width: 350px; } </style> <script> $(function() { $( document ).tooltip({ items: "img, [data-geo], [title]", content: function() { var element = $( this ); if ( element.is( "[data-geo]" ) ) { var text = element.text(); return "<img class='map' alt='" + text + "' src='http://maps.google.com/maps/api/staticmap?" + "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + text + "'>"; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); } if ( element.is( "img" ) ) { return element.attr( "alt" ); } } }); }); </script></head><body> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>圣史蒂芬大教堂（St. Stephen's Cathedral）</h2> <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" rel="external nofollow" target="_blank" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG" rel="external nofollow" target="_blank" > <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen's Cathedral）" class="ui-corner-all"> </a></div> <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>塔桥（Tower Bridge）</h2> <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" rel="external nofollow" target="_blank" data-geo="">英国伦敦（London, England）</a></h3> </div> <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg" rel="external nofollow" target="_blank" > <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/tower-bridge.jpg" alt="塔桥（Tower Bridge）" class="ui-corner-all"> </a></div> <p>所有的图片源自 <a href="http://commons.wikimedia.org/wiki/Main_Page" rel="external nofollow" target="_blank" >Wikimedia Commons</a>，且归 <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" rel="external nofollow" target="_blank" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版权持有人所有。</p> </body></html>使用下面的按钮来显示帮助文本，或者只需要让鼠标悬停在输入框上或者让输入框获得焦点，即可显示相应输入框的帮助文本。
在CSS中定义一个固定的宽度，让同时显示所有的帮助文本时看起来更一致。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 表单</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> label { display: inline-block; width: 5em; } fieldset div { margin-bottom: 2em; } fieldset .help { display: inline-block; } .ui-tooltip { width: 210px; } </style> <script> $(function() { var tooltips = $( "[title]" ).tooltip(); $( "<button>" ) .text( "Show help" ) .button() .click(function() { tooltips.tooltip( "open" ); }) .insertAfter( "form" ); }); </script></head><body> <form> <fieldset> <div> <label for="firstname">名字</label> <input id="firstname" name="firstname" title="请提供您的名字。"> </div> <div> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" title="请提供您的姓氏。"> </div> <div> <label for="address">地址</label> <input id="address" name="address" title="您的家庭或工作地址。"> </div> </fieldset></form> </body></html>本实例中的工具提示框是相对于鼠标进行定位的，当鼠标在元素上移动时，它会跟随鼠标移动。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 跟踪鼠标</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> label { display: inline-block; width: 5em; } </style> <script> $(function() { $( document ).tooltip({ track: true }); }); </script></head><body><p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p><p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p><p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p><p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p><p>悬停在相应的区域上查看工具提示框。</p> </body></html>一个虚拟的视频播放器，带有喜欢/分享/统计按钮，每个按钮都带有自定义样式的工具提示框。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 视频播放器</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; } .ui-tooltip { border: 1px solid white; background: rgba(20, 20, 20, 1); color: white; } .set { display: inline-block; } .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } </style> <script> $(function() { function notify( input ) { var msg = "已选择 " + $.trim( input.data( "tooltip-title" ) || input.text() ); $( "<div>" ) .appendTo( document.body ) .text( msg ) .addClass( "notification ui-state-default ui-corner-bottom" ) .position({ my: "center top", at: "center top", of: window }) .show({ effect: "blind" }) .delay( 1000 ) .hide({ effect: "blind", duration: "slow" }, function() { $( this ).remove(); }); } $( "button" ).each(function() { var button = $( this ).button({ icons: { primary: $( this ).data( "icon" ) }, text: !!$( this ).attr( "title" ) }); button.click(function() { notify( button ); }); }); $( ".set" ).buttonset({ items: "button" }); $( document ).tooltip({ position: { my: "center top", at: "center bottom+5", }, show: { duration: "fast" }, hide: { effect: "hide" } }); }); </script></head><body> <div class="player">这里是视频 (HTML5?)</div><div class="tools"> <span class="set"> <button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button> <button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button> </span> <div class="set"> <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button> <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button> </div> <button title="分享这个视频">分享</button> <button data-icon="ui-icon-alert">标记为不恰当</button></div> </body></html>jQuery UI特效（Effect）可以对一个元素添加动画特效。
如需了解更多有关.effect()方法的细节，请查看API文档.effect()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .effect() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // 运行特效 $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; // 回调函数 function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">特效（Effect）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fade">淡入淡出特效（Fade Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option> <option value="transfer">转移特效（Transfer Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>本实例使用HTML Canvas元素，绘制了jQuery UI提供的所有easings。点击每个图可查看该easing的行为。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - Easing 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> .graph { float: left; margin-left: 10px; } </style> <script> $(function() { if ( !$( "<canvas>" )[0].getContext ) { $( "<div>" ).text( "您的浏览器不支持 canvas，本演示需要在支持 canvas 的浏览器下进行。" ).appendTo( "#graphs" ); return; } var i = 0, width = 100, height = 100; $.each( $.easing, function( name, impl ) { var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; canvas.width = width; canvas.height = height; var drawHeight = height * 0.8, cradius = 10; ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; // 绘制背景 ctx.beginPath(); ctx.moveTo( cradius, 0 ); ctx.quadraticCurveTo( 0, 0, 0, cradius ); ctx.lineTo( 0, height - cradius ); ctx.quadraticCurveTo( 0, height, cradius, height ); ctx.lineTo( width - cradius, height ); ctx.quadraticCurveTo( width, height, width, height - cradius ); ctx.lineTo( width, 0 ); ctx.lineTo( cradius, 0 ); ctx.fill(); // 绘制底线 ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight + .5 ); ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); // 绘制顶线 ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); // 绘制 easing ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; ctx.moveTo( width * 0.1, drawHeight ); $.each( new Array( width ), function( position ) { var state = position / width, val = impl( state, position, 0, 1, width ); ctx.lineTo( position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7 ); }); ctx.stroke(); // 点击时动态改变 graph.click(function() { wrap .animate( { height: "hide" }, 2000, name ) .delay( 800 ) .animate( { height: "show" }, 2000, name ); }); graph.width( width ).height( height + text.height() + 10 ); }); }); </script></head><body> <div id="graphs"></div> </body></html>使用自定义效果来显示匹配的元素。
在本教程的API文档.show()中介绍了更多有关.show()方法的细节。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .show() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 100 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 280, height: 185 } }; } // 运行特效 $( "#effect" ).show( selectedEffect, options, 500, callback ); }; // 回调函数 function callback() { setTimeout(function() { $( "#effect:visible" ).removeAttr( "style" ).fadeOut(); }, 1000 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); $( "#effect" ).hide(); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">显示（Show）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>jQuery UI隐藏（Hide）通过使用自定义的效果来隐藏匹配的元素。
如需了解更多有关.hide()方法的细节，请查看API文档.hide()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .hide() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // 运行特效 $( "#effect" ).hide( selectedEffect, options, 1000, callback ); }; // 回调函数 function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">隐藏（Hide）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>使用自定义效果来显示或隐藏匹配的元素。
如需了解更多有关.toggle()方法的细节，请查看API文档.toggle()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .toggle() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; width: 240px; height: 135px; padding: 0.4em; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { // 运行当前选中的特效 function runEffect() { // 从中获取特效类型 var selectedEffect = $( "#effectTypes" ).val(); // 大多数的特效类型默认不需要传递选项 var options = {}; // 一些特效带有必需的参数 if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // 运行特效 $( "#effect" ).toggle( selectedEffect, options, 500 ); }; // 根据选择菜单值设置特效 $( "#button" ).click(function() { runEffect(); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">切换（Toggle）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <select name="effects" id="effectTypes"> <option value="blind">百叶窗特效（Blind Effect）</option> <option value="bounce">反弹特效（Bounce Effect）</option> <option value="clip">剪辑特效（Clip Effect）</option> <option value="drop">降落特效（Drop Effect）</option> <option value="explode">爆炸特效（Explode Effect）</option> <option value="fold">折叠特效（Fold Effect）</option> <option value="highlight">突出特效（Highlight Effect）</option> <option value="puff">膨胀特效（Puff Effect）</option> <option value="pulsate">跳动特效（Pulsate Effect）</option> <option value="scale">缩放特效（Scale Effect）</option> <option value="shake">震动特效（Shake Effect）</option> <option value="size">尺寸特效（Size Effect）</option> <option value="slide">滑动特效（Slide Effect）</option></select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，为匹配的元素集合内的每个元素添加指定的Class。
如需了解更多有关.addClass()方法的细节，请查看API文档.addClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .addClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function() { $( "#effect" ).addClass( "newClass", 1000, callback ); return false; }); function callback() { setTimeout(function() { $( "#effect" ).removeClass( "newClass" ); }, 1500 ); } }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，为匹配的元素集合内的每个元素移除指定的Class。
如需了解更多有关.removeClass()方法的细节，请查看API文档.removeClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .removeClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function() { $( "#effect" ).removeClass( "newClass", 1000, callback ); return false; }); function callback() { setTimeout(function() { $( "#effect" ).addClass( "newClass" ); }, 1500 ); } }); </script></head><body> <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，根据Class是否存在以及switch参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个Class。
如需了解更多有关.toggleClass()方法的细节，请查看API文档.toggleClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .toggleClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function() { $( "#effect" ).toggleClass( "newClass", 1000 ); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的Class。
如需了解更多有关.switchClass()方法的细节，请查看API文档.switchClass()。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - .switchClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; } .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script> $(function() { $( "#button" ).click(function(){ $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); return false; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div></div><a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body></html>使用.animate()实现颜色动画效果。
如需了解更多有关颜色动画（Color Animation）的细节，请查看API文档颜色动画（Color Animation）。
jQuery UI捆绑了jQuery Color插件，jQuery Color插件提供了颜色动画及其他许多与颜色相关的实用功能。
点击按钮预览特效。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 特效 - 动画（Animation）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { var state = true; $( "#button" ).click(function() { if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } state = !state; }); }); </script></head><body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">动画（Animation）</h3> <p> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div></div> <a href="#" id="button" class="ui-state-default ui-corner-all">切换特效</a> </body></html>相对窗口、文档、锚、光标/鼠标等元素定位一个元素。
如需了解更多有关.position()方法的细节，请查看API文档.position()。
使用表单控件配置位置，或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 定位（Position） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> #parent { width: 60%; height: 40px; margin: 10px auto; padding: 5px; border: 1px solid #777; background-color: #fbca93; text-align: center; } .positionable { position: absolute; display: block; right: 0; bottom: 0; background-color: #bcd5e6; text-align: center; } #positionable1 { width: 75px; height: 75px; } #positionable2 { width: 120px; height: 40px; } select, input { margin-left: 15px; } </style> <script> $(function() { function position() { $( ".positionable" ).position({ of: $( "#parent" ), my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } $( ".positionable" ).css( "opacity", 0.5 ); $( "select, input" ).bind( "click keyup change", position ); $( "#parent" ).draggable({ drag: position }); position(); }); </script></head><body> <div id="parent"> <p> 这是父元素的位置。 </p></div> <div class="positionable" id="positionable1"> <p> to position </p></div> <div class="positionable" id="positionable2"> <p> to position 2 </p></div> <div style="padding: 20px; margin-top: 75px;"> 定位... <div style="padding-bottom: 20px;"> <b>my:</b> <select id="my_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="my_vertical"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> </select> </div> <div style="padding-bottom: 20px;"> <b>at:</b> <select id="at_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="at_vertical"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> </select> </div> <div style="padding-bottom: 20px;"> <b>collision:</b> <select id="collision_horizontal"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="flipfit">flipfit</option> <option value="none">none</option> </select> <select id="collision_vertical"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="flipfit">flipfit</option> <option value="none">none</option> </select> </div></div> </body></html>一个照片浏览器的原型，使用Position分别把图片定为在左边、中间、右边，然后循环显示。使用顶部的链接来循环图像，或者在图像的左侧或右侧点击来循环图像。请注意，当调整窗口大小时，会重新定位图像。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 定位（Position） - 图像循环</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" > <style> body { margin: 0; } #container { overflow: hidden; position: relative; height: 400px; } img { position: absolute; } </style> <script> $(function() { // 重构部件，去除这些插件方法 $.fn.left = function( using ) { return this.position({ my: "right middle", at: "left+25 middle", of: "#container", collision: "none", using: using }); }; $.fn.right = function( using ) { return this.position({ my: "left middle", at: "right-25 middle", of: "#container", collision: "none", using: using }); }; $.fn.center = function( using ) { return this.position({ my: "center middle", at: "center middle", of: "#container", using: using }); }; $( "img:eq(0)" ).left(); $( "img:eq(1)" ).center(); $( "img:eq(2)" ).right(); function animate( to ) { $( this ).stop( true, false ).animate( to ); } function next( event ) { event.preventDefault(); $( "img:eq(2)" ).center( animate ); $( "img:eq(1)" ).left( animate ); $( "img:eq(0)" ).right().appendTo( "#container" ); } function previous( event ) { event.preventDefault(); $( "img:eq(0)" ).center( animate ); $( "img:eq(1)" ).right( animate ); $( "img:eq(2)" ).left().prependTo( "#container" ); } $( "#previous" ).click( previous ); $( "#next" ).click( next ); $( "img" ).click(function( event ) { $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).resize(function() { $( "img:eq(0)" ).left( animate ); $( "img:eq(1)" ).center( animate ); $( "img:eq(2)" ).right( animate ); }); }); </script></head><body> <div id="container"> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/earth.jpg" width="458" height="308" alt="earth"> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/flight.jpg" width="512" height="307" alt="flight"> <img src="https://atts.51coolma.cn/attachments/uploads/2014/03/rocket.jpg" width="300" height="353" alt="rocket"> <a id="previous" href="#">上一个</a> <a id="next" href="#">下一个</a></div> </body></html>使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。
如需了解更多有关部件库（Widget Factory）的细节，请查看API文档部件库（Widget Factory）。
该演示展示了一个简单的使用部件库（jquery.ui.widget.js）创建的自定义的小部件。
三个区块是以不同的方式初始化的。点击改变他们的背景颜色。查看源码及注释理解工作原理。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 部件库（Widget Factory） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank" > <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank" > <style> .custom-colorize { font-size: 20px; position: relative; width: 75px; height: 75px; } .custom-colorize-changer { font-size: 10px; position: absolute; right: 0; bottom: 0; } </style> <script> $(function() { // 部件定义，其中 "custom" 是命名空间，"colorize" 是部件名称 $.widget( "custom.colorize", { // 默认选项 options: { red: 255, green: 0, blue: 0, // 回调 change: null, random: null }, // 构造函数 _create: function() { this.element // 添加一个主题化的 class .addClass( "custom-colorize" ) // 防止双击来选择文本 .disableSelection(); this.changer = $( "<button>", { text: "改变", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // 绑定 changer 按钮上的 click 事件到 random 方法 this._on( this.changer, { // 当小部件被禁用时，_on 不会调用 random click: "random" }); this._refresh(); }, // 当创建及之后改变选项时调用 _refresh: function() { this.element.css( "background-color", "rgb(" + this.options.red +"," + this.options.green + "," + this.options.blue + ")" ); // 触发一个回调/事件 this._trigger( "change" ); }, // 一个改变颜色为随机值的公共方法 // 可通过 .colorize( "random" ) 直接调用 random: function( event ) { var colors = { red: Math.floor( Math.random() * 256 ), green: Math.floor( Math.random() * 256 ), blue: Math.floor( Math.random() * 256 ) }; // 触发一个事件，检查是否已取消 if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // 自动移除通过 _on 绑定的事件 // 在这里重置其他的修改 _destroy: function() { // 移除生成的元素 this.changer.remove(); this.element .removeClass( "custom-colorize" ) .enableSelection() .css( "background-color", "transparent" ); }, // _setOptions 是通过一个带有所有改变的选项的哈希来调用的 // 当改变选项时总是刷新 _setOptions: function() { // _super 和 _superApply this._superApply( arguments ); this._refresh(); }, // _setOption 是为每个独立的改变的选项调用的 _setOption: function( key, value ) { // 防止无效的颜色值 if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) { return; } this._super( key, value ); } }); // 通过默认选项进行初始化 $( "#my-widget1" ).colorize(); // 通过两个自定义的选项进行初始化 $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // 通过自定义的 green 值和一个只允许颜色足够绿的随机的回调进行初始化 $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); // 点击切换 enabled/disabled $( "#disable" ).click(function() { // 为每个小部件使用自定义的选择器来找到所有的实例 // 所有的实例一起切换，所以我们可以从第一个开始检查状态 if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { $( ":custom-colorize" ).colorize( "enable" ); } else { $( ":custom-colorize" ).colorize( "disable" ); } }); // 在初始化后，点击设置选项 $( "#black" ).click( function() { $( ":custom-colorize" ).colorize( "option", { red: 0, green: 0, blue: 0 }); }); }); </script></head><body> <div> <div id="my-widget1">改变颜色</div> <div id="my-widget2">改变颜色</div> <div id="my-widget3">改变颜色</div> <button id="disable">切换 disabled 选项</button> <button id="black">改为黑色</button></div> </body></html>