对话框 API 重构

发布于 作者

继续进行 API 重构,我们对对话框小部件有一些计划的更改。我们知道这种 API 更改并非没有代价,因此我们想明确说明,除了特别说明的地方之外,**1.9 中的 jQuery UI 对话框也将支持 1.8 API**,并且弃用的 API 不会在 jQuery UI 2.0 之前删除。阅读有关完整jQuery UI API 重构的更多信息。

API 重构

在对话框中包含焦点
我们目前仅在模式对话框中包含焦点。我们将更改此行为以始终包含焦点,即使在非模式对话框中也是如此。这将使我们更符合DHTML 风格指南。我们不确定是否要实现一个将焦点从对话框中移出的键命令(例如 F6),因为这将需要定义一个系统来跟踪焦点应移到哪里。

允许禁用对话框
对话框目前不支持禁用。它们确实继承了添加 `ui-state-disabled` 类的默认行为,这使对话框看起来已禁用,但用户仍然可以与对话框中的元素交互。为了支持禁用对话框,我们将在对话框上放置一个 div 以防止鼠标交互。

能够配置哪个元素获得焦点
打开对话框时,我们会搜索可获取焦点的元素,并聚焦我们找到的第一个元素。如果没有可获取焦点的元素,则会将焦点设置在对话框本身。我们将添加一个 `autoFocus` 选项,它将允许自定义哪个元素获得焦点。该选项将接受一个函数,该函数将返回要聚焦的元素。该选项的默认值为当前实现。如果使用该选项没有找到任何元素,则将聚焦对话框。

在销毁时将对话框移回原始 DOM 位置
创建对话框时,它们会移到正文的末尾。对话框销毁时,它们目前会保留在正文的末尾。我们将更改此行为,以便对话框如果可能,则返回到原始位置。这将通过在创建时跟踪一个兄弟元素或父元素来完成。

自动堆叠
`stack` 选项控制当对话框获得焦点时它是否会移动到其他对话框之上。由于这应该是始终如此,我们将删除该选项并强制执行该行为。此外,我们可能会删除 `moveToTop` 方法,因为适当的对话框应始终可供用户使用,具体取决于它们何时打开以及它们是模式还是非模式的。

更合理的模式
用于管理模式对话框的当前实现有点笨拙,会比较元素的 z-index,并且经常会导致问题。我们计划简化实现,并改为使用基于层次结构的解决方案,而不是基于样式的解决方案。

反馈

我们很乐意听到您对这些更改的反馈。我们希望确保在最终确定和实施这些更改之前,我们能解决社区可能遇到的任何问题。如果您有任何反馈,请在相关的论坛帖子上发布。谢谢。

ARIA 黑客马拉松总结

发布于 作者

ARIA 黑客马拉松的最初想法是让 jQuery UI 开发人员和 ARIA 专家在一个房间里聚在一起,让他们互相认识,分享知识并改进 jQuery UI 的可访问性。

在多伦多 OCAD 大学的包容性设计研究中心 (IDRC) 会面,几位 jQuery UI 团队成员(Richard、Scott、Dan、Jörn)、OCAD 的几位开发人员(Michelle、Justin、Antranig、Harris)、多伦多附近的几位开发人员(Ates、George、Darcy)以及更远的地方的几位开发人员(来自波士顿的 Mat、来自华盛顿大学的 Candace 和 William 以及来自伊利诺伊大学的 Jerry)学到了很多关于针对屏幕阅读器用户进行测试和开发的知识,以及 ARIA 标准及其流程,以及 Mozilla 在可访问性方面的努力。

  • Colin Clark 概述了 IDRC 团队的工作,包括使用 jQuery UI 的 Fluid 项目。
  • Hans Hillen 在使用 JAWS 和 NVDA 进行测试和开发以及 ARIA 规范和 DHTML 风格指南方面提供了许多非常实用的见解。
  • Jospeh Scheuhammer 积极参与 ARIA 标准制定过程,他介绍了该过程的工作原理,如何提供反馈以及可以和应该与主规范一起使用的文档。
  • David Bolter 概述了 Mozilla 在 Firefox 可访问性方面的努力,还涵盖了 Firefox Mobile 的现状和未来。
  • 最后,Jennison Asuncion 演示了在普通网站上使用 JAWS 的方法,让观众(或者更确切地说,是听众)更好地了解盲人用户实际如何使用屏幕阅读器。他也是一个非常友善的人。

