jQuery 波士顿

发布日期: 作者:

如果有任何位于马萨诸塞州波士顿的 jQuery 用户,我将在 23 日为当地 Drupal 小组做关于 jQuery 的演示。我不确定是否会录制和/或转录,但我一定会在我完成之后将所有幻灯片或示例发布到网上。

更多关于该活动的信息可以在 Drupal 网站 上找到。

另外,我很想能够在某个时候举办 jQuery 会议,也许可以与大型会议 (OSCON、AJAX Experience?) 结合。但这将是另一篇博文的内容。

YShout - 使用 jQuery 的实时聊天

发布日期: 作者:

View of the Chat Area

Yuri Vishnevsky 刚刚发布了一个新的 AJAX 聊天应用程序,它充分利用了 jQuery。此应用程序允许您将聊天区域嵌入到网站的某个部分,并在用户相互聊天时实时更新。它非常漂亮,运行良好。

YShout 包含许多不错的功能
- Unicode 支持
- 管理区域
- 防洪控制
- 历史记录查看器

您可以在 项目页面 上查看 演示 的实际效果。

YShout Admin Area

可能最有趣的部分,从 jQuery 用户的角度来看,这不是他的应用程序的第一个版本 - 而是第三个版本 - 并且是将 Prototype 完全重写为 jQuery 的结果。Yuri 表示,进行此切换的原因是“文件大小与方法链相结合”以及“直观的语法”。

如果您喜欢此应用程序,您应该 Digg Yuri 的文章,因为我相信许多其他网站管理员都希望将其放在他们的网站上。

您自己的 Digg 间谍与 jQuery

发布日期: 作者:

Digg-like Spy with jQuery

Remy Sharp 刚刚 发布 了一个新的 jQuery 插件,它允许您模拟 Digg 的非常酷的 Spy 功能。

对于那些不熟悉的人来说,DiggSpy 功能使故事随着人们对其进行投票、审核或评论而实时淡入。对于查看 Digg 社区的脉搏来说,这是一个非常巧妙的功能。

Remy 采用了 Digg Spy 的概念,并创建了一个 jQuery 插件,它会自动从服务器中提取新项目(使用 AJAX),并优雅地将其淡入。此外,它还会淡出不再那么重要的旧项目。

作为该插件易于使用的证明,另一位 Digg 用户已经采用了该插件,并在 自己的网站上实现了它,考虑到其发布的时间很短,这令人印象深刻。

如果您喜欢此插件,您应该 Digg Remy 的文章,我相信许多 Digg 用户都希望拥有自己的 Spy 来玩。

ThickBox 2.0,运行在 jQuery 上

发布日期: 作者:

ThickBox 是一个 Lightbox 样式的浏览器模态窗口框架,由 Cody Lindley 编写,运行在 jQuery 库 之上,并且已经进行了升级。新的 2.0 版本添加了灰盒功能(iframe 内容)、图像集支持(类似于 Lightbox 2.0 功能),现在运行在 jQuery 1.0 上,除此之外还有其他功能。

您可能在问自己

“如果 ThickBox 2.0 做同样的事情,为什么我不直接使用 Lightbox 2.0 呢?”

答案很简单。未压缩的 jQuery 库和 ThickBox 附加脚本总共只有 **51kb**(如果 jQuery 压缩,则只有 27kb),而 Lightbox Javascript 文件本身组合起来却超过 **100kb**。想想节省的带宽和最终用户加载时间方面的提升。

难道没有人关心孩子最终用户吗?

ThickBox 相比 Lightbox 的另一个优势是,如果浏览器窗口太小,无法在不滚动的情况下全尺寸显示图像,则会 **自动调整图像大小**。此外,在 ThickBox 中,点击模态窗口之外会将其关闭,而在 Lightbox 中,必须点击“关闭”按钮才能将其从屏幕上移除。

请访问 ThickBox 演示网站,以获取有关安装、不同技术的演示(包括 iframe 内容和 AJAX 内容)以及支持信息的说明。

目前支持和测试的浏览器包括 Internet Explorer 6 和 7、Firefox 1.5+(在 OS X 和 Windows 上)、Opera 9+ 和 Safari 1.3.2 和 2.0.3,尽管它应该在任何现代浏览器上都能正常工作。ThickBox 受 MIT 许可证 的保护。

jQuery Suckerfish 菜单

发布日期: 作者:

我认为我们都听说过或使用过 Suckerfish CSS 菜单,它是由 Pattrick Griffiths 和 Dan Webb 为 A List Apart 编写的。如果没有,它是一种使用基于标准的语义 HTML 和 CSS 制作下拉菜单的酷炫方法。不幸的是,由于 IE 仍然占据着浏览器市场的统治地位,我们仍然需要一种方法来处理 IE 中的悬停状态。为此,我们需要一些 JavaScript 来将鼠标悬停和鼠标移出事件附加到 HTML 元素。

Myles Angell 决定使用 jQuery 重写 Suckerfish 的 JavaScript。Myles 使用 jQuery 的 基本效果 来显示和隐藏子菜单,并使用 jQuery 的 BaseStyle Base 模块方法 来突出显示当前鼠标悬停的菜单项。非常漂亮。

查看 Myles 其他使用 jQuery 的实验。对于 jQuery 初学者来说,这些都是很好的入门示例。树形视图 是另一个吸引我眼球的实验。

