script.aculo.us的效果

script.aculo.us的效果

The script.aculo.us Effects

一旦加载完成，script.aculo.us会拥有一些非常漂亮的效果：拖拽、自动完成、滑块控制以及列表排序能力。它还拥有一套视觉效果，也就是script.aculo.us所指的“组合效果（combination effects）”，你可以通过名称为Effect的对象来使用它们。表3-1列举了这个对象中的可用效果。

表3-1：script.aculo.us的视觉效果

效果名称	视觉效果
Effect.Appear	显示隐藏元素。
Effect.Fade	通过从视图中淡化，而逐渐隐藏一个元素。
Effect.BlindDown	向下滚动元素，由上至下移动。
Effect.BlindUp	向上滚动元素，由下至上移动。
Effect.SwitchOff	在将图片从视图中删除之前，闪烁该图片。
Effect.SlideDown	由上至下滑动元素。元素内容和容器一起向下滑动。
Effect.SlideUp	由下至上滑动元素。元素内容和容器一起向上滑动。

效果名称	视觉效果
Effect.DropOut	在隐藏前模拟元素的删除效果。
Effect.Shake	元素的晃动。
Effect.Pulsate	快速地淡入和淡出元素，建立一个闪烁效果。
Effect.Squish	向左上角缩小元素，直至消失。
Effect.Fold	向上滚动元素（BlindUp），之后水平收起。
Effect.Grow	从无到有，由小到大地延伸元素。
Effect.Shrink	向右下角缩小元素，直至消失。
Effect.Highlight	通常以黄色闪烁亮显某元素。很多Ajax开发者也称其为淡化。

示例3-3是基于示例3-2所示的同样的代码。在这里，更新配方元素时，为了亮显突出元素内容已经改变，我使用了一个我认为非常合适的效果，即script.aculo.us的Shake（抖动）效果。由于这个页面相当长，示例中的代码仅列出了变更的函数。但是，切记，这个页面必须以HTML而不是以XHTML提供，因为大多数script.aculo.us新版本不支持XHTML。

示例3-3：试用script.aculo.us库

function printRecipe() {

      // 获得饮料名称和配方空间对象
var drinkName = $F('drink');

      // 搜索饮料名称
var drinkObj = recipeObj.drinks.find(function(drink) {
if (drink.drink == drinkName) {
return drink;
}
});

      if (!drinkObj) return;

      var str = "<h3>" + drinkObj.makings.title + "</h3>";
var ingredients = drinkObj.makings.ingredients.collect(function(ingredient) {
return ingredient.ingredient;
});
str += ingredients.join('<br />');
str += "<br /><br />" + drinkObj.makings.instruction;

      if ($('recipe'))
$('recipe').remove('recipe');
var recipe = document.createElement('div');
Element.extend(recipe);
recipe.id = 'recipe';
recipe.addClassName('recipe'); 

recipe = recipe.update(str);
document.body.appendChild(recipe);
new Effect.Shake(recipe);
}

在本示例中，所有的script.aculo.us库都被加载进来以告知脚本库会使页面加载延迟多少时间。即使是宽带，这种延迟也是很明显的。

在这个示例中，当获取饮料配方后，显示配方的块会有一个晃动的效果。这个效果并没有为应用程序的功能添加有实际意义的东西，它像在Ajax中使用的很多效果一样，只是一个视觉享受罢了。只要这个效果没有浪费太长的加载时间而给用户带来负面的体验，这样做就会提供很好的反馈。

在第4章，以及后面的第6章，我会演示如何使用淡化和刚才讲过的效果来为Web页面读者提供反馈，在Ajax更新和删除成功后，非常适合使用这些效果。

警告：注意在script.aculo.us效果前面的new的用法，对象的示例化也是效果的一部分，但是它可能不太明显，或者说是不太直观。忘记使用new对人们来说非常普遍。