在小组讨论中,我们定义了最新的 NVDA 在最新的 Firefox 上作为 ARIA 和可访问性的支持设置,同时还使用 JAWS 在 Windows 上和 VoiceOver 在 OSX 上进行测试。如果代码是可维护的并且不会在符合规范的 AT 中破坏 ARIA,我们将接受针对其他或旧 AT 的合理补丁。

在为期两天的主要活动结束后,Hans 和 Jörn 停留到星期五,致力于多个 jQuery UI 小部件的键盘和可访问性实现。Jörn 还与 OCAD 的 Justin 和 Michelle 以及 Mozilla 的 Bobby 和 David 会面,以招募他们加入 jQuery UI 和测试子团队(QUnit、TestSwarm)。有很多共同的兴趣,这将导致更多合作关系在未来发展。

特别感谢 IDRC 和 Colin Clark 主办了这次活动,感谢 Mozilla 和 David Bolter 为部分旅行和住宿费用提供了资金。

有关大多数与会者(以及指向 Twitter 和 GitHub 个人资料的链接)和活动期间收集的各种资源的完整列表,请访问我们计划 wiki 上的活动页面

API 重构:过去、现在和未来

发布于 作者

早在 11 月,我们就宣布了许多 API 重构中的第一个。在那篇帖子中,我们简要地说明了我们的总体目标

jQuery UI 正在进行 API 重构,这将缩减 API 的大小,以提供更稳定的代码库,使其更易于学习和使用。我们将在接下来的几周内发布提议的更改,以便从社区收集反馈。我们的目标是在 1.9 中同时支持旧的(当前的)和新的(提议的)API,然后在 2.0 中删除对旧 API 的支持。

现在是三个月后,有两件事很清楚:1) 发布所有提议的更改需要不止几周的时间;2) 我们没有提供足够有关计划的更改及其原因的信息。

过去

jQuery UI 最初创建时,是新插件和现有插件的组合。引入现有的、流行的插件对每个人都有利:jQuery UI 发布时间更早,插件更多,原始作者的辛勤工作得到了 jQuery 项目的公开认可和支持,而现有用户群获得了对他们正在使用的代码的官方支持。不幸的是,这种方法也有缺点。由于现有插件由不同的作者编写,具有不同的设计原则和不同的编码风格,因此 jQuery UI 中没有太多的一致性。在 1.0 和 1.8 版本之间,曾尝试对 API 的各个部分进行标准化,但从未有过足够大的协调工作来进行必要的更改。

除了插件之间的不一致之外,在过去三年半的时间里,还出现了其他问题。随着用户要求越来越多的功能,选项、方法和事件的数量不断增加。随着时间的推移,这导致了我们今天所看到的情况,即使像可拖动元素这样简单的东西也拥有将近 30 个选项。一方面,它令人印象深刻,因为如此多的各种用例都可以处理,通常只需使用其中的一两个选项即可。另一方面,要找到要使用的正确的一两个选项可能是一项艰巨的任务,尤其是对于新用户而言。

现在

认识到现有的问题,我们以不同的方式处理了 1.8 版本。我们定义了一个构建插件的新流程,该流程专注于简化的 API,易于扩展。随着 1.8 版本的成功,尤其是自动完成小部件的简单性和灵活性,我们确信我们的新流程正在发挥作用。有了新的流程和新的标准,我们决定重新设计所有现有的插件,采用相同的设计流程。10 月,jQuery UI 团队在波士顿聚会,对所有现有插件进行了第一次重构。几周后,我们开始发布提议的更改,以收集社区的反馈。我们仍在努力解决某些特定插件的一些细节。

我们的目标是在 2.0 版本中拥有一个完全更新的项目。我们将拥有一个更简单的 API、更好的稳定性、完整的文档以及每个插件的完整测试套件。但是,要实现这一目标,需要进行许多向后不兼容的更改。我们知道这可能会造成痛苦,我们正在尽一切努力来减少升级带来的痛苦。具体而言,我们在实施新 API 时正在执行以下操作

  • 确保我们拥有 2.0 API 的完整测试套件
  • 为 1.8 API 创建一个单独的测试套件
  • 在新的功能之上重新实现任何已弃用的功能
  • 在旧 API 和新 API 无法并存的情况下,默认使用 1.8 API

