At the Forge - Scriptaculous | Linux Journal

软件

作者：Reuven M. Lerner

于 2007 年 2 月 1 日

Ajax 是一种热门的新型 Web 开发范例，它使用 JavaScript 发送和处理异步 HTTP 请求。在过去的几个月中，本专栏研究了生成和处理 Ajax 调用的不同方法。最复杂的方法是自己完成，创建 XMLHttpRequest 对象，然后使用它向用户的浏览器发送请求，并指定哪个 JavaScript 函数将处理响应。上个月，我们展示了通过使用 Prototype（一个 JavaScript 库，其中包含许多 JavaScript 程序员有用的快捷方式和实用程序函数）可以大大简化我们的生活。

好消息是 Prototype 确实使 JavaScript 编程更容易、更直接。但是，人们最想用 JavaScript 做的事情之一是创建更灵活的 GUI。现在 Web 应用程序越来越像桌面应用程序，尤其如此；用户期望拥有与非浏览器应用程序相同的反馈和控制感。

正如我们在 Ajax 中看到的那样，有一些方法可以自行创建和重用这些行为。但是，当有库可以为您处理此类任务时，为什么要这样做呢？其中几个是 Scriptaculous、MoochiKit 和 Dojo。（Dojo 实际上是一个完整的端到端 JavaScript 库；我希望在本专栏的未来文章中对其进行探讨。）本月，我们来看看 Scriptaculous，这是一个由 Thomas Fuchs 编写的开源库。Scriptaculous 可以轻松地美化我们的 HTML 文件，而无需深入研究底层的 JavaScript。

Scriptaculous 基础

安装 Scriptaculous 非常容易。下载最新版本的 Scriptaculous (script.aculo.us)，并将包含的六个 JavaScript 文件（在 src 目录中）安装到 Web 服务器的文档根目录中的某个位置。

实际上，安装 Scriptaculous 甚至可以比这更简单。如果您使用最新版本的 Ruby on Rails，则 Scriptaculous 和 Prototype 已经安装。有关如何直接使用这些库以及如何从 Ruby 代码中使用这些库的说明，请参阅 Rails 文档。

请注意，我在本文中使用的 Scriptaculous 1.6.5 需要 Prototype 1.5 或更高版本。尽管 Prototype 1.5 很可能在本专栏发表时发布，但我目前依赖于 Prototype 1.5 RC1。因此，我在此处描述的功能与最终发行版之间可能存在一些差异。

为了使用 Scriptaculous，您需要在 HTML 页面中包含两个 script 标签，以加载 Prototype，然后再加载 Scriptaculous

<script src="/javascripts/prototype.js"
type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>

简单效果

那么，您可能想用 Scriptaculous 做什么呢？其最常见的用途之一是创建视觉效果。每个效果都定义为 Effect 对象中的一个方法。您可以通过以下方式创建效果

new Effect.EffectName('id')

其中 EffectName 是您想要的效果的名称，id 是效果将发生的 HTML 元素的 ID。例如，如果我们有以下标题

<h2 id="headline">The headline</h2>

我们可以通过调用使其淡出

new Effect.Fade('headline');

当然，只有在特定事件发生时才应该发生这种情况。列表 1 包含一个简单的 HTML 文件 effects.html，其中包含两个标记为“显示标题”和“淡出标题”的按钮。单击第一个按钮会在 ID 为“headline”的节点上调用 Effect.Appear。请注意，我们没有将节点本身传递给 Effect.Fade，而是传递了 ID。Effect.Fade 使用 Prototype 的 $() 函数来检索具有该 ID 的节点。

列表 1. effects.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head><title>Special effects</title>

    <script src="/javascripts/prototype.js"
type="text/javascript"></script>
    <script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>
  </head>

  <body>
    <h2 id="headline">Welcome</h2>
    <p>Welcome to the page of effects!</p>
    <p><input type="button" value="Fade headline" onclick="new
Effect.Fade('headline')" /></p>
    <p><input type="button" value="Appear headline" onclick="new
Effect.Appear('headline')" /></p>

  </body>
</html>

为了使标题淡出，我们设置了以下事件处理程序

onclick="new Effect.Fade('headline')"

每个效果都有许多设置，每个设置都由 Scriptaculous 给出一个默认值。要覆盖一个或多个这些默认值，请在调用中传递一个或多个

onclick="new Effect.Fade('headline', {delay: 2, duration: 10})"

在某些情况下，例如列表 1 中的显示/淡出二人组，有两个按钮似乎有点傻。毕竟，如果我单击淡出两次会发生什么？更合理的是有一个按钮，当标题关闭时打开标题，反之亦然。Scriptaculous 通过切换效果支持这一点。例如，我们可以删除一个按钮，并为第二个按钮提供一个看起来像这样的事件处理程序

onclick="new Effect.toggle('headline', 'appear')"

现在，单击该按钮会切换标题的可见性，使用显示和淡出效果来打开和关闭标题。我们也可以对盲效果（BlindUp 和 BlindDown）和滑动效果（SlideUp 和 SlideDown）执行相同的操作。我们还可以将切换与前面显示的参数结合起来

