jQuery UI:交互和控件

发布日期: 作者:
在 jQueryCamp Boston 遇见 jQuery UI 团队!
我们将在今年 10 月举办为期一天的免费会议,届时 jQuery 和 jQuery UI 团队的大部分成员将出席。欢迎参加,提出问题,并与构建您喜爱的库的人们见面!

User Interface - Green

今天,我们很高兴地宣布一个全新的库:jQuery UI。jQuery UI 是一个基于 jQuery 构建的完全主题化交互和控件库。

您可以在其网站上找到有关 jQuery UI 的所有信息
http://ui.jquery.com/

jQuery UI 标志着 jQuery 项目一个全新分支的开始,该分支将专注于开发高质量、可重复使用的组件,您可以将这些组件直接添加到您的应用程序中。通常,这些组件直接来自传统的 jQuery 插件,但具有严格的编码、文档、主题和演示标准。我们希望您像我们一样喜欢这种新的质量水平。

我们推出了一个完整的主题:Flora(由 Tom 设计)和两个部分完成的主题:Light 和 Dark(由 Sean 设计)。在接下来的一个星期内,我们将宣布一项新的主题竞赛的详细信息,以及您完全构建自己的 jQuery UI 主题所需的一切。

注意: jQuery UI 要求您至少使用 jQuery 1.2.1 或更高版本。

请多多包涵,作为全新项目,难免会有很多粗糙的地方。请将错误提交到 错误跟踪器 的“UI”组件下,并在 jQuery UI 邮件列表 上进行讨论。感谢您的帮助。

话不多说,献上 jQuery UI!

演示应用程序:高级图片库

(目前在 IE 和 Safari 中存在问题 - 我们正在进行一些修复,应该会在今天晚些时候发布。)

演示应用程序:条形图导航

(目前仅适用于支持 Canvas 的浏览器:Firefox、Safari 和 Opera。)

功能:鼠标交互

可拖动元素 (文档)

可放置元素 (文档)

可排序元素 (文档)

可选择元素 (文档)

可调整大小的元素 (文档)

功能:控件

手风琴 (文档)

日历 (文档)

对话框 (文档)

滑块 (文档)

表格排序器 (文档)

选项卡 (文档)

功能:效果

放大镜 (文档)

阴影 (文档)

贡献者

这是由十多个人多年努力的结果 - 其中许多人都是首次为 jQuery 贡献代码。

目前,以下是所有提供帮助的人员及其贡献的粗略列表。(如果您发现遗漏,请告知!)

  • Paul B(可拖动元素、可放置元素、可排序元素、可调整大小的元素、滑块、阴影、放大镜、图片库应用程序)
  • John(文档、主题、演示、UI 网站、猫群管理)
  • Richard(树、可选择元素、可排序元素、对话框、许多错误修复)
  • Tom(Flora 主题、UI 网站和 UI 徽标)
  • Sean(主题、Dark 和 Light 主题、阴影、表单)
  • Klaus(选项卡)
  • Joern(手风琴)
  • Christian(表格排序器)
  • Adel(下载器、客户端)
  • Paul H(下载器、服务器端)
  • Marc(日历)

其他贡献者:Tane、Micheil、Gilles、Dmitri 和 Yehuda。他们的许多工作将在下一个版本的 jQuery UI 中体现出来(包括菜单、工具栏、上传器、拆分器和富文本编辑器)。

我想要详细描述每个人在这个项目中的贡献,以单独感谢每一个人,因为每个人都做得非常棒,让这个项目得以实现。尤其是 Paul、Tom、Richard 和 Sean - 你们做得太棒了!

再次感谢大家对这项新工作的支持 - 请多多包涵,它仍然有一些粗糙的地方。如果您发现任何错误,请将其发布到 错误跟踪器 的“UI”组件下。

一如既往,我们欢迎您的反馈!如果您想告诉我们您的想法,请发布到 jQuery UI 邮件列表,或加入 irc.freenode.net #jquery-ui,因为这是找到我们最好的地方。

享受!

如果您喜欢看到的内容,请随时 在 Digg 上分享