这种方法有很多好处,其中最重要的是升级到 1.9 不会破坏任何现有的页面。实际上,1.9 版本对 1.8 API 的支持比任何 1.8.x 版本都要好。随着插件为 1.9 重构,1.8.x 中存在的许多错误将被修复,其中一些修复将难以移植到 1.8 分支。由于 1.9 版本对 1.8 API 的支持实际上是构建在 2.0 API 之上的新代码,因此它受益于这些错误修复。为 1.8 API 添加完整的测试套件确保了这些错误实际上在两个 API 中都被修复。

默认支持 100% 的 1.8 API 非常适合升级到 1.9,但它不提供判断您是否已准备好仅使用 2.0 API 的方法。为了解决这个问题,我们添加了一个新标志,jQuery.uiBackCompat。如果您加载 jQuery,然后设置 jQuery.uiBackCompat = false,然后加载 jQuery UI,则不会加载任何 1.8 API。这将导致仅使用 2.0 API,并允许您测试页面的新 API 兼容性,并确信您在 2.0 发布时已准备好升级到 2.0。

未来

当 jQuery UI 2.0 发布时,我们将不再支持 1.8 API。但是,1.9 的 1.8 API 兼容层应该继续工作;它只是不会包含在 2.0 版本中,并且不再被官方支持。所有新插件都将经过新的设计流程,因此像这样的大型 API 更改将不再发生。一旦现有的插件更新到我们的新标准,我们应该能够比以前更快地推动项目向前发展。

值得一提的是,只有小部件、实用工具和效果在 1.9 中被重构。所有交互都将为 2.0 重写,因此它们将经历不同的实现过程。作为 jQuery UI 的用户,除了发布时间外,小部件重构和交互重写之间不应该有任何感知上的区别。

我们知道没有人希望重构现有代码以适应 API 更改,并且我们正在努力确保过渡过程清晰简单。我们希望您,我们的用户,理解我们需要利用这个机会来改进 jQuery UI,使其在长期内更加健壮、可扩展和可维护。

选项卡 API 重构

发布时间: 作者:

继续 API 重构,我们对选项卡小部件有一些更改计划。我们知道像这样的 API 更改并非没有成本,因此我们想明确说明,除了特别指出的情况外,jQuery UI 选项卡在 1.9 中也将支持 1.8 API,弃用的 API 将不会在 jQuery UI 2.0 之前移除。

API 重构

移除旋转。
rotate 方法将被移除,因为它并不常见,而且一直都是作为内置扩展来实现的。这实际上将被移除,而不是在 1.9 中只是被弃用,因为它一直都是作为扩展存在的。Christopher McCulloh 有一个基于原始代码的 增强的旋转扩展

彻底改造 ajax 选项卡
ajaxOptionscache 选项将被移除,取而代之的是一个新的事件:beforeloadbeforeload 事件将接收一个 jqXHR 对象和将传递给 jQuery.ajax() 的设置对象。ajaxOptions 通过修改传递给 beforeload 的设置来替换,缓存可以通过调用 event.preventDefault() 来实现,以阻止 ajax 调用并直接跳转到显示选项卡。我们还将保留 href 属性不变,并将面板 ID 存储在 aria-controls 属性中。aria-controls 属性将为所有选项卡设置,无论它们是本地的还是远程的。这将消除对 url 方法的需求,该方法也将被移除。可以在远程选项卡的 aria-controls 值中预定义一个值,从而无需在 title 属性中指定位置(该属性也将被移除)。abort 方法将被移除,因为 jqXHR 对象将可以直接访问,因此您可以直接中止 ajax 调用。beforeload 事件的另一个好处是,当与现有的 load 事件配对时,您可以创建自定义加载功能;因此,我们将移除 spinner 选项。

已选 vs. 活动
为了提高 jQuery UI 套件内部的一致性,选择/已选将在整个套件中被重命名为激活/活动。这意味着选项卡的 selected 选项将被重命名为 activeselect 事件将被重命名为 beforeactivateshow 事件将被重命名为 activatebeforeactivateactivate 选项将包括对旧选项卡和新选项卡的选项卡和内容面板的引用,类似于手风琴。此外,select 方法将被移除,取而代之的是设置 active 选项。最后,deselectable 选项将在 1.9 中被移除,因为它在 1.8 中已被弃用。

移除模板化
与模板化相关的所有选项都将被移除。选项卡中的模板化是一个一次性的实现,与 jQuery UI 的其余部分不一致。此更改包括移除 idPrefixtabTemplatepanelTemplate 选项。

