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 API - 折叠面板部件(Accordion Widget) 所属类别 小部件(Widgets) 用法 描述:把一对标题和内容面板转换成折叠面板。 版本新增:1.0 折叠面板容器的标记需要一对标题和内容面板。 First header First content panel Second header Second content panel 折叠面板支持任意标记,但是每个内容面板必须..
jQuery UI API - .addClass() 所属类别 特效(Effects) | 特效核心(Effects Core) | 方法重载(Method Overrides) 用法 描述:当动画样式改变时,为匹配的元素集合内的每个元素添加指定的 Class。 返回:jQuery .addClass( className [, duration ] [, easing ] [, complete ] ) 参数..
jQuery UI API - 自动完成部件(Autocomplete Widget) 所属类别 小部件(Widgets) 用法 描述:自动完成功能根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。 版本新增:1.8 任何可以接收输入的字段都可以转换为 Autocomplete,即,<input> 元素,<textarea> 元素及带有 contentedi..
jQuery UI API - 百叶窗特效(Blind Effect) 所属类别 特效(Effects) 用法 描述:百叶窗特效(Blind Effect)通过将元素包裹在一个容器内,采用“拉百叶窗”效果来隐藏或显示元素。 blind 参数 类型 描述 默认值 direction String 隐藏元素时拉动百叶窗的方向,显示元素时拉动百叶窗的方向。 可能的值:up、down、lef..
jQuery UI API - 反弹特效(Bounce Effect) 所属类别 特效(Effects) 用法 描述:反弹特效(Bounce Effect)反弹一个元素。当与隐藏或显示一起使用时,最后一次或第一次反弹会呈现淡入/淡出效果。 bounce 参数 类型 描述 默认值 distance Number 最大的反弹距离,以像素为单位。 20 times Integ..
jQuery UI API - 按钮部件(Button Widget) 所属类别 小部件(Widgets) 用法 描述:可主题化的按钮和按钮集合。 版本新增:1.8 按钮部件(Button Widget)加强了标准表单元素的功能,比如按钮(button)、输入(input)、锚(anchor),用适当的悬停(hover)和激活(active)样式来主题化按钮。 除了基本的按钮,单选按钮和复选框(input 类型为 radio 和..
jQuery UI API - 剪辑特效(Clip Effect) 所属类别 特效(Effects) 用法 描述:剪辑特效(Clip Effect)通过垂直或水平方向夹剪元素来隐藏或显示一个元素。 clip 参数 类型 描述 默认值 direction String 剪辑特效隐藏或显示元素的方向。 vertical 剪辑上下边缘,horizontal 剪辑左右边缘。 '..
jQuery UI API - 颜色动画(Color Animation) jQuery UI 特效核心添加了使用 rgb()、rgba()、十六进制值或者颜色名比如"aqua" 来动态改变 color 属性的功能。只需要包含 jQuery UI 特效核心文件,.animate() 就会支持颜色。 支持下列属性: backgroundColor borderBottomColor borderLe..
jQuery UI API - CSS 框架(CSS Framework) 下面是 jQuery UI 使用的 Class 名称列表。这些 Class 用来创建跨应用程序的视觉一致性,且允许组件通过 jQuery UI ThemeRoller 进行主题化。下面的 CSS 类根据样式是否是固定的结构化的,或者是否是可主题化的(颜色、字体、背景等),分别定义在 ui.core.css 和 ui.theme.css 两个文件中。 布局..
jQuery UI API - :data() Selector 所属类别 选择器(Selectors) | UI 核心(UI Core) 用法 描述:选择数据已存储在指定的键下的元素。 jQuery( ':data(key)' ) 参数 描述 key 数据的键。 表达式 $( 'div:data(foo)') 匹配一个通过 .data( �..
jQuery UI API - 日期选择器部件(Datepicker Widget) 所属类别 小部件(Widgets) 用法 描述:从弹出框或内联日历选择一个日期。 版本新增:1.0 jQuery UI 日期选择器(Datepicker)是向页面添加日期选择功能的高度可配置插件。您可以自定义日期格式和语言,限制可选择的日期范围,添加按钮和其他导航选项。 默认情况下,当相关的文本域获得焦点时,在一个小的覆盖层打开日期选择器。对于..
jQuery UI API - 对话框部件(Dialog Widget) 所属类别 小部件(Widgets) 用法 描述:在一个交互覆盖层中打开内容。 版本新增:1.0 对话框是一个悬浮窗口,包括一个标题栏和一个内容区域。对话框窗口可以移动,重新调整大小,默认情况下通过 'x' 图标关闭。 如果内容长度超过最大高度,一个滚动条会自动出现。 一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。 焦点 当打..
jQuery UI API - .disableSelection() 所属类别 方法(Methods) | UI 核心(UI Core) 用法 描述:禁用选择匹配的元素集合内的文本内容。 返回:jQuery 版本新增:1.6 版本废弃:1.9 .disableSelection() 该方法不接受任何参数。 禁用的文本选择是有害的,不建议使用。..
jQuery UI API - 可拖拽小部件(Draggable Widget) 所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素。 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse Interaction) 注释:让被选元素可被鼠标拖拽。如果您不只是拖拽,而是拖拽 & 放置,请查看 jQuery UI ..
jQuery UI API - 降落特效(Drop Effect) 所属类别 特效(Effects) 用法 描述:降落特效(Drop Effect)通过单个方向滑动的淡入淡出来隐藏或显示一个元素。 drop 参数 类型 描述 默认值 direction String 隐藏元素时元素降落的方向,显示元素时元素出现的方向。 可能的值:up、down、left、right。 ..
jQuery UI API - 可放置小部件(Droppable Widget) 所属类别 交互(Interactions) 用法 描述:为可拖拽小部件创建目标。 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse Interaction) 注释:jQuery UI 可放置(Droppable)插件让被选元素可放置(意味着它们在拖拽后接受被放置)。您..
jQuery UI API - Easings Easing 函数指定动画在不同点上的行进速度。jQuery 核心带有两个 easings:一个是 linear,整个动画以一个不变的速度行进;另一个是 swing(jQuery 核心默认的 easing),行进速度在动画开始和结束时比在动画中间时稍慢。jQuery UI 提供了一些额外的 easing 函数,范围从摆动行为上的变化到定制特效,比如弹跳。 一些 easings 会在动画..
jQuery UI API - .effect() 所属类别 特效(Effects) | 特效核心(Effects Core) | 方法(Methods) 用法 描述:对一个元素应用动画特效。 返回:jQuery .effect( effect [, options ] [, duration ] [, complete ] ) 参数 类型 描述 默认值 effect String 一..
jQuery UI API - .enableSelection() 所属类别 方法(Methods) | UI 核心(UI Core) 用法 描述:启用选择匹配的元素集合内的文本内容。 返回:jQuery 版本新增:1.6 版本废弃:1.9 .enableSelection() 该方法不接受任何参数。 .enableSelection() 方法可用于启用通过 .disableSelection() 禁用的文本选择。..
jQuery UI API - 爆炸特效(Explode Effect) 所属类别 特效(Effects) 用法 描述:爆炸特效(Explode Effect)通过把元素裂成碎片来隐藏或显示一个元素。 explode 参数 类型 描述 默认值 pieces Integer 爆炸裂开的碎片数目,应该是个平方数,任何其他值被舍入到最近的平方数。 9 实例 使用爆炸特效(Explod..
jQuery UI API - 淡入淡出特效(Fade Effect) 所属类别 特效(Effects) 用法 描述:淡入淡出特效(Fade Effect)通过淡入淡出元素来隐藏或显示一个元素。 fade 实例 使用淡入淡出特效(Fade Effect)切换一个 div。 淡入淡出特效(Fade Effect)演示 #toggle { width: 100px; hei..
jQuery UI API - .focus() 所属类别 方法重载(Method Overrides) | 方法(Methods) | UI 核心(UI Core) 用法 描述:异步聚焦到一个元素。 返回:jQuery .focus( delay [, callback ] )Returns: jQuery 参数 类型 描述 delay Integer 聚焦前等待的毫秒数。 c..
jQuery UI API - :focusable Selector 所属类别 选择器(Selectors) | UI 核心(UI Core) 用法 描述:选择可被聚焦的元素。 jQuery( ':focusable' ) 一些元素本身是可聚焦的(focusable),而另一些元素需要显式设置 tab 索引。以上两种情况,为了可聚焦(focusable),元素都必须是可见的。 下面类型的元素如果..