Learning Path
浏览 jQuery UI 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
114
jQuery UI 实例 - 定位（Position） 相对窗口、文档、锚、光标/鼠标等元素定位一个元素。 如需了解更多有关 .position() 方法的细节，请查看 API 文档 .position()。 默认功能 使用表单控件配置位置，或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。 jQuery UI 定位（Position） - 默认功能 #pa..
jQuery UI 实例 - 进度条（Progressbar） 显示一个确定的或不确定的进程状态。 如需了解更多有关 progressbar 部件的细节，请查看 API 文档 进度条部件（Progressbar Widget）。 默认功能 默认的确定的进度条。 jQuery UI 进度条（Progressbar） - 默认功能 $(function() { $( �..
jQuery UI 实例 - 移除 Class（Remove Class） 当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。 如需了解更多有关 .removeClass() 方法的细节，请查看 API 文档 .removeClass()。 .removeClass() 演示 点击按钮预览特效。 jQuery UI 特效 - .removeClass() 演示 ..
jQuery UI 实例 - 缩放（Resizable） 使用鼠标改变元素的尺寸。 如需了解更多有关 resizable 交互的细节，请查看 API 文档 可调整尺寸小部件（Resizable Widget）。 默认功能 在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。 jQuery UI 缩放（Resizable） - 默认功能 ..
jQuery UI 实例 - 选择（Selectable） 使用鼠标选择单个元素或一组元素。 如需了解更多有关 selectable 交互的细节，请查看 API 文档 可选择小部件（Selectable Widget）。 默认功能 在某个 DOM 元素上或者一组元素上启用 selectable 功能。通过鼠标拖拽选择条目。按住 Ctrl 键，选择多个不相邻的条目。 jQuery UI 选择（Selectable..
jQuery UI 实例 - 显示（Show） 使用自定义效果来显示匹配的元素。 如需了解更多有关 .show() 方法的细节，请查看 API 文档 .show()。 .show() 演示 点击按钮预览特效。 jQuery UI 特效 - .show() 演示 .toggler { width: 500px; height: 200px; } #button { paddi..
jQuery UI 实例 - 滑块（Slider） 拖动手柄来选择一个数值。 如需了解更多有关 slider 部件的细节，请查看 API 文档 滑块部件（Slider Widget）。 默认功能 基本的滑块是水平的，有一个单一的手柄，可以用鼠标或箭头键进行移动。 jQuery UI 滑块（Slider） - 默认功能 $(function() { $( '#s..
jQuery UI 实例 - 排序（Sortable） 使用鼠标调整列表中或者网格中元素的排序。 如需了解更多有关 sortable 交互的细节，请查看 API 文档 可排序小部件（Sortable Widget）。 默认功能 在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享 draggable 属性。 ..
jQuery UI 实例 - 旋转器（Spinner） 通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。 如需了解更多有关 spinner 部件的细节，请查看 API 文档 旋转器部件（Spinner Widget）。 默认功能 默认的旋转器。 jQuery UI 旋转器（Spinner） - 默认功能 $(function() { var spinn..
jQuery UI 实例 - 转换 Class（Switch Class） 当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class。 如需了解更多有关 .switchClass() 方法的细节，请查看 API 文档 .switchClass()。 .switchClass() 演示 点击按钮预览特效。 jQuery UI 特效 - .switchClass() 演示 ..
jQuery UI 实例 - 标签页（Tabs） 一种多面板的单内容区，每个面板与列表中的标题相关。 如需了解更多有关 tabs 部件的细节，请查看 API 文档 标签页部件（Tabs Widget）。 默认功能 点击标签页，切换被划分为不同逻辑部分的内容。 jQuery UI 标签页（Tabs） - 默认功能 $(function() { $( '#tabs..
jQuery UI 实例 - 切换（Toggle） 使用自定义效果来显示或隐藏匹配的元素。 如需了解更多有关 .toggle() 方法的细节，请查看 API 文档 .toggle()。 .toggle() 演示 点击按钮预览特效。 jQuery UI 特效 - .toggle() 演示 .toggler { width: 500px; height: 200px..
jQuery UI 实例 - 切换 Class（Toggle Class） 当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。 如需了解更多有关 .toggleClass() 方法的细节，请查看 API 文档 .toggleClass()。 .toggleClass() 演示 点击按钮预览特效。 jQuery UI 特效 - ..
jQuery UI 实例 - 工具提示框（Tooltip） 可自定义的、可主题化的工具提示框，替代原生的工具提示框。 如需了解更多有关 tooltip 部件的细节，请查看 API 文档 工具提示框部件（Tooltip Widget）。 默认功能 悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。 jQuery UI 工具提示框（Tooltip） - 默认功能 $(fu..
jQuery UI 实例 - 部件库（Widget Factory） 使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。 如需了解更多有关部件库（Widget Factory）的细节，请查看 API 文档 部件库（Widget Factory）。 默认功能 该演示展示了一个简单的使用部件库（jquery.ui.widget.js）创建的自定义的小部件。 三个区块是以不同的方式初始化的。点击改变..
jQuery UI 1.10 API 文档 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。 如果您是 jQuery 新手，您可以先查看 jQuery 教程。 本教程提供了 jQuery UI 1.10 API 文档。如果您使用的是旧版本，我们建议您更新到 jQuery UI 1.10，以便获取最好的支持，充分利用最新的 bug 修复和增强功能。如需了解更多有关 jQue..
jQuery UI 定制 jQuery UI 提供了多种定制方式。您已经看到下载生成器（Download Builder）如何定制一个值包含您所需选项的自定义版本，这里还提供了其他定制方式。 jQuery UI 基础：使用选项 jQuery UI 中的每个插件都有一个默认配置，默认配置值一般是根据最基本最常见的使用情况设置的。如果您想要让某个插件设置成非默认值，您可以使用 "options" 重..
jQuery UI 下载 一旦您对 jQuery UI 有了基本了解，您就可以亲自尝试一下。请从 jQuery UI 网站上的 Download Builder（下载生成器） 页面下载 jQuery UI 的副本。 创建自定义 jQuery UI 下载 jQuery UI 的下载生成器（Download Builder）允许您选择您需要下载的组件，为项目获取一个自定义的库版本。创建自定义 jQuery UI 下载需要以下三个步骤：..
jQuery UI 实例 jQuery UI 提供了一组用户界面交互、特效、小部件、实用工具及主题。通过实例演示、查看源代码、创建主题、阅读API 文档，开始学习使用 jQuery UI。 交互（Interactions） 交互（Interactions）向任何元素添加基本的基于鼠标的行为。您可以只通过短短的几行代码即可创建排序列表、缩放元素、拖放行为等等。交互（Interactions）也作用于更复杂的小部件和应用程序。 ..
jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，您可以使用它创建高度交互的 Web 应用程序。本教程将向您讲解 jQuery UI 是如何工作的。 jQuery UI 特性 简单易用 继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。 开源免费 采用 MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求。 广..
jQuery UI CSS 框架 API jQuery UI CSS 框架 jQuery UI 包含了一个强大的 CSS 框架，为了创建自定义 jQuery 小部件而设计的。框架包含了通用的用户界面所需的类，且可使用 jQuery UI ThemeRoller 进行维护。通过使用 jQuery UI CSS 框架创建您自己的 UI 组件。您需采用共享标记公约，以便在插件社区的代码集成。 框架类 下面的 CSS 类根据样式是否是固定的..
jQuery UI 设计主题 文件结构 主题是以特定的方式来增加他们的易用性。通常，文件目录结构如下所示： themename/ – 您的主题必须完全包含在一个单独的以主题名称命名的文件夹内。 themename/themename.css – 这是基本的 CSS 文件。无论使用了哪个插件，该文件都必须在每个使用主题的页面中引用。该文件应该是轻量级的，只包括要点。 themename/themename.pluginname.css..
jQuery UI ThemeRoller ThemeRoller 简介 ThemeRoller 是一个 Web 应用程序，为 jQuery UI 设计和下载自定义主题提供了直观的界面。您可以访问 jQuery UI ThemeRoller 进行主题定制。 jQuery UI ThemeRoller 是由波士顿的 Filament Group, Inc 设计和开发的。 ThemeRoller 界面 ThemeRoller 的界面分..
jQuery UI 主题 所有的 jQuery UI 插件都允许开发人员无缝集成 UI 小部件到他们网站或应用程序的外观和感观。每个插件通过 CSS 定义样式，且包含了两层样式信息：标准的 jQuery UI CSS 框架 样式和具体的插件样式。 jQuery UI CSS 框架提供了语义表示的类，用来表明小部件内元素的角色，比如标题、内容或可点击区域。这些在所有的小部件中都是一致的，一个可点击的 tab（标签页）、accordion..