《UI设计》专题
-
jQuery UI API – 降落特效（Drop Effect）
所属类别 特效（Effects） 用法 描述：降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。drop 参数 类型 描述 默认值 direction String 隐藏元素时元素降落的方向，显示元素时元素出现的方向。 可能的值：up、down、left、right。 "left" 实例 使用降落特效（Blind Effect）切换一个 div。 <!doctyp
-
jQuery UI API – 颜色动画（Color Animation）
jQuery UI 特效核心添加了使用 rgb()、rgba()、十六进制值或者颜色名比如"aqua" 来动态改变 color 属性的功能。只需要包含 jQuery UI 特效核心文件，.animate() 就会支持颜色。 支持下列属性： backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColo
-
jQuery UI API – 剪辑特效（Clip Effect）
所属类别 特效（Effects） 用法 描述：剪辑特效（Clip Effect）通过垂直或水平方向夹剪元素来隐藏或显示一个元素。clip 参数 类型 描述 默认值 direction String 剪辑特效隐藏或显示元素的方向。 vertical 剪辑上下边缘，horizontal 剪辑左右边缘。 "vertical" 实例 使用剪辑特效（Clip Effect）切换一个 div。 <!doct
-
jQuery UI API – 反弹特效（Bounce Effect）
所属类别 特效（Effects） 用法 描述：反弹特效（Bounce Effect）反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。bounce 参数 类型 描述 默认值 distance Number 最大的反弹距离，以像素为单位。 20 times Integer 元素反弹的次数。当隐藏或显示时，会为淡入/淡出效果添加半个反弹。 5 实例 使用反弹特效（Bou
-
jQuery UI 实例 – 部件库（Widget Factory）
使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。 如需了解更多有关部件库（Widget Factory）的细节，请查看 API 文档 部件库（Widget Factory）。 默认功能 该演示展示了一个简单的使用部件库（jquery.ui.widget.js）创建的自定义的小部件。 三个区块是以不同的方式初始化的。点击改变他们的背景颜色。查看源码及注释理解工作
-
jQuery UI 实例 – 转换 Class（Switch Class）
当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class。 如需了解更多有关 .switchClass() 方法的细节，请查看 API 文档 .switchClass()。 .switchClass() 演示 点击按钮预览特效。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>j
-
jQuery UI 实例 – 切换 Class（Toggle Class）
当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。 如需了解更多有关 .toggleClass() 方法的细节，请查看 API 文档 .toggleClass()。 .toggleClass() 演示 点击按钮预览特效。 <!doctype html> <html lang="en"> <head> <me
-
jQuery UI 实例 – 移除 Class（Remove Class）
当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。 如需了解更多有关 .removeClass() 方法的细节，请查看 API 文档 .removeClass()。 .removeClass() 演示 点击按钮预览特效。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQue
-
jQuery UI 实例 – 添加 Class（Add Class）
当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。 如需了解更多有关 .addClass() 方法的细节，请查看 API 文档 .addClass()。 .addClass() 演示 点击按钮预览特效。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 特效
-
jQuery UI 实例 – 自动完成（Autocomplete）
根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 自动完成部件（Autocomplete Widget）。 本章节使用到 search.php 下载。 默认功能 当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "ja" ，可
-
jQuery UI 实例 – 折叠面板（Accordion）
在一个有限的空间内显示用于呈现信息的可折叠的内容面板。 如需了解更多有关 accordion 部件的细节，请查看 API 文档 折叠面板部件（Accordion Widget）。 默认功能 点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。 基本的 HTML 标记是一系列的标题（H3 标签）和内容 div，因此内容
-
jQuery UI API 类别 – 实用工具
API 描述 也属于类别 Easings Easing 函数指定动画在不同点上的行进速度。 部件库（Widget Factory） 使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件。 小部件（Widgets） 插件桥（Widget Plugin Bridge） jQuery.widget.bridge() 方法是 jQuery 部件库（Widget Factor
-
jQuery UI API 类别 – 方法重载
jQuery UI 重载了几个内置的 jQuery 方法，以提供额外的功能。当使用这些重载时，确保加载 jQuery UI 是很重要的。如果 jQuery UI 未加载，方法依然存在，但预期的功能将不可用，这会导致难以追踪的错误。 API 描述 也属于类别 .addClass() 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。 特效（Effects） | 特效核心（Effe
-
jQuery UI API 类别 – 特效核心
由 jquery.ui.effect.js 提供的功能。除了下面列出的方法，jquery.ui.effect.js 还包括一些 Easings。 API 描述 也属于类别 .addClass() 当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。 特效（Effects） | 方法重载（Method Overrides） 颜色动画（Color Animation） 使用 .ani
-
jQuery UI 如何使用部件库
我们将创建一个进度条。正如下面实例所示，这可以通过调用 jQuery.widget() 来完成，它带有两个参数：一个是要创建的插件名称，一个是包含支持插件的函数的对象文字。当插件被调用时，它将创建一个新的插件实例，所有的函数都将在该实例的语境中被执行。这与两种重要方式的标准 jQuery 插件不同。首先，语境是一个对象，不是 DOM 元素。其次，语境总是一个单一的对象，不是一个集合。 $.wid