jQuery 1.2.1:针对 1.2 的快速修复

发布日期: 作者:

jQuery 1.2.1jQuery 1.2 的一个错误修复版本。您可以在 错误跟踪器 上查看已修复内容的完整列表。

下载

jQuery 1.2.1:

如果您想从 Subversion 存储库 中检出完整版本,您可以按照 以下说明 进行操作,并从以下位置检出源代码

 svn co http://jqueryjs.googlecode.com/svn/tags/1.2.1

重要更改

相对动画

新的相对动画的 API 中存在一个严重错误,导致与现有动画样式发生冲突。为了解决这个问题,现在必须使用以下语法来执行相对动画

 $(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

其中 += 表示“添加到当前位置”,-= 表示“从当前位置减去”。

.eq()

由于一些非常有说服力的论据,以及经过深思熟虑,.eq() 又被恢复了。许多插件依赖于此单个方法 - 而由 .slice() 提供的替代方案并不像最初提供的方案那样优雅。

发布 jQuery 1.2.1

发布日期: 作者:

这是 jQuery 1.2 的一个错误修复版本。您可以在 错误跟踪器 上查看已修复内容的完整列表。

下载

jQuery 压缩版(使用 gzipping 压缩后为 14kb)
jQuery 打包版(26kb)
常规版(77kb)

重要更改

相对动画

新的相对动画的 API 中存在一个严重错误,导致与现有动画样式发生冲突。为了解决这个问题,现在必须使用以下语法来执行相对动画
$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

其中 += 表示“添加到当前位置”,-= 表示“从当前位置减去”。

.eq()

由于一些非常有说服力的论据,以及经过深思熟虑,.eq() 又被恢复了。许多插件依赖于此单个方法 - 而由 .slice() 提供的替代方案并不像最初提供的方案那样优雅。

jQuery 1.2:jQuery.extend(“Awesome”)

发布日期: 作者:
参加 jQueryCamp Boston!
我们将在今年 10 月举办为期一天的免费会议,届时 jQuery 团队的大部分成员将出席。欢迎参加,提出问题,并与构建您喜爱的库的人们见面!

这是一个重大的新版本,我们已经筹备了很长时间 - 现在它已准备好供您使用!

我们已经将 jQuery 1.2 的完整发行说明 放在一个单独的页面上,因为有很多内容需要深入了解。请记住,在 1.2 中删除了一些功能,因此请务必阅读有关 如何升级 的说明,然后再进行操作。

一如既往,肯定会有错误,因此请将错误提交到 错误跟踪器,我们会尽快解决问题。您可能预计会在本周内发布一个小的错误修复版本,以解决任何紧急问题。

jQuery 1.2 (完整发行说明)

下载

jQuery 1.2:(如何升级)

插件:

新特性

  • 选择器
    •  :has(selector)
    •  :header
    •  :animated
    • XPath 选择器插件
  • 属性
    • .val() 重构
  • 遍历
    • .map()
    • .prevAll() / .nextAll()
    • .slice()
    • .hasClass()
    • .andSelf()
    • .contents()
  • 操作
    • .wrapInner() / .wrapAll()
    • .replaceWith() / .replaceAll()
    • 事件克隆
  • CSS
    • .offset()
    • .height() / .width() 用于文档和窗口
  • Ajax
    • 部分 .load()
    • 跨域 getScript
    • JSONP
    • .serialize() 重构
    • 禁用缓存
  • 效果
    • .stop()
    • %/em 动画
    • 颜色动画
    • 相对动画
    • 队列控制
    •  :animated
    • step: 函数
  • 活动
    • 命名空间事件
    • .triggerHandler()
  • 内部机制
    • 文档迁移
    • 扩展管理


周日,周日,周日!

这个周日,9 月 16 日,全新的 jQuery UI 将来到您的城市。可拖动、可放置、可调整大小、阴影、滑块、可排序、选项卡、手风琴、可选择、树形菜单和模态框。 所有功能都经过完整文档化、演示、主题化,并且 100% 免费开源软件。

为了激发您的兴趣,以下是一些您期待已久的功能的快速预览。

Sexy jQuery UI

欢迎您Digg 此帖子.

jQuery 1.2 发布

发布日期: 作者:

下载

jQuery 1.2
jQuery 压缩版 (使用 gzipping 后大小为 14kb)
jQuery 打包版 (26kb)
jQuery 标准版 (77kb)

新特性

部分 .load()

部分 .load() 允许您将 HTML 文档的片段加载到您的页面中,并通过 jQuery 选择器进行过滤。这与正常的 Ajax .load() 相同,只是您在检索的 URL 后面指定了一个选择器。

跨域 $.getScript

您现在可以使用 getScript 动态加载和执行远程脚本。这可以用于加载 jQuery 插件或其他代码模块。

跨域 $.getJSON (使用 JSONP)

JSONP 是一种允许您跨多个域传输 JSON 数据的技术。

jQuery 现在原生支持 JSONP – 如果你尝试从远程 URL 加载 JSON (通过 $.getJSON 或 $.ajax),那么会为服务器提供额外的回调函数以供解释。此外,如果服务器需要一个特殊字段来指定你自己的回调函数名称,你可以在你的查询字符串中提供“=?”。

序列化重构

.serialize() 方法进行了重大的重构,将jQuery Forms 插件提供的功能移植回 jQuery 核心。这意味着表单数据的序列化现在应该更接近于浏览器通常发送到服务器的数据。

此外,还引入了新的 .serializeArray() 方法,它序列化所有表单和表单元素 (类似于 .serialize() 方法),但返回一个 JSON 数据结构供您使用。这在处理大型表单时尤其有用,因为您希望对这些表单进行处理。

禁用缓存

在 $.ajax 调用中,您现在可以通过提供额外的 cache: false 标志来防止浏览器缓存请求。这将确保您执行的任何 GET 请求都会绝对检索页面的最新版本。
cache: false 始终向服务器发送新的请求。

« 返回 [[Release:jQuery 1.2|jQuery 1.2 发布说明]] 的完整内容。

.val() 重构

简单的 .val() 方法得到了必要的改进,使其更加实用。您现在可以设置一组单选按钮和复选框的选中状态,以及设置 select 选项的选中状态。您可以通过传递要选择/选中项目的数组值或名称来实现此目的。(在 Firefox2 中失败,单选按钮在 IE7 中失败) 现在可以对 select 元素调用 .val() 来获取其值。

.offset()

从 [https://jqueryjs.cn/plugins/project/dimensions Dimensions 插件] 中移植过来的 [[CSS/offset|.offset()]] 方法允许您找到元素相对于文档左上角的偏移量 (作为“top”和“left”)。

.height() / .width() 用于文档和窗口

.height() 和 .width() 现在可以在文档和窗口对象上使用,允许获取文档主体和窗口视窗的高度和宽度。

.stop()

停止所有指定元素上当前运行的动画。如果任何动画排队要运行,它们将立即开始。

%/em 动画

动画现在可以使用 em 值或百分比值以及像素值进行。它们甚至可以在同一个 animate() 调用中混合使用。

颜色动画

一个新的 [https://jqueryjs.cn/plugins/project/color 官方 jQuery 插件],它支持通过使用新的 jQuery.fx.step 来动画化元素的 CSS 颜色。

支持的 CSS 属性:‘backgroundColor’;‘borderBottomColor’;‘borderLeftColor’;‘borderRightColor’;‘borderTopColor’;‘color’;‘outlineColor’。

颜色可以指定为预设的命名颜色范围之一;以 rgb 格式 (例如 ‘rgb(221,221,221)’); 十六进制 (例如 ‘#dddddd’);或简写十六进制 (例如 ‘#ddd’)。

相对动画

相对动画的行为与普通动画类似,但它们的单位被指定为相对于元素当前位置的相对位置,而不是绝对位置。

您可以通过将数字和 (可选) 单位写为字符串来指定相对动画,并在前面加上“+=” (用于相对于当前位置添加的相对动画) 或 “-=” (用于从当前位置减去的相对动画)。

同时动画

一直以来,jQuery 中的动画都是自动排队的,这使得 animate() 调用可以被链接。

现在,如果在 animate() 的选项中包含 queue: false 标志,那么该动画将不会进入队列,并将立即开始运行。

.queue() / .dequeue()

两个现有的 jQuery 内部排队方法经过了调整,并变得更加实用,可以用于一般的动画用途。

.queue() 可用于访问和操作特定元素的动画队列。(这是一个函数数组)。

添加了以下排队方法
* .queue()
返回对第一个元素队列的引用 (这是一个函数数组)。
* .queue(Function)
在所有匹配元素的队列末尾添加一个新函数,以便执行。
* .queue(Array)
用这个新队列 (函数数组) 替换所有匹配元素的队列。

并添加了以下出队方法:.dequeue() 从队列的开头移除一个排队函数并执行它。

可扩展动画

您现在可以使用一个函数扩展 jQuery 动画,该函数在动画的每个步骤中都会被触发,改变正在动画化的元素的样式。它可以扩展到特定的 CSS 属性,甚至可以用来创建自定义动画类型。

例如,您可以将额外的 step 函数传递给 .animate() 以执行诸如动画同步之类操作。

命名空间事件

此功能对于插件作者来说特别有用。您现在可以为绑定的事件处理程序提供一个私有名称,使您能够在以后将其移除 (而无需维护所有您正在管理的处理程序的私有缓存)。

.triggerHandler()

一种新方法,可以与原始的 .trigger() 一起使用。此方法会触发元素上所有绑定的事件处理程序 (针对特定事件类型),但不会执行浏览器的默认操作。

.wrapInner() / .wrapAll()

.wrapInner() 旨在包装每个匹配元素的内部子内容 (包括文本节点);.wrapAll() 将匹配集合中的所有元素包装到单个包装元素中 (这与 .wrap() 不同,后者将匹配集合中的每个元素都包装到一个元素中)。

.replaceWith() / .replaceAll()

replaceWith 用指定的 HTML 或 DOM 元素替换所有匹配的元素。.replaceAll 用匹配的元素替换由指定选择器匹配的元素。

带事件的克隆

.clone() 方法现在可以接受一个可选参数,如果为 true,它还将克隆所有克隆元素上的所有事件处理程序。

:has(selector)

这将匹配包含至少一个与指定选择器匹配的元素的所有元素。这是 XPath 选择器的替代品[selector],包含在 jQuery 1.1 和更早版本中 – :has() 的行为完全相同。

:header

这将匹配所有标题 (h1、h2、h3、h4、h5 和 h6 标签)。这对于为页面构建目录 (尤其是当标题顺序很重要时) 非常有用。

:animated

匹配当前正在执行至少一个动画的元素。

XPath 选择器插件

由于 XPath 选择器在 jQuery 1.2 中被移除,因此引入了一个新的 [https://jqueryjs.cn/plugins/project/xpath XPath 选择器插件]。您可以使用此插件来获得自 jQuery 创建以来一直存在的 CSS/XPath 混合选择器。

.map()

将一组元素转换为另一组值 (这些值可能是也可能不是元素)。您可以使用它来构建值列表、属性、CSS 值,甚至执行特殊、自定义、选择器转换。这是使用 $.map() 的便利方法。

.prevAll() / .nextAll()

允许您查找当前元素之前或之后的所有兄弟元素。

.slice()

此方法的行为与数组的原生 .slice() 方法相同,允许您将 jQuery 集合切分成可重复使用的部分。

.hasClass()

新的 .hasClass() 方法是一个简单的便利方法,它位于 [[Traversing/is|.is()]] 之上,处理其最常见的用例 (检查类名)。

.andSelf()

将 jQuery 堆栈上的前两个集合组合成一个匹配集合。

.contents()

查找匹配元素内的所有子节点 (包括文本节点)。如果您对 iframe 元素执行此操作,它将返回其内部文档。

如何升级

如果您还没有这样做,请升级到 jQuery 1.1.4。这将有助于消除您代码使用的最后一个 jQuery 版本和当前版本之间的绝大多数意外情况。查看弃用和移除特性的列表,确保您的代码中没有使用任何特性。如果您使用的任何插件仍然需要某些旧功能,您可以随意包含 jQuery 1.1 兼容插件或 XPath 兼容插件,具体取决于情况。

jQuery 1.1 兼容插件

在 jQuery 1.2 版本中,删除了一些功能。包含此插件可以让您在 jQuery 1.2 的副本中拥有所有被删除的功能。

此插件通常的使用方式如下

XPath 兼容插件

由于 XPath 选择器在 jQuery 1.2 中被移除,因此引入了一个新的 XPath 选择器插件。您可以使用此插件来获得自 jQuery 创建以来一直存在的 CSS/XPath 混合选择器。

颜色动画插件

一个新的、官方的 jQuery 插件,它支持通过使用新的 jQuery 动画 API 来动画化元素的 CSS 颜色。支持的 CSS 属性包括:‘backgroundColor’,‘borderBottomColor’,‘borderLeftColor’,‘borderRightColor’,‘borderTopColor’,‘color’,‘outlineColor’。

已删除的功能

我们在 jQuery 1.2 中删除了一些很少使用、造成混淆或效率低下的方法。在可能的情况下,我们提供了执行这些操作的替代方法。

在 jQuery 1.2 中,与 jQuery 1.1 版本一样,提供了向后兼容插件。因此,如果您希望继续使用这些特定方法,您可以使用该插件并继续这样做。

此外,为了处理 XPath 的更改,另一个单独的插件已经可用,它将在 jQuery 中处理 XPath 选择器功能。

DOM 操作

调用带有参数的 clone 方法将被弃用(clone 方法整体保留)。而不是调用.clone(false)您现在应该这样做.clone().empty()代替。

DOM 遍历

为了使用新的 .slice() 方法(它与数组的 slice 方法完全相同),.eq() 方法将被弃用。您可以像这样复制 .eq()

$("div").slice(0,1);

为了使用新的 .slice() 方法(它与数组的 slice 方法完全相同),.lt() 方法将被弃用。

为了使用新的 .slice() 方法(它与数组的 slice 方法完全相同),.gt() 方法将被弃用。

为了使用普通的 .filter() 语句,.contains() 方法将被弃用。您可以像这样复制 .contains()

$("div").filter(":contains(Your Text)");

Ajax

$("#elem").loadIfModified("some.php"): 此便捷方法将被移除,以支持使用更长的形式的 $.ajax()

$.ajax({
  url: "some.php",
  ifModified: true,
  success: function(html){
    $("#elem").html(html);
  }
});

$.getIfModified("some.php"): 此便捷方法将被移除,以支持使用更长的形式的 $.ajax()

$.ajax({
  url: "some.php",
  ifModified: true
});

$.ajaxTimeout(3000): 此便捷方法将被移除,以支持使用更明确的 $.ajaxSetup() 的更长形式

$.ajaxSetup({timeout: 3000});

$(...).evalScripts(): jQuery 中不再需要此方法——包含在 HTML 字符串中的所有脚本在注入到文档中时会自动执行。不需要替代方法。

jQueryCamp ’07 (波士顿)

发布在

我们将举办第一个 为期一天的 jQuery 小型会议,于 10 月 27 日在马萨诸塞州波士顿举行。目前,大部分的 jQuery 团队 将会参加并发表演讲——因此,如果您有兴趣结识一些帮助 jQuery 成可能的人员,并与其他开发人员交流,那么这是一个绝佳的机会!

此活动将在 Ajax Experience 大会 之后立即举行。很多人都会参加这两个活动,通常由他们的雇主赞助为商务旅行。如果您需要任何有关这些活动的更多详细信息以进行协调,请 告诉我

请务必将自己添加到 注册列表 中,以便我们知道需要获得多大的场地。希望在那里见到大家!

如果您或您的公司有兴趣赞助此活动,请联系 John Resig。我们通常需要几百美元来帮助支付食物的费用——如果我们获得足够的资金,我们将为参加者提供 T 恤。