每月档案：2006年2月

未分类

AJAX 新特效等等！

发布于 作者

新的 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 重塑

发布于 作者

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

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

  1. 第一步是让 greybox 以非侵入式的方式工作（他们将 javascript 嵌入到页面中使其工作）并修复损坏的后退按钮（访问网站后需要按两次后退）。
  2. 下一步是完全重构库本身，并删除对 Amir 的个人 Javascript 库的需求——使其完全使用 jQuery 运行。生成的代码只有大约 1.2kb（与原始代码的 12kb 相比）。

A演示和下载如果您有兴趣查看更多 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

您将更好地了解正在发生的事情（之前）这段非常冗长的代码中。