您的位置：首页 > Web前端 > JQuery

Notes on <jQuery in Action> - 5

2012-04-18 22:22 417 查看

Chapter 9: Introducing jQuery UI: themes and effects

9.1 配置与下载jQuery UI

9.2 jQuery的主题与样式设计

9.3 jQuery UI的效果

没错，这个效果指的是动画效果。作者由此介绍了一个很强大的函数effect()。

	Parameters	Returns
effect(type,options,speed,callback)	type (String) The effect to run. One of blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, or transfer. See table 9.1 for details of these effect types. options (Object) Provides the options for the specified effect as defined by the core animate() method (see chapter 5). Additionally, each effect has its own set of options that can be specifiedosome common across multiple effectsoas described in table 9.1. speed (String\|Number) Optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, defaults to normal. callback (Function) An optional callback function invoked for each element after the effect is completed. No arguments are passed to this function, and the function context is set to the element being animated.	The wrapped set.

这个函数的最关键的参数是type，目前这个参数支持十五个值，分别表示十五种动画效果，而针对每个效果，你将要提供的options参数也会有所不同。

Effect name	Effect-specific options
blind	direction: (String) One of horizontal or vertical. If omitted, the default is vertical. mode: (String) One of show or hide (the default).

但是，重要的一点就是，当看了type支持的所有值之后，你会很明显地发现，这个效果同之前一直提及的“缓动引擎”（tweening engine）不是一回事。缓动引擎所做的是将元素的某个可以量化的属性值在一定时间内按照一定的数学公式从某一个值变化到另一个值。

这里effect()提供的效果，是一些相对已经比较复杂的动画，它可以被理解成是用一些通过缓动引擎做出来的属性变化的组合，其中最复杂的就是爆炸效果（explode），除了这个效果，所有的效果都支持easing选项，它用来指定缓动公式。

又到了介绍实验的时候：

在前面的第五章讲到jQuery内核里对于动画的支持，其中最核心最万能的函数是animate()，事实上所有其他的函数提供的动画都可以用它来实现，不过，jQuery内核里的animate()，是不支持对颜色值进行变化的。这个问题在jQuery UI里得到解决，即是说jQuery UI扩展了animate()，另外也扩展了show()，hide()还有toggle()，令它们支持十五种effect，还扩展了addClass()，removeClass()和toggleClass()，令它们支持缓动公式，甚至还增加一个switchClass()函数。

这些函数的功用和它们之间的关系有一点混乱，我尝试用下面的图来说明：

当然这个图其实有一些问题，暂时不管。

先抛开jQuery内核亦或者是jQuery UI的扩展，animate()是一个在缓动属性功用方面的最根本的函数，它是对于动画这一功能实现的最高抽象，通过它可以构建所有其他函数。而effect则是一个只有jQuery UI扩展里有的函数，它是将若干个属性的变化组合在一起来构成一个“预定制”的动画“效果”，通过这个函数，你可以简单地重现这些预先提供的“效果”，可是如果你想要目前这十五种以外的动画效果，你就要自己实现了。

而show()/hide()/toggle()/fadeIn()/fadeOut()/slideUp()/slideDown()/这一类函数，则是预定了将要变化的属性，简单讲，它们是将animate()或effect()函数中的一些参数硬编码后的简化版本，所以最常用到，而在jQuery UI的扩展中它们也可以用来实现复杂的动画效果。

现在来讲下easing参数，这个概念同Actionscript里面的tweener中的easing是一样的，而且支持的值也基本上一致。关于easing的实验：

9.4 高级定位

jQuery UI里提供一个函数position()，来精确调整DOM元素在页面中的位置。

	Parameters	Returns
position(options)	options (Object) Provides the information that specifies how the elements of the wrapped set are to be positioned, as described in table 9.2.

Option	Description

附录部分A

其实在第九章之后还有一些章节。可是我觉得它们既然是在具体地讲某些插件的用法，那就不太重要了，除非你需要用到的时候，才有必要讨论。之所以提及附录的部分，是因为这里有一些信息是我之前不知道的，所以对我而言有价值。

一开始作者介绍了些ECMA标准里Object的基本信息，比如：

1.动态创建属性并用它们来存放信息；

2.引用属性的方式，使用英文句号“.”，或者object[propertyNameExpression]，propertyNameExpression是个字符；

3.创建对象的文本方式：var obj = { prop1:val1, prop2:val2, ...}

下面是重要的部分。

在Javascript的执行环境（或者叫上下文）中，有一个浏览器的解释器负责创建的全局对象，它就是window，而事实上它是所有全局作用域的拥有者，比如你声明一个全局的变量：

var myVariable = 'something';

实际上，解释器做的事情是给window建立一个叫myVariable的属性，给其赋值“something”；所以上面这行代码无异于：

window.myVariable = 'something';

这也是为什么下面的代码正常运行的原因：

myVariable = 'something';

而全局函数亦是如此，下面三种代码实际上是相等的：

function hello(){ alert('Hi there!'); }

hello = function(){ alert('Hi there!'); }

window.hello = function(){ alert('Hi there!'); }

而在ECMA标准中，函数也是作为对象被实现的，这解释了为何函数可以作为参数被传递给函数，并且被回调。

但是，ECMA的函数实现机制有个与高级语言迥然不同的地方，就是它的闭包（closure），或者叫上下文（context），简单讲就是在函数体内this变量所指向的内容。

Function作为类，它有两个方法：call()和apply()。

这两个方法接收的第一个参数都是一个对象object，这个对象将成为函数运行时的闭包，或者说就是this指向的东西，通过这个办法，你可以动态指定一个函数运行时的闭包。而jQuery很大程度上利用了这个特点。下面是一段书中示例代码：

<html>
<head>
<title>Function Context Example</title>
<script>
var o1 = {handle:'o1'};
var o2 = {handle:'o2'};
var o3 = {handle:'o3'};

window.handle = 'window';

function whoAmI() {
return this.handle;
}

o1.identifyMe = whoAmI;

alert(whoAmI());
alert(o1.identifyMe());
alert(whoAmI.call(o2));
alert(whoAmI.apply(o3));
</script>
</head>
<body>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Notes on &lt;jQuery in Action&gt; - 5

Notes on <jQuery in Action> - 5