onclick="new Effect.toggle('headline', 'appear',
{delay: 2, duration: 10})"

只有少数效果成对出现。一些效果仅用于删除文本，如下所示

new Effect.Fold("headline")

其他效果旨在引起用户的注意。例如，我们可以通过执行以下操作来突出显示我们的标题

new Effect.Highlight("headline")

自动完成

效果当然是 Scriptaculous 的重要且令人印象深刻的一部分；该库附带了许多效果，并且有很多方法可以组合和调用它们。但是，Scriptaculous 提供的不仅仅是一堆效果。它还包括一些 JavaScript 程序员可能想要的用户级功能。

Google Suggest（及其在 Firefox 2.0 中的同类）推广的一个示例是自动完成文本字段。这种文本字段允许您输入任何想要的内容，但是如果您到目前为止输入的内容与已知的文本字符串匹配，则会为您提供完成它的机会。这在许多方面类似于长期以来在 Windows 系统上流行的组合框小部件，但 Web 应用程序无法使用。（一些 Scriptaculous 用户创建了 Autocompleter 类的派生类，这些派生类更类似于组合框。）

Scriptaculous 附带两种不同类型的自动完成文本字段，它们仅在完成列表的填充方式上有所不同。在第一种情况下，称为 Autocompleter.Local，匹配列表在 JavaScript 中设置。相关的文本字段 Ajax.Autocompleter 使用 Ajax 从远程 HTTP 服务器检索匹配列表。两者在精神上非常相似，为了简单起见，我在此处仅演示 Autocompleter.Local。

为了使用 Autocompleter.Local，我们首先创建一个文本字段，就像我们在 HTML 表单中一样

<input type="text" id="distro" name="distro_text_field"
   autocomplete="off" />

请注意，我已包含设置autocomplete="off"在上面的字段中。此处将 autocomplete 属性（仅由 Microsoft 的 Internet Explorer 使用）设置为 off，以确保 IE 用户不会因决斗完成系统而感到不快。

接下来，我们创建一个带有 ID 属性的 <div> 部分。此外，我们将 style 属性设置为保持 div 隐藏，直到我们修改其样式

<div id="distro_complete" style="display:none"></div>

最后，我们添加一些 JavaScript 来创建一个新的 Autocompleter.Local 对象

<script type="text/javascript">
    new Autocompleter.Local('distro', 'distro_complete',
    ['Red Hat', 'Fedora Core', 'Debian', 'Gentoo', 'Knoppix',
     'Ubuntu', 'Kubuntu'], { });
</script>

Autocompleter.Local 的构造函数接受四个参数：文本字段的 ID、我们将插入完成项的 div 的 ID、包含完成字符串的数组和一组选项（当前为空）。如果您尝试将此代码放在文档的 <head> 中，它将因奇怪的错误而失败，因为文本字段和 div 必须在代码执行之前存在。

通过将以上内容包含在 HTML 页面中（如列表 2 中所示），您为自动完成工作奠定了基础。每当用户加载页面并在文本字段中键入字母时，Scriptaculous 都会等待 0.4 秒的非活动时间。如果用户没有键入，并且如果文本字段已包含一个或多个字符，则 Autocompleter.Local 会尝试从当前列表中查找匹配项。如果找到匹配项，它将填写文本字段的其余部分。

列表 2. complete.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head><title>Special effects</title>

    <script src="/javascripts/prototype.js"
type="text/javascript"></script>
    <script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>
  </head>

  <body>
    <h2>Enter your favorite distribution</h2>
    <p><input type="text" id="distro" name="distro_text_field"
autocomplete="off" /></p>
    <div class="auto_complete" id="distro_complete"
style="display:none"></div>

    <script type="text/javascript">
        new Autocompleter.Local('distro', 'distro_complete', ['Red Hat',
'Fedora Core', 'Debian', 'Gentoo', 'Knoppix', 'Ubuntu', 'Kubuntu'], { });
    </script>

  </body>
</html>

如果找到多个匹配项（就像在我们的示例中键入 K 的用户会发生的情况一样，它同时匹配 Kubuntu 和 Knoppix），系统会显示一个选项菜单，用户可以从中通过键入或单击来选择。

结论

Protoype 是一个旨在解决许多程序员需求的 JavaScript 库。但是，Prototype 的功能仅扩展到程序员；它不提供任何直接的 GUI 改进。鉴于 JavaScript 主要用于处理 Web 应用程序中的 GUI，因此毫不奇怪，有几个库构建在 Prototype 之上以处理此类任务。Scriptaculous 似乎是其中最著名的库之一，根据我的经验，这是有充分理由的。

Scriptaculous 有几个我们本月没有探讨的功能，包括拖放和 JavaScript 单元测试。即使对于无意创建 GUI 效果的 JavaScript 程序员来说，最后一项也可能值得注意。

本文的资源： /article/9505。

Reuven M. Lerner，一位长期的 Web/数据库顾问，是伊利诺伊州埃文斯顿西北大学学习科学博士候选人。他目前与妻子和三个孩子住在伊利诺伊州斯科基。您可以在 altneuland.lerner.co.il 阅读他的博客。

加载 Disqus 评论