jQuery UI 1.5b：新 API，更多功能，性能大幅提升

发表于 2008 年 2 月 12 日作者 Paul Bakaus

大家好,

jQuery 团队很自豪地发布了即将发布的 UI 新版本的第一个测试版，jQuery UI 1.5！这个版本经历了漫长的开发历程——最初计划是一个错误修复版本，但它不断发展，最终变成了我们不能称之为 1.0.1 的东西，甚至不能叫 1.1，不，它太棒了，我们不得不把它命名为 1.5。

jQuery UI 1.5 对库进行了彻底的改版——许多组件从头开始重写，以提高整体稳定性和性能，我们最终成功地为所有组件确定了一个统一的 API。所以让我们直接进入所有变更的列表吧。

统一的 API

所有 UI 组件的 API 都已更新。如果您熟悉其中一个组件，现在应该很容易使用其他插件。每个插件都只有一种公开方法——所有其他方法都是通过将字符串传递到公开方法中来调用的，插件的初始化通过将选项哈希作为第一个参数来完成。如果您想在以后改变和获取所有选项，现在可以使用新的数据方法。拖动对象的简单示例

$(..).draggable({...}); // 初始化可拖动对象 $(..).draggable("disable"); // 禁用可拖动对象 $(..).data("cursor.draggable", "move") // 在拖动过程中将光标更改为“move”

更新和修订的文档

jQuery Wiki 中的文档已完全更新，以反映最近的更改。我们还确保这次所有回调及其参数都已记录在案。

拖放：吸附，相对拖放

可拖动对象和可放置对象已完全重构。它可能是迄今为止最无损的拖放实现：除了“static”之外，css 位置的值不会更改：这意味着静态或相对的元素不会被强制转换为绝对定位，这通常会破坏布局，特别是在处理浮动元素时。

一些选项已重命名以更好地识别：preventionTimeout 变成 delay，preventionDistance 变成 distance。

此外，还添加了一个新的选项插件：吸附插件。还记得 Winamp 窗口的对接功能吗？现在你可以用 UI 可拖动对象实现这种功能了——只需将“snap”设置为一个选择器，以选择所有你想要吸附到的元素，你就可以开始了。当然，你也可以使用 snapTolerance 和 snapMode 根据你的需要进行配置。

滑块：范围，多个手柄和可访问性

滑块没有重构，而是从头开始重写。虽然它仍然几乎向后兼容，但现在它非常稳定，比以往任何时候都更加简单：moveTo 方法现在只接受两个参数：要将手柄移动到的值，以及可选的要移动的手柄的索引。想要检索特定手柄的值吗？没问题，只需调用 $(..).slider(“value”, index) 。

更好的是，滑块现在完全键盘可访问：你现在可以单独地按 Tab 键并聚焦每个滑块手柄，并使用左右键移动其位置。我们还改进了对使用鼠标的支持：现在，单击空白区域会将聚焦手柄移动到单击的位置，无论你有多少个手柄。

对于那些寻找高级用法的人来说，滑块现在支持范围：只需将选项“range”设置为 true，并确保你有两个手柄，脚本就会在这两个滑块之间创建一个可见范围，这个范围可以单独设置样式。脚本甚至确保你不能创建负范围。

可排序列表：连接的可排序列表，序列化等等

可排序列表也进行了重写，现在支持你在可拖动对象中已知的一系列功能：光标、zIndex、revert、opacity、axis、handles、containment 和 scrolling。除此之外，你现在可以将你的项目序列化到一个 URL 哈希中，并且你还有大家经常要求的连接多个可排序列表的功能，这样你就可以将一个节点从一个可排序列表拖动到另一个可排序列表中。

还有更多！

这只是我个人参与的插件的摘录——最终版本将附带官方变更日志——但大多数其他插件也进行了重构，日期选择器、标签页、手风琴、可调整大小对象等都添加了大量新功能。

……还有更少！

为了准备我们的姊妹库 Enchant，我们移除了放大镜和阴影插件，并将它们移到了 Enchant 中。不用担心，你可以在我们的 SVN 主干中找到它们，位于 trunk/fx 下。此外，表格排序组件已被移除，因为 API 和路线图不兼容。很快就会有一个网格组件，其中包含表格排序组件的大部分功能。

……以及无数的错误修复

我们本来可以使事情变得容易，只需重写所有内容并删除 1.0 的所有错误票证，因为它们已经无法跟踪了，但我们没有这样做：针对 1.0 版本提交的所有问题都得到了解决。

有关此版本中所有更改的内容，请参阅文档或在代码中查找。请记住，这是一个测试版——预计会存在错误和不稳定（但比 1.0 好 :P）。此外，如果你将任何问题报告给我们的错误跟踪器，我们将不胜感激。