添加和移除选项卡
addremove 方法将被移除,取而代之的是一个新的 refresh 方法。这与在初始化后更新新插件的方式一致。移除这些方法也意味着 addremove 事件将被移除。

启用和禁用选项卡
选项卡将正确支持禁用单个选项卡或整个选项卡集。布尔值可以用来禁用整个集合,或者可以提供一组索引来禁用单个选项卡。此外,enabledisable 事件将被移除,以确保与其他小部件一致。

移除长度方法
length 方法将被移除,因为它没有太多用途,而且可以通过计算列表项的数量轻松计算出来。

移除 cookie 选项
cookie 选项将被移除,因为 cookie 支持不是插件的核心功能。跨页状态管理应该很容易,但不要内置。

设计更改仍在不断变化
我们还没有完全解决的几个问题。我们计划用 showhide 选项替换 fx 选项,以确保与其他小部件一致,但仍在解决一个关于 如何在插件之间支持效果 的未解决问题。我们还想移除 load 方法,但我们需要验证它是否可以作为扩展来构建。在我们进入新的实现之前,我们不知道这是否可行;如果不行,load 方法将保留在插件中。

反馈

我们希望收到您对这些更改的反馈。我们希望确保在最终确定和实施这些更改之前解决社区可能遇到的任何问题。如果您有任何反馈,请在 相关的论坛帖子 上发布。谢谢。

定位 API 重构

发布时间: 作者:

继续 API 重构,我们对定位实用工具有一些更改计划。

API 重构

将偏移选项合并到 my 和 at 选项中
将移除偏移选项,取而代之的是将偏移作为 my 或 at 选项的一部分包含进来。
例如,虽然您目前会这样做

$( "#elem" ).position({
    my: "left top",
    at: "left top",
    of: "#otherElem",
    offset: "50 20"
});

您现在将这样做

$( "#elem" ).position({
    my: "left+50 top+20",
    at: "left top",
    of: "#otherElem"
});

无论您是在 my 选项中还是在 at 选项中包含偏移,偏移都将始终根据最终位置调整,就像偏移选项当前所做的那样。我们还计划支持百分比,这样您就可以根据其宽度或高度的百分比来偏移元素。如果您在 my 选项中指定百分比,则百分比将基于被定位元素的大小。如果您在 at 选项中指定百分比,则百分比将基于被定位元素的大小。
例如,要将元素放置在屏幕下方 1/4 的位置并水平居中,您可以这样做

$( "#elem" ).position({
    my: "center top",
    at: "center top+25%",
    of: window
});

要定位一个元素,使其只有左侧的 10% 可见,您可以这样做

$( "#elem" ).position({
    my: "left-10% center",
    at: "right center",
    of: window
});

更好的碰撞处理
目前,碰撞处理相当简单。如果您启用碰撞(通过指定 fit 或 flip),则插件会检测是否发生碰撞,如果发生,则会相应地移动元素。但是,根据元素的大小,这种调整实际上可能会导致更少的元素可见。我们计划使碰撞处理更加智能,使其永远不会使定位更糟。API 不会发生变化,只是对碰撞进行了更好的处理。

反馈

我们希望收到您对这些更改的反馈。我们希望确保在最终确定和实施这些更改之前解决社区可能遇到的任何问题。如果您有任何反馈,请在 相关的论坛帖子 上发布。谢谢。

进度条 API 重构

发布时间: 作者:

之前所述,jQuery UI 正在进行 API 重构,这将减少 API 的大小,以提供一个更稳定的代码库,使其更容易学习和使用。这篇文章列出了进度条小部件的拟议更改的详细信息,以及每项更改背后的原因。

API 重构

添加对不确定进度条的支持。
我们之前说过不确定进度条应该是一个单独的小部件。但是,有一个常见的用例,您可能希望在知道实际进度之前开始提供有关任务已开始的反馈。在这种情况下,您可能希望从不确定进度条开始,并在您有足够的信息提供详细信息后切换到确定进度条。为了支持这一点,我们将允许 value 选项设置为 false,以指示进度条应该是无限的。

从无限状态切换到确定状态将看起来像这样

$( "#progressbar" ).progressbar({
    value: false
});

// later when you find out more information
$( "#progressbar" ).progressbar( "option", {
    value: 15,
    max: 250
});

反馈

