Learning Path
浏览 jQuery UI 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
114
jQuery UI 教程 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。 jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式..
jQuery UI 使用 一旦您下载了 jQuery UI,您将得到一个 zip 压缩包,包含下列文件: /css/ /development-bundle/ /js/ index.html 在网页上使用 jQuery UI 在文本编辑器中打开 index.html,您将看到引用了一些外部文件:主题、jQuery 和 jQuery UI。通常情况下,您需要在页面中引用这三个文件,以便使用 jQuery UI 的窗体小部件和交互部件:..
jQuery UI 通过部件库(Widget Factory)扩展小部件 jQuery UI 的部件库(Widget Factory)使得创建小部件变得更加容易,这些小部件扩展了已有小部件的功能。这样子您就能在已有的基础上创建出功能强大的小部件,也可以在已有的小部件功能上做细微的调整。 注意:在学习本章节之前,需要明白什么是部件库(Widget Factory),及它是怎么工作的。如果您对这些知识还不熟悉,那么请先查看如何使用部件库(..
jQuery UI 如何使用部件库(Widget Factory) 我们将创建一个进度条。正如下面实例所示,这可以通过调用 jQuery.widget() 来完成,它带有两个参数:一个是要创建的插件名称,一个是包含支持插件的函数的对象文字。当插件被调用时,它将创建一个新的插件实例,所有的函数都将在该实例的语境中被执行。这与两种重要方式的标准 jQuery 插件不同。首先,语境是一个对象,不是 DOM 元素。其次,语境总是一个单一的对象..
jQuery UI 为什么使用部件库(Widget Factory) 编写 jQuery 插件与向 jQuery.prototype(通常显示为 $.fn)添加方法一样简单,且需要遵循一些简单的规则,比如返回 this。所以为什么会存在部件库(Widget Factory)? 在本章节中,我们将讲解部件库(Widget Factory)的好处,并了解何时使用它,以及为什么要使用它。 无状态 vs. 有状态插件 大多数 jQuery ..
jQuery UI 部件库(Widget Factory) jQuery UI 部件库(Widget Factory)是一个可扩展的基础,所有的 jQuery UI 小部件都是在上面进行创建的。使用部件库(Widget Factory)来创建插件,提供了方便的状态管理,同时也为一些常见的任务提供了便捷,比如暴露插件方法,实例化后改变选项等。 通过部件库(Widget Factory)扩展小部件(Widget) 小部件(Widge..
jQuery UI 小部件(Widget)方法调用 小部件(Widget)是通过 部件库(Widget Factory) 使用方法来改变他们初始化后的状态和执行动作而被创建的。有两种调用小部件方法的方式 - 通过部件库(Widget Factory)创建的插件,或者通过调用元素实例对象上的方法。 插件调用 使用小部件的插件调用方法,把方法名称以字符串形式进行传递。例如,点击这里查看,如何调用 dialog(对话框)小部件的 clos..
jQuery UI 工作原理 jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。其安装方式与大部分 jQuery 插件的安装方式类似,jQuery UI 的小部件是基于 部件库(Widget Factory) 创建的,小部件库提供了通用的 API。所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。本教程将通过 进度条(progressbar)..
jQuery UI API 类别 - 特效核心(Effects Core) 由 jquery.ui.effect.js 提供的功能。除了下面列出的方法,jquery.ui.effect.js 还包括一些 Easings。 API 描述 也属于类别 .addClass() 当动画样式改变时,为匹配的元素集合内的每个元素添加指定的 Class。 特效(Effects) | 方法重载(Method O..
jQuery UI API 类别 - 特效(Effects) jQuery UI 在jQuery 内置的特效上添加了一些功能。jQuery UI 支持颜色动画和 Class 转换,同时也提供了一些额外的 Easings。另外,提供了一套完整的定制特效,供显示和隐藏元素时或者只是添加一些视觉显示时使用。 API 描述 也属于类别 .addClass() 当动画样式改变时,为匹配的元素集合内的每个元素..
jQuery UI API 类别 - 交互(Interactions) jQuery UI 提供了一套基于鼠标的交互。 API 描述 也属于类别 可拖拽小部件(Draggable Widget) 允许使用鼠标移动元素。 可放置小部件(Droppable Widget) 为可拖拽小部件创建目标。 鼠标交互(Mouse Interaction) 基本交互层。 实用工具..
jQuery UI API 类别 - 方法(Methods) 尽管 jQuery UI 主要由 小部件(Widgets)、交互(Interactions) 和 特效(Effects) 组成,但是还有一些简单的方法,增加了便利性。 API 描述 也属于类别 .disableSelection() 禁用选择匹配的元素集合内的文本内容。 UI 核心(UI Core) .effect() 对一..
jQuery UI API 类别 - 方法重载(Method Overrides) jQuery UI 重载了几个内置的 jQuery 方法,以提供额外的功能。当使用这些重载时,确保加载 jQuery UI 是很重要的。如果 jQuery UI 未加载,方法依然存在,但预期的功能将不可用,这会导致难以追踪的错误。 API 描述 也属于类别 .addClass() 当动画样式改变时,为匹配的元素集合..
jQuery UI API 类别 - 选择器(Selectors) API 描述 也属于类别 :data() Selector 选择数据已存储在指定的键下的元素。 UI 核心(UI Core) :focusable Selector 选择可被聚焦的元素。 UI 核心(UI Core) :tabbable Selector 选择用户可通过 tab 键聚焦的元素。 UI 核心(UI..
jQuery UI API 类别 - 主题(Theming) jQuery UI 包括一个强大的 CSS 框架,用于创建自定义的 jQuery 小部件。该框架包括涵盖广泛的公共用户界面需求的 Class,并且可以使用 jQuery UI ThemeRoller 进行操纵。通过使用 jQuery UI CSS 框架创建您自己的 UI 组件,您应采用共享标记公约,便于插件社区的代码集成。您可以查看 jQuery UI 主题 了解更多详情..
jQuery UI API 类别 - UI 核心(UI Core) 由 jquery.ui.core.js 提供的功能。 API 描述 也属于类别 :data() Selector 选择数据已存储在指定的键下的元素。 选择器(Selectors) .disableSelection() 禁用选择匹配的元素集合内的文本内容。 方法(Methods) .enableSelecti..
jQuery UI API 类别 - 实用工具(Utilities) API 描述 也属于类别 Easings Easing 函数指定动画在不同点上的行进速度。 部件库(Widget Factory) 使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。 小部件(Widgets) 插件桥(Widget Plugin Bridge) jQuery..
jQuery UI API 类别 - 小部件(Widgets) 小部件(Widgets)是功能丰富、有状态的插件,它有一个完整的生命周期,带有方法和事件。您可以查看 部件库(Widget Factory)文档 了解更多详情。 API 描述 也属于类别 折叠面板部件(Accordion Widget) 把一对标题和内容面板转换成折叠面板。 自动完成部件(Autocomplete Wid..