Plazes 网站重新设计

发布于 作者

最近,Plazes(一个流行的地理位置 Web 应用程序)对其服务进行了重新设计。如果你仔细看看它如何实现这些酷炫的效果,你会发现它在幕后充分利用了 jQuery。

Plazes 人员页面上可以看到它的实际应用。该页面的目的是让你浏览并查看其他连接的人以及他们的当前位置。这个页面有许多你可以在其中玩耍的酷炫功能。

  • 尝试移动/缩放地图 - 屏幕左侧的人员列表将动态更改并重新加载。
  • 在地图顶部的输入框中,输入部分城市名称,它将自动完成最相关的名称。
  • 点击左侧菜单中的用户,将带你到他们在地图上的位置。

总而言之,这是一个很好的例子,展示了 jQuery、Google 地图以及一个优秀的开发团队如何将它们整合在一起。

Firebug 调试器

发布于 作者

Joe Hewitt 正在更新他出色的Firebug Firefox 扩展。如果你不熟悉它,你应该了解它。它提供了详细的每页错误跟踪、XMLHTTPRequest 跟踪、DOM 导航 - 所有 JavaScript 开发人员需要的功能。

Firebug 的新版本添加了一个功能:Javascript 调试。这将允许你在代码中设置断点,暂停应用程序,重新启动它,以及各种酷炫的功能。如果你对此感兴趣,你应该联系 Joe,因为他需要测试人员来帮助他完成这个工作。

Thickbox

发布于 作者

Cody Lindley 刚刚发布了Lightbox/Greybox 的一个全新的版本,名为Thickbox。这个版本在其他库的基础上提供了一些很棒的附加功能。具体来说,这个版本是完全非侵入性的 - 它使用自然的 href、src 和 title 属性来填充框,并在弹出时显示。即使你没有启用 Javascript,它仍然能正常运行。它还能够动态加载 HTML 块并在覆盖层中显示它。总而言之,这是一个很棒的版本,最重要的是它使用jQuery 将所有内容整合在一起。所以,看看它,玩玩它,并让 Cody 知道你对此的看法!

jQuery 可视化地图

发布于 作者

Jeffery Chiang 最近向 jQuery 邮件列表提交了一个关于 jQuery 库的优秀可视化表示。它显示了所有不同的插件以及它们支持的方法/功能(借鉴了jQuery 文档)。类似的图表也已完成 Prototype 库 - 但它们都没有像 jQuery 一样有酷炫的 Devo 帽子与之搭配。如果有人喜欢冒险,使用这张地图的样式可以对文档页面进行很棒的重新设计。

赢得 Opera 小部件使用 jQuery

发布于 作者

Audun Wilhelmsen (skyfex) 是一个居住在挪威的 jQuery 用户,他最近参加了The Gathering,这是世界上最大的计算机活动之一。在那里,他参加了Opera 赞助的小部件开发竞赛。新的Opera 9 Beta 有一个完整的小部件框架,它肯定会挑战 Yahoo! 小部件和 OSX Dashboard。

在评委完成最终分析后,他们决定Audun 获胜。这不仅对他来说是个好消息(他赢得了价值 6000 美元的超级游戏机),而且也表明 jQuery 在快速 Javascript 开发方面是多么有效。

Audun 的获奖应用程序被称为KnowledgeMate。你在一个字段中输入你的搜索内容,它会同时搜索多个搜索引擎(包括图片搜索引擎),并返回相关结果。它速度很快,看起来很锐利,而且非常方便。我强烈建议下载新的 Opera beta 版,试一试这个小部件,即使只是为了其他目的。恭喜 Audun!

手风琴、值、onComplete 和错误修复!

发布于 作者

这是过去一周左右发布的所有修复和新功能。我很快就会在文档中添加更多关于它们的详细信息。

新的演示

新功能

  • empty() - 你可以删除元素的所有子节点。
    // Deletes the contents of all DIV elements
    $("div").empty();
  • is(Expression) - 测试匹配的元素是否匹配该表达式。等效于:$().filter(Expression).size() > 0。
    // Tests to see if a DIV has a class of test
    if ( $("div").is(".test") ) {
      alert( "test div found!" );
    }
  • html() - 如果你没有为 html() 方法提供任何参数,它将返回第一个元素的 innerHTML。
    // Copy the HTML contents into a Textarea
    $("textarea").val( $("#block").html() );
  • val() - 与 html() 方法相同,但用于 value 参数(如果提供参数,它会设置值,没有参数 - 返回第一个值)。
    // Copy a value from one input to another
    $("input#hidden").val( $("input#name").val() );
  • $.postXML() 和 $.getXML - 对于 AJAX 插件,与 $.post() 和 $.get() 相同,但强制尝试获取返回的 XML,无论 Content-Type 如何。
    // Get the XML contents of a file
    $.getXML("file.xml",function(xml){
      $(xml).find("title") // ...
    });
  • 为动画添加了新的“正常”速度(400ms)。
    // Slide a DIV in at normal speed
    $("div").slideDown("normal");
  • 现在为动画设置onComplete 处理程序变得容易多了。
    $("div").show("slow",function(){
      alert("all done!");
    });

错误修复

  • Opera 和 AJAX 插件现在可以很好地协同工作。
  • 已解决附加文本节点的问题。
  • 已优化 IE 和 AJAX 插件的处理。
  • 已修复 #id 表达式通过标签检索的问题。
  • 已实现对包含破折号的类进行删除的修复。
  • 已修复将事件绑定到动态创建的 HTML 的错误。
  • 已修复 show() 默认情况下无法显示设置为 none 的元素的错误。
  • 已解决另一个 Prototype 1.3 和 jQuery 错误。
  • 已解决动画对 overflow 属性的破坏。
  • 最后:已解决臭名昭著的高度/宽度自动动画错误!

jQuery 每周汇总

发布于 作者

Mark Panay 撰写了关于面向 Web 设计人员的 JQuery 的后续文章,其前一篇为面向 Web 设计人员的 JQuery。这一次,他强调保持内容简洁,并使用 jQuery 来显示博客文章和文章的完整内容。这与我在我的最新项目Ouioo 中使用的技术非常相似。

此外,Mark 推出了一个新的音乐初创公司,其网站使用了 jQuery fx 和 AJAX。引用 Mark 的话:

“[jQuery] 取代了之前使用的“行为、原型和 AHAH”脚本,因此节省了我大约 150k… :) 并使代码更简洁、更容易修改。它也只花了 30 分钟。

最后,Frank Quednau 发布了一篇博客文章和一个jQuery 查询演示。如果你好奇 jQuery 究竟能够查询什么 - 这是一个很好的沙盒,你可以进入其中玩一些东西。

AJAX 新的 FX 等等!

发布于 作者

针对jQuery 的新AJAX 插件 已准备就绪 - 如果你正在使用最新代码,它已经集成进来了。除此之外,还有几个新的效果 可以享受:fadeIn、fadeOut 和 center。我还修复了几个错误,这些错误也已包含在这个版本中。

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

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

Bug 修复,AJAX 即将到来!

发布于 作者

这里还没有提到,但 jQuery IRC 频道 非常热闹——我们至少有两个人一直在那里。我们一直在忙于寻找 bug,而我一直忙于修复它们,以下是对过去几天修复内容的快速概述。

  • hide()/show() 操作现在在所有浏览器中都能一致地工作,即使对于奇怪的用例也是如此。
  • 已经处理了大量 Prototype 1.3 + jQuery 和 Prototype 1.4 + jQuery 的 bug,现在使用 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 方式相比,代码的可理解性要高得多。