现在就去这里获取它：http://ui.jquery.com，或者直接从我们的 Google 代码页面下载：jquery.ui-1.5b.zip。对于此版本，我们禁用了下载器——所以请下载 zip 包并包含你需要的内容。你可以在文档中阅读有关依赖关系的信息。

感谢所有让这个版本成为可能的贡献者——我会在最终的发布说明中单独感谢你们每一个人，我太懒了，不想做两次 :）

大约两周后再见！

关于 “jQuery UI 1.5b：新 API，更多功能，性能大幅提升” 的 24 个想法

Marc 于 2008 年 2 月 12 日下午 10:33 说道：

1.5 是一个巨大的进步。感谢 Paul 的辛勤付出。
Stan Lemon 于 2008 年 2 月 12 日下午 10:56 说道：

Paul，干得漂亮！感谢你投入的时间和精力。
Abraham Estrada 于 2008 年 2 月 12 日下午 11:12 说道：

非常感谢你的工作。今天我一直在玩两个可排序列表，真是太痛苦了，我希望新的集成能更好地工作。再次感谢你。
Cloudream 于 2008 年 2 月 13 日上午 1:17 说道：

很棒！在“路线图”中还有很多有趣的东西 :P
Matthieu 于 2008 年 2 月 13 日上午 3:03 说道：

干得漂亮，Paul！
Romz 于 2008 年 2 月 13 日上午 5:14 说道：

太棒了，让我太高兴了！！！

继续努力！
Grant 于 2008 年 2 月 13 日上午 5:21 说道：

有计划出版一本 jQuery UI 的书吗？
Kevin Quillen 于 2008 年 2 月 13 日上午 10:34 说道：

谢谢。迫不及待地想试试。
Nodashi 于 2008 年 2 月 13 日上午 11:08 说道：

好消息，但是很抱歉，axis 属性仍然无法用于可排序列表 :/
Nodashi 于 2008 年 2 月 13 日上午 11:11 说道：

哦，抱歉，它有效了 :D
robert 于 2008 年 2 月 13 日下午 2:43 说：

我刚开始学习 JS 开发，所以如果这个问题很愚蠢，请见谅…

“每个插件只有一个公开的方法 - 其他方法都是通过在公开方法中传入一个字符串来调用的，插件的初始化通过将选项哈希作为第一个参数来完成。”

为什么这很好？成员方法有什么问题吗？
goetsu 于 2008 年 2 月 14 日上午 5:01 说：

干得好！
只是一个小建议，滑块的键盘可访问性并不意味着它是可访问的。屏幕阅读器用户永远不会知道它是一个滑块。我建议你使用 ARIA，参见：http://www.w3.org/TR/wai-aria/#slider。我认为 ARIA 可以用于整个 UI
Krzysztof 于 2008 年 2 月 14 日上午 7:14 说：

你好，
我尝试了一些 jQueryUI 演示，我担心从一开始就有什么问题，或者是我不明白的地方。
我希望能是 IE 6.0 出现问题，或者是因为 jquery.com 服务器速度慢，或者其他类似原因，但我担心我想错了。
例如，看一下 http://dev.jquery.com/view/trunk/ui/demos/ui.dialog.html。它每次加载需要 6 秒。
作为对比，http://extjs.com/deploy/dev/examples/window/hello.html 加载需要 3 秒（第一次加载时间更长）。
在 jQueryUI 中打开默认的最简单的对话框，显示的是橙色的无样式标题、绿色的无样式窗口窗格、“Hello, World!” 内容，以及浏览器中的状态栏，上面显示有 10 个项目剩余要加载。12 秒后 (!)，整个对话框准备就绪，带有边框部分、抓手和关闭按钮。
每次将光标移动到红色的关闭按钮上都会在状态栏中显示 http://dev.jquery.com/view/trunk/ui/demos/ui.dialog.html# 地址，移出则显示加载 dialog-titlebar-close.png，红色的叉子按钮每次都会闪烁开闭。
尝试通过拖动抓手来调整对话框的大小会破坏它的样式，再次显示有 10 个项目剩余要加载，所有内容都会冻结 12 秒左右。
在 ExtJS 中打开类似的 Hello World 对话框会立即完成，将光标悬停在关闭按钮上会立即更改其样式，调整窗口大小不会破坏其样式。
到底怎么了？问题出在哪里？
我尝试查看其他示例，例如选项卡 (http://dev.jquery.com/view/trunk/ui/demos/ui.tabs.html)。将光标滑过选项卡会让它们烦人地闪烁开闭，并有明显的盲区（第一次加载新样式元素以显示它们需要一些时间）。也许只是动态效果的时机不对？
我知道为 Web 应用程序创建 UI 系统是一项复杂而繁琐的任务。我知道重写之前的版本是一项巨大的任务。但在读完所有“干得好！”和“做得很好！”的赞美之后，我担心得出进一步的结论。
我只是认为，基于 jQuery（它是最好的 JS 库之一）能够打造同样优秀的 UI 库。观察 Ext 的演示（不进行其他比较，因为 Ext 也可以基于 jQuery），我可以看到动态界面可以做到流畅、平滑和快速。查看 jQueryUI 示例，我无法得出类似的结论。
此外，我担心其他人在尝试查看 jQueryUI 示例后，会完全放弃使用它的想法（更糟糕的是，连同整个 jQuery 核心一起放弃）。
祝 jQueryUI 团队一切顺利！
Massimo 于 2008 年 2 月 14 日上午 10:38 说：

干得好… 等不及看到最终版本了 :)

