每月归档：2006 年 2 月

未分类

AJAX 新 FX 和更多！

发表时间： 作者：

针对 jQuery 的新的 AJAX 插件 已准备就绪 - 如果你正在运行最新代码，它已经整合进去了。除此之外，还有几个新的 效果 可以享受：fadeIn、fadeOut 和 center。我还修复了一些错误，这些错误也已包含在这个版本中。

  • 使用 $(…,Context) 参数和非 HTML 文档的错误已解决。
  • 现在可以将 jQuery 对象作为上下文传递：$(“title”,$(“head”));
  • 已修复 IE 中属性解析不正确的问题。
  • 已修复另一个切换内联元素的问题。

下一个版本将专注于添加辅助方法，以更轻松地浏览文档（并减少对神秘的 XPath 序列的依赖），以及避免连续使用 .get(0) 的方法。如果你想讨论 jQuery 的开发，请加入我们的 邮件列表 或者 IRC 频道。

未分类

错误已修复，AJAX 正在路上！

发表时间： 作者：

这里还没有提到，但 jQuery IRC 频道 非常活跃 - 至少我们中的几个人一直都在那里。我们一直在忙着寻找错误，而我一直忙着修复它们，这里简要介绍一下过去几天修复的内容。

  • hide()/show() 操作现在在所有浏览器中都能一致地工作，即使对于奇怪的使用情况也是如此。
  • 已经处理了一些 Prototype 1.3 + jQuery 和 Prototype 1.4 + jQuery 的错误，现在使用 Prototype 和任何额外的模块应该不会有任何问题。
  • .toggle() 方法没有正确恢复 display: inline 的问题。
  • document.ready() 现在可以多次调用 - 所有函数都被添加到队列中。
  • 奇怪的浏览器特定属性会自动更正（例如 for=htmlFor、class=className 和 float=cssFloat）。

这个周末有什么值得期待的？很多。AJAX 模块已经进入 Alpha 测试，并准备投入使用，还有一些新的效果（fadeIn/fadeOut）、新的选择器方法 (.ancestor()、.siblings() 等) 以及一些辅助方法 (.text()、.value()、.visible() 等)。如果你想探索某个特定主题，请随时 给我发邮件 或 访问邮件列表。

未分类

图像交叉淡入淡出

发表时间： 作者：

今天的 DHTML 技巧是一个关于 图像交叉淡入淡出 的流畅示例。整个页面的 Javascript 代码从一开始就相当短，但还有改进的空间。如果你看一下 原始源文件，除了变量声明和 so_xfade 方法之外，几乎所有内容都可以简化为以下片段，使用 jQuery

$(document).ready(function(){
  $("head").append("<link href='xfade2.css' \
    rel='stylesheet' type='text/css'>");
  img = $("#imageContainer img").set("xOpacity",0).get();
  $("#imageContainer img:first").set("xOpacity",0.99).show();
  setTimeout(so_xfade,1000);
});

目前，在 jQuery 中似乎没有更优雅的方式来实现它，但考虑到代码比 DOM 方式更易于理解，我不能抱怨。

未分类

Greybox Redux

发表时间： 作者：

今天又出现了一个流行的 DOM/CSS/Javascript 项目：Greybox。它很像流行的 lightbox，但用于在当前页面上显示网站。

我认为这是一个很好的机会来展示使用 jQuery 创建优秀代码是多么容易。我对 greybox 进行了两阶段的修改。

  1. 第一步是让 greybox 无障碍地工作（他们将 javascript 嵌入到页面中以使其工作）并修复损坏的后退按钮（访问网站后你需要点击两次后退按钮才能返回）。
  2. 下一步是彻底改造库本身，并消除对 Amir 个人 Javascript 库的需求 - 让它完全使用 jQuery 运行。最终的代码只有大约 1.2kb（相比之下，原始代码为 12kb）。

一个演示和下载如果你有兴趣查看一些有关 jQuery 在实际应用中如何工作的更多示例，请随时使用。享受！

未分类

基于宽度的布局

发表时间： 作者：

今天又有一篇关于 CSS/Javascript 的文章在流传，名为：基于宽度的布局。其前提是页面会根据浏览器窗口的宽度自动调整宽度。文章中附带了一段 38 行的 Javascript 代码（我这么说很宽容），用于完成这项工作。我将为你省去对他们代码的分析，直接在下面展示改进后的代码。

$(window).resize(setWidth);
$(document).ready(setWidth);

function setWidth() {
  var de = document.documentElement;
  var w = (window.innerWidth || (de && de.clientWidth)
    || document.body.clientWidth) < 990 ?"alt":"main";
  $("#wrapper").addClass( w + "wrapper" );
}

可以在 这里找到这段新代码的实时演示。具有讽刺意味的是，他们使用了我写的一段 代码，但没有给我署名。

这段代码中我最喜欢的部分绝对是短路操作。这段代码的原始部分来自 这篇文章。我不知道为什么，但每当我看到包含多个赋值的 IF 语句时，我就会毛骨悚然。因此，以下代码

if (window.innerWidth)
{
	theWidth = window.innerWidth
}
else if (document.documentElement 
  && document.documentElement.clientWidth)
{
	theWidth = document.documentElement.clientWidth
}
else if (document.body)
{
	theWidth = document.body.clientWidth
}

更改为

var de = document.documentElement;
var w = window.innerWidth || (de && de.clientWidth)
  || document.body.clientWidth;

如果你好奇为什么这样做有效，请尝试运行以下语句

alert(1||0); // You get 1
alert(0||2); // You get 2
alert(0||(2&&1)); // You get 1
alert(0||(3&&4)||2); // You get 4

这样你就会对这段（之前）非常冗长的代码中实际上发生的事情有一个更好的了解。