使用 jQuery 的 3D 宇宙

发布日期: 作者:

Universe Screenshot

Will Jessup 刚刚发布了一个关于 jQuery(以及 Javascript 一般来说)可能性的绝佳演示:一个宇宙的 3D 模型。尝试将鼠标垂直移动到屏幕周围以查看不同角度的宇宙,水平移动以使其旋转得更快。所有图像均由 NASA 提供。

Will 使用了许多技术来真正模拟正确的 3D 体验

  • 他根据元素的深度调整图像的不透明度和 z 索引。
  • 高度和宽度也会动态调整 - 但都是使用 fontSize 和 EMs 布局的,允许您也使用文本(除了静态图像或元素)来模拟景深。
  • 背景根据旋转的速度和方向移动。

此外,请查看 他的代码,了解所使用的特定缓存优化(例如,保存对单个 jQuery 对象的引用,并重复调用它,而不是在每次旋转时重新查询)。

一定要 Digg 这个,因为它确实是 jQuery 强大功能的一个非常好的例子。

Aptana IDE 现在包含 jQuery

发布日期: 作者:

Aptana 最新版本的 Web 2.0 IDE 软件现在包含将 jQuery 的 JavaScript 库导入 到 Web 项目中的功能。该项目设置了包含 示例页面,该页面由 Cody Lindley 创建,它演示了如何使用 jQuery。

“您现在可以通过创建 AJAX 库项目来快速访问您最喜欢的 AJAX JavaScript 库上的代码提示。目前,Aptana 支持基于 AFLAX、Dojo、JQuery、MochiKit、Prototype、Rico、script.aculo.us 和 Yahoo UI 库创建项目。” —Aptana Weblog

Aptana 是一种用于快速便捷地开发 Web 2.0 网站的 IDE。关键是在预览窗格中查看您在操作时的操作。Aptana 需要 JRE v1.4.2,可以在 Windows、Mac 和 Linux 上安装。它也可以作为其他 IDE 的 Eclipse 插件使用,并将继续推出其他 IDE。

“Aptana 是一款专为使用 (X)HTML、CSS 和 JavaScript 的 Web 开发人员设计的强大集成开发环境 (IDE)。Aptana 包括以下功能

  • 所有核心和 DOM JavaScript 功能以及您自己的 JavaScript 函数的完整代码辅助
  • 用于 (X)HTML、CSS 和 JavaScript 的代码结构大纲(甚至可以同时使用所有三种语言)
  • 所有三种语言的错误和警告(代码验证)
  • 通过 JavaScript 扩展 IDE 的能力,使用新的“操作”和新的“视图”
  • 支持 Mac(通用二进制文件)和 Windows,Linux 即将推出
  • 免费且开源” — Aptana 常见问题解答

John Resig 一直与 Aptana 合作改进 jQuery 文档,以便它们能够更好地与 Aptana 的自动完成 API 配合使用,所以请在不久的将来期待这一改进。

jQuery 国际化

发布日期: 作者:

从观察 jQuery 邮件列表和 Technorati 上与 jQuery 相关的博客文章中可以明显看出,jQuery 拥有庞大的国际用户群。

在开发新版本的网站(将与即将发布的 jQuery 1.0 版本一起发布)时,我收到了许多用户的建议,希望将文档和博客文章翻译成他们的母语。我对此表示衷心的感谢。

我向所有 jQuery 用户提出两个问题:如果您精通英语以外的语言,您是否愿意帮助翻译博客文章或文档的替代版本? 如果愿意,请回复本文,以便我能了解所有感兴趣的用户以及代表的语言。

其次,如果您使用英语以外的语言(但可能无法或可能无法帮助翻译),请告诉我您希望看到 jQuery 网站的哪种语言。

jQuery 文档应该使用哪种语言?(除了英语)


德语
西班牙语
法语
意大利语
日语
中文

感谢大家的意见,非常感谢。

(顺便说一下,国际化 模块对于 Drupal 来说非常酷)

开发提示:使用标签名称进行更快的选择

发布日期: 作者:

jQuery 提供了一种极其通用的 DOM 查询机制。如果您想知道幕后发生了什么,以及是否存在更低效和更高效的查询方法……答案是肯定的。在很多情况下,您可以通过指定标签名称来帮助 jQuery,例如

$("div.class").show()

$(".class").show()

……速度更快,因为查询引擎可以先按标签名称缩小范围。它就是这么聪明。

因此,您应该养成指定标签名称的习惯。唯一的例外:按 ID 获取。如果您按 ID 获取,不要包含标签名称或除了 ID 选择器以外的任何其他内容。

请注意,这里第二个示例(仅使用类选择器)是完全有效的,如果您需要查询多种元素类型,请随时进行,jQuery 仍然会返回正确的结果。

Technorati 使用 jQuery

发布日期: 作者:

就在今天,Technorati 推出了新的网站设计。除了其他更改之外,它现在使用 jQuery 作为其主要 JavaScript 代码库。这是一个重大新闻,因为另一个大型网站选择 jQuery 作为其 JavaScript 库。

如果我不得不猜测他们选择它的原因,我会说他们欣赏 jQuery 带来的带宽节省,同时还提供了许多有用的可用性改进。我将看看是否能找到负责网站设计 JavaScript 代码的人,以便了解他们的真实想法。