我发现了一个小问题（现在太懒了，不想注册 bugtracker :)）。在 Firefox 3 Beta 3 中，可排序框无法使用，除了第一个框，其他所有框都无法开始拖动。
ronald 于 2008 年 2 月 15 日上午 2:09 说：

可拖动 API 现在对使用 jQuery AJAX 创建这种应用程序非常有用，它确实让创建这样的应用程序变得简单。
Richard D. Worth 于 2008 年 2 月 15 日下午 3:18 说：

@robert：这取决于你对成员方法的理解。新 API 至少解决了三个问题：1) 符合 jQuery 风格 2) 支持链式调用 3) 最小化命名空间占用。
Leevi Graham 于 2008 年 2 月 16 日下午 8:05 说：

这是个好消息… 所有对第一个版本感到失望的人应该会满意。

感谢你们付出的努力！
Chris McCoy 于 2008 年 2 月 17 日上午 4:41 说：

很棒！继续努力 :)
Krzysztof 于 2008 年 2 月 18 日上午 7:10 说：

再次你好，
我想知道为什么我之前的回复（充满批评，但希望是积极的），发布于 2008 年 2 月 14 日上午 7:14，被审核删除了。
我决定使用另一台（远程）服务器重复我的实验，这台服务器与互联网的连接比我的好。
我无法从那里重复我之前从我的机器上报告的任何负面影响（尽管我仍然在我的电脑上观察到它们）。
所以原因可能是互联网连接速度。
我使用 http://www.broadband-help.com/tools/speed-test/ 测试了连接速度。
从我的电脑（使用 IE 6.0）来看，结果是：下载速度 1.90 Mbps，上传速度 242 kbps。
从远程服务器（使用 IE 7.0）来看，结果是：下载速度 3.37 Mbps，上传速度 3.18 kbps。
所以确实存在差异，但是
– 我的连接并不差；
– 其他解决方案（ExtJS）可以提供流畅的响应。
在我的电脑上，我处理着很多网站，并且测试着各种以不同软件包交付的 JS 动态效果，但我没有观察到像 jQueryUI 那样迟缓的情况。相反，在另一台电脑上它运行得很流畅。
您是否知道其他原因（例如浏览器配置）我需要检查？
致敬！
Krzysztof 于 2008 年 2 月 18 日上午 10:57 说：

再次你好，
我刚刚从 IE 6.0 升级到 IE 7.0。看来我之前使用 jQueryUI 遇到的所有问题都消失了。现在 jQueryUI 演示正常运行。一定是我的安装和 IE 6.0 配置出现了一些问题。
同时，我发现显示 http://www.liferay.com，之前在我的 IE 6.0 中速度很慢，现在在新的 IE 7.0 中速度明显加快了。也许是同一个（但未知）原因（顺便说一下，Liferay 在客户端使用 jQuery）。
抱歉打扰了。
Jenna 于 2008 年 2 月 25 日下午 7:02 说：

Preved dyatlam！
jQuery Forum 于 2008 年 2 月 26 日上午 8:40 说：

每次发布都带来了巨大的性能提升。
恭喜！
Anus Buttford 于 2008 年 2 月 27 日上午 6:01 说：

很棒的小部件！尤其是滑块！请问，是否可以在双滑块模式下，让滑块手柄的左侧背景颜色与右侧背景颜色不同？并且让两个手柄的中间部分呈现另一种颜色？我试图使用双滑块作为垃圾邮件级别指示器，我希望双滑块代表垃圾邮件的三个不同部分。左侧部分代表安全邮件，中间部分代表疑似垃圾邮件，右侧部分代表确认的垃圾邮件。目前我正在使用另一个滑块库，但它不像 jQuery 的实现那样吸引人。
h3 on 2008 年 3 月 2 日下午 12:35 说：

很棒的工作，我迫不及待地想尝试一下。

我认为将糖衣移动到一个独立的项目（Enchant）中是一个好主意，非常棒。