您自己的 Digg 间谍与 jQuery

发布日期: 作者:

Digg-like Spy with jQuery

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

对于那些不熟悉的人来说,Digg间谍 功能可以让故事随着人们投票、审核或评论而实时淡入。

Remy 借鉴了 Digg Spy 的理念,并创建了一个 jQuery 插件,该插件可以自动从服务器拉取新项目(使用 AJAX)并平滑地淡入。此外,它还会淡出不再重要的旧项目。

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

如果您喜欢这个插件,您应该 为 Remy 的文章投票,因为我相信很多 Digg 用户都希望拥有自己的间谍来玩。

ThickBox 2.0,运行在 jQuery 上

发布日期: 作者:

ThickBox 是一个由 Cody Lindley 编写的基于浏览器的类似 Lightbox 的模态窗口框架,它运行在 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 内容)的演示以及支持信息的说明。

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 基础模块方法 来突出显示当前鼠标悬停的菜单项。非常棒。

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

使用 jQuery 的 3D 宇宙

发布日期: 作者:

Universe Screenshot

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

Will 使用了很多技巧来真实地模拟 3D 体验

  • 他根据元素的深度调整图像的不透明度和 z-index。
  • 高度和宽度也会动态调整——但所有这些都是使用 fontSize 和 EM 布局的,使您能够使用文本(除了静态图像或元素)来模拟景深。
  • 背景根据旋转的速度和方向移动。

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

请务必 为它投票,因为它是一个关于 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 博客

Aptana 是一款用于快速轻松地开发 Web 2.0 网站的 IDE。关键是通过预览窗格查看您正在执行的操作。Aptana 需要 JRE v1.4.2,可以安装在 Windows、Mac 和 Linux 上。它也可以作为 Eclipse 插件与其他 IDE 一起使用。

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

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

John Resig 一直在与 Aptana 合作改进 jQuery 文档,使其更适合 Aptana 的自动完成 API,因此在不久的将来期待看到这些改进。

jQuery 国际化

发布日期: 作者:

如果从 jQuery 邮件列表和 Technorati 上与 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 的人,以了解他们的真实想法。

jQuery 插件的优点

发布日期: 作者:

jQuery 正在进行很多优秀的插件开发。以下是最近出现在列表中的两个插件

HighlightFade 由 Blair Mitchelmore 创建,是“黄色淡入”技术的非常彻底的 jQuery 实现。选项包括淡入类型(线性、正弦、指数)、持续时间以及完成时要调用的函数。该插件重 3.5K(未压缩,因此可以缩小),应满足您所有的黄色淡入需求。

Tablesorter 由 Christian Bach 创建,是浏览器端的表格排序器(点击列标题按相应的顺序对表格进行排序)。它速度很快(在演示中,对 400 行进行排序大约需要 0.3 秒),它会自动检测列类型以提供适当的排序类型。例如,它会自动识别日期与文本与 URL 内容,并相应地进行排序。对于 URL,它会忽略 http/https/ftp/file 前缀以用于排序目的,这更有可能为您提供您真正想要的排序。您还可以定义自己的自动检测,这通常涉及 5-10 行代码。该插件未压缩约为 10.5K。

您是否知道 wiki 上列出了更多 jQuery 插件?http://proj.jquery.com/plugins/?请注意,当 jQuery 达到 1.0 时,wiki 的 URL 将更改。

jQuery 颜色选择器

发布日期: 作者:

Drupal 的著名人物 Steven Wittens 发布了他自己的一个名为 Farbtastic 的 jQuery 插件。您想知道它有什么作用吗?

Farbtastic 使用分层透明 PNG 在色调圆圈内呈现饱和度/亮度渐变。不使用 Flash,不使用像素大小的 div。

使用 Farbtastic,一个简单的表单输入框会变成一个自动更新的十六进制代码,其背景颜色会随着可点击的颜色轮和由 8kb Javascript 文件添加的块而相应地变化。点击颜色、拖动选择器或手动输入十六进制代码。

只需包含 farbtastic.js 文件以及 farbtastic.css 样式表,并创建一个占位符 div 以及一个用于十六进制代码的表单元素,如下所示

<form>
    <input type="text" ... />
</form>
<div id="colorpicker"></div>

然后包含一行 jQuery 代码

$('#colorpicker').farbtastic('#colorpickerinput');

就这么简单!您现在应该在页面上看到一个颜色选择器小部件。

要查看工作演示以及有关使用该插件的更深入说明,请访问 Farbtastic 页面。Farbtastic 受 GPL 保护。