Learning Path
浏览 jQuery UI 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
114
jQuery UI API - 可排序小部件（Sortable Widget） 所属类别 交互（Interactions） 用法 描述：使用鼠标调整列表中或者网格中元素的排序。 版本新增：1.0 依赖： UI 核心（UI Core） 部件库（Widget Factory） 鼠标交互（Mouse Interaction） 注释：jQuery UI 可排序（Sortable）插件让被选元素通过鼠标拖拽进行排序。 注释：..
jQuery UI API - 旋转器部件（Spinner Widget） 所属类别 小部件（Widgets） 用法 描述：通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。 版本新增：1.9 旋转器（Spinner），或数步进控件（number stepper widget），是用于处理各种数字输入的完美控件。它允许用户直接输入一个值，或通过键盘、鼠标、滚轮旋转改变一个已有的值。当与全球化（Globalize）结合时..
jQuery UI API - 堆叠元素（Stacking Elements） 堆叠的或者移动到其他元素前面的小部件（Widgets）当放置到现实世界的页面中时经常面临挑战。通常通过简单地改变堆叠元素的 z-index 或者父元素来避免页面上的冲突。但是，jQuery UI 需要一个不需要手动改变 z-index 值的通用的解决方案。这是通过 ui-front class 来完成的，通常还伴随着堆叠组件上的 appendTo 选项。 ..
jQuery UI API - .switchClass() 所属类别 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） 用法 描述：当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class。 返回：jQuery .switchClass( removeClassName, addClassName [, duration ] [, eas..
jQuery UI API - :tabbable Selector 所属类别 选择器（Selectors） | UI 核心（UI Core） 用法 描述：选择用户可通过 tab 键聚焦的元素。 jQuery( ':tabbable' ) 一些元素本身是可通过 tab 键聚焦的（tabbable），而另一些元素需要显式设置一个正的 tab 索引。以上两种情况，为了可通过 tab 键聚焦（tabbab..
jQuery UI API - 标签页部件（Tabs Widget） 所属类别 小部件（Widgets） 用法 描述：一种多面板的单内容区，每个面板与列表中的标题相关。 版本新增：1.0 标签页（Tabs）通常用于把内容分成多个部分，以便节省空间，就像折叠面板（accordion）一样。 标签页（Tabs）有一组必须使用的特定标记，以便标签页能正常工作： 标签页（Tabs）必须在一个有序的（<ol>..
jQuery UI API - .toggle() 所属类别 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Methods） 用法 描述：使用自定义效果来显示或隐藏匹配的元素。 返回：jQuery .toggle( effect [, options ] [, duration ] [, complete ] ) 参数 类型 ..
jQuery UI API - .toggleClass() 所属类别 特效（Effects） | 特效核心（Effects Core） | 方法重载（Method Overrides） 用法 描述：当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。 返回：jQuery .toggleClass( className [, switch ..
jQuery UI API - 工具提示框部件（Tooltip Widget） 所属类别 小部件（Widgets） 用法 描述：可自定义的、可主题化的工具提示框，替代原生的工具提示框。 版本新增：1.9 工具提示框（Tooltip）取代了原生的工具提示框，让它们可主题化，也允许进行各种自定义： 显示不仅仅是标题的其他内容，就如内联的脚注或通过 Ajax 检索的额外内容。 自定义定位，例如，在元素上居中工具提示框。 添加额..
jQuery UI API - 转移特效（Transfer Effect） 所属类别 特效（Effects） 用法 描述：把一个元素的轮廓转移到另一个元素。 transfer 参数 类型 描述 className String 转移的元素将接收的参数化的 class 名称。 to String jQuery 选择器，要转移到的元素。 当尝试两个元素之间的可视化交互时非..
jQuery UI API - .uniqueId() 所属类别 方法（Methods） | UI 核心（UI Core） 用法 描述：为匹配的元素集合生成并申请一个唯一的 Id。 返回：jQuery 版本新增：1.9 .uniqueId() 该方法不接受任何参数。 许多小部件需要元素生成唯一的 id。.uniqueId() 会检查元素是否有 id，如果元素没有 id，它将生成一个 id，并设置为该元素的 id。在未..
jQuery UI API - .zIndex() 所属类别 方法（Methods） | UI 核心（UI Core） .zIndex() 用法 描述：为元素获取 z-index。 返回：jQuery .zIndex() 该方法不接受任何参数。 .zIndex() 方法在查找一个元素的 z-index 时非常有用，忽略 z-index 是否是直接设置在元素上还是设置在祖先元素上。为了确定 z-index，该方法会在指..
jQuery UI 实例 - 折叠面板（Accordion） 在一个有限的空间内显示用于呈现信息的可折叠的内容面板。 如需了解更多有关 accordion 部件的细节，请查看 API 文档 折叠面板部件（Accordion Widget）。 默认功能 点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。 基本的 HTML 标记是一系列的标题（H3 ..
jQuery UI 实例 - 添加 Class（Add Class） 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。 如需了解更多有关 .addClass() 方法的细节，请查看 API 文档 .addClass()。 .addClass() 演示 点击按钮预览特效。 jQuery UI 特效 - .addClass() 演示 .toggler { ..
jQuery UI 实例 - 颜色动画（Color Animation） 使用 .animate() 实现颜色动画效果。 如需了解更多有关颜色动画（Color Animation）的细节，请查看 API 文档 颜色动画（Color Animation）。 jQuery UI 捆绑了 jQuery Color 插件，jQuery Color 插件提供了颜色动画及其他许多与颜色相关的实用功能。 动画（Animation）演示 点击按..
jQuery UI 实例 - 自动完成（Autocomplete） 根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 自动完成部件（Autocomplete Widget）。 本章节使用到 search.php 下载。 默认功能 当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的..
jQuery UI 实例 - 按钮（Button） 用带有适当的悬停（hover）和激活（active）的样式的可主题化按钮来加强标准表单元素（比如按钮、输入框、锚）的功能。 如需了解更多有关 button 部件的细节，请查看 API 文档 按钮部件（Button Widget）。 默认功能 可用于按钮的标记实例：一个 button 元素，一个类型为 submit 的 input 元素和一个锚。 jQuery ..
jQuery UI 实例 - 日期选择器（Datepicker） 从弹出框或内联日历选择一个日期。 如需了解更多有关 datepicker 部件的细节，请查看 API 文档 日期选择器部件（Datepicker Widget）。 默认功能 日期选择器（Datepicker）绑定到一个标准的表单 input 字段上。把焦点移到 input 上（点击或者使用 tab 键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上..
jQuery UI 实例 - 对话框（Dialog） 在一个交互覆盖层中打开内容。 如需了解更多有关 dialog 部件的细节，请查看 API 文档 对话框部件（Dialog Widget）。 默认功能 基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。 ..
jQuery UI 实例 - 拖动（Draggable） 允许使用鼠标移动元素。 如需了解更多有关 draggable 交互的细节，请查看 API 文档 可拖拽小部件（Draggable Widget）。 默认功能 在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 jQuery UI 拖动（Draggable） - 默认功能 ..
jQuery UI 实例 - 放置（Droppable） 为可拖拽小部件创建目标。 如需了解更多有关 droppable 交互的细节，请查看 API 文档 可放置小部件（Droppable Widget）。 默认功能 在任意的 DOM 元素上启用 droppable 功能，并为可拖拽小部件创建目标。 jQuery UI 放置（Droppable） - 默认功能 #draggab..
jQuery UI 实例 - 特效（Effect） 对一个元素应用动画特效。 如需了解更多有关 .effect() 方法的细节，请查看 API 文档 .effect()。 .effect() 演示 点击按钮预览特效。 jQuery UI 特效 - .effect() 演示 .toggler { width: 500px; height: 200px; position: r..
jQuery UI 实例 - 隐藏（Hide） 使用自定义效果来隐藏匹配的元素。 如需了解更多有关 .hide() 方法的细节，请查看 API 文档 .hide()。 .hide() 演示 点击按钮预览特效。 jQuery UI 特效 - .hide() 演示 .toggler { width: 500px; height: 200px; } #button { paddi..
jQuery UI 实例 - 菜单（Menu） 带有鼠标和键盘交互的用于导航的可主题化菜单。 如需了解更多有关 menu 部件的细节，请查看 API 文档 菜单部件（Menu Widget）。 默认功能 一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。 jQuery UI 菜单（Menu） - 默认功能 ..