我们希望收到您对这些更改的反馈。我们希望确保在最终确定和实施这些更改之前解决社区可能遇到的任何问题。如果您有任何反馈,请在 相关的论坛帖子 上发布。谢谢。

手风琴 API 重构

发布时间: 作者:

jQuery UI 正在进行 API 重构,旨在精简 API 大小,以提供更稳定、更易于学习和使用的代码库。 我们将在未来几周内发布拟议的更改,以便收集社区的反馈。 我们的目标是在 1.9 中同时支持旧(当前)和新(拟议)API,然后在 2.0 中删除对旧 API 的支持。 本文列出了手风琴小部件拟议更改的详细信息以及每个更改背后的原因。

API 重构

删除导航和 navigationFilter 选项。
删除了与导航相关的选项,取而代之的是在初始化时设置 active 选项。 内置的导航过滤器并不总是合理,并且默认情况下被禁用。 我们计划添加一个演示,展示如何实现当前的导航功能,以及一个演示,展示如何使用 cookie 来存储活动面板。

将 autoHeight、fillSpace 和 clearStyle 选项合并为一个名为 fixedHeight 的新选项。
autoHeight、fillSpace 和 clearStyle 选项都处理类似的问题,因此不能一起使用。 为同一功能(面板的高度)提供三个选项会创建一个复杂且令人困惑的 API。 这三个选项将被一个名为 fixedHeight 的单个布尔选项替换。 设置为 true(默认值)时,所有面板将具有相同的高度。 如果手风琴的高度为“auto”,则所有面板的高度将与最高面板一样高(相当于 autoHeight: true)。 如果手风琴具有显式高度,则所有面板将根据该高度进行大小调整(相当于 fillSpace: true)。 当 fixedHeight 设置为 false 时,不会对面板的高度进行任何计算,它们将根据其内容进行大小调整(相当于 clearStyle: true)。

将 icon.headerSelected 选项重命名为 icon.activeHeader
为了保持一致性,该选项被重命名,无论是在手风琴(处理活动面板时为 active 与 selected)还是在整个 jQuery UI 套件中。

删除 activate 方法
activate 方法将被删除,取而代之的是更新 active 选项。 包含 activate 方法不会简化手风琴的使用,因此没有必要。

将 resize 方法重命名为 refresh
为了保持整个 jQuery UI 套件的一致性,该方法被重命名。 但是,目前这将继续只处理大小更改。 我们确实计划在将来支持添加/删除面板。

将 changestart 事件重命名为 beforeactivate
为了保持一致性,无论是手风琴(处理活动面板时为 activate 与 change)还是在整个 jQuery UI 套件中,该事件都被重命名。

将 change 事件重命名为 activate
为了保持一致性,无论是手风琴(处理活动面板时为 activate 与 change)还是在整个 jQuery UI 套件中,该事件都被重命名。

添加 .ui-accordion-heading 类
目前,每个面板的标题没有添加任何类。 这会导致样式表使用 .ui-accordion-header a 进行样式设置,这使得在标题中添加额外的锚点变得困难。 为了解决这个问题,我们将在每个标题的第一个子元素中添加一个类,并使用新的类进行样式设置。

反馈

我们非常乐意听到您对这些更改的反馈。 我们希望确保在最终确定并实施这些更改之前,解决社区可能遇到的任何问题。 如果您有任何反馈,请在 相关论坛帖子 上发布。 谢谢。

jQuery UI 下载构建器/ThemeRoller 状态

发布日期: 作者:

注意: 下载构建器和 ThemeRoller 已经恢复正常运行。 感谢大家的耐心等待。

我们知道下载构建器和 ThemeRoller 存在问题,我们对由此造成的不便表示歉意。 我们已经禁用了网站上的这些组件,直到解决这些组件的问题。 同时,我们想提供这些 jQuery UI 和 jQuery UI 主题的静态链接。 开发包 包括所有 jQuery UI 插件和基本主题的代码。 主题包 包括 ThemeRoller 图库中的所有 21 个预建主题。

jQuery UI 1.8rc1 (预览)

jQuery UI 1.7.2 (稳定版)

jQuery UI 1.6 (遗留)

Google CDN

多个稳定版本的 jQuery UI 托管在 Google 的 CDN 上,以及 1.7.2 的所有 ThemeRoller 主题:baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader

由于下载构建器和 ThemeRoller 无法使用,您将无法创建自定义下载或主题。 我们理解这很不方便,我们正在尽一切努力尽快解决问题。 感谢您的耐心等待!