Mootools 1.2教程(15)——滚动条(Slider)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 15 – Sliders

MooTools 1.2的滚动条(Slider)

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

到现在为止,初始化这些MooTools插件对象就会开始变得越来越熟悉。滚动条(Slider)没有任何不同,你要创建一个新的滚动条,定义滚动条和滑块相关的元素,然后设置你的选项,再创建一些回调事件的控制函数。尽管滚动条(Slider)遵循这个熟悉的模式,但是任然还有一点特殊的地方。

基本用法

创建一个新的滚动条(Slider)对象

我们首先从HTML和CSS开始。基本的想法是创建一个滚动条的div,因此是一个长的长方形(长度取决于我们用滚动条做什么),还有一个子元素作为滑块。…

Mootools 1.2教程(14)——定时器和哈希简介

原文地址:30 Days of Mootools 1.2 Tutorials – Day 14 – Periodical and Intro to Hashes

MooTools 1.2中的定时器和Hash对象

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

在今天的教程中,我们将关注两块内容:第一个就是.periodical();方法,然后我们再对hash做一个简介。定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面,hash则是键值对(key/value)的集合。如果你对hash还不熟悉现在也不要着急——我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接。就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用。…

Silverlight VS Flash,谁更强?

Silverlight和Flash,到底谁更强?谁更有优势?很多初接触Silverlight和Flash的人总是会问这个问题,因为它们在表面看来确实很像,在更深层的应用来看,依然可以异曲同工。当然了,现在在3D特效、P2P流媒体方面,最新的Flash Player 10仍然以很大的优势处于领先地位。

如果你很犹豫,你不知道选择什么好,或者你对其中的Flash或者Silverlight有所顾忌,你可以看一看这个强人的blog:分别用flash和Silverlight写了很多一样的效果,你可以进行对比。这个上面写的很多效果都很酷,另外附有源文件下载,也是很不错的学习材料,值得一看。

当然了,上面的投票并不一定可靠,请依靠自己的大脑,相信你自己的眼睛!我之所以这么说,因为这个blog的文章会同时发表在Silverlight的官方网站上,所以请相信你自己的判断!

不管怎样,不可否认的是,Silverlight是Microsoft的一个重要战略产品,在目前看来,它的发展速度很迅猛,在许多基本的、常见的应用中已经不逊色于Adobe的Flash,未来会是怎样的一个形式还很难说。…

Mootools 1.2教程(13)——正则表达式

原文地址:30 Days of Mootools 1.2 Tutorials – Day 13 – Regular Expressions

MooTools和正则表达式

请尊重个人劳动,转载请注明出处:http://fdream.net, 译者:Fdream

如果你还没有准备好开始这一讲,我建议你先看这一系列的教程的前面一部分,这里是《MooTools 1.2系列教程目录》

今天我们将先简要地看一下正则表达式,然后再看一下MooTools提供的一些让正则表达式更容易使用的功能。如果你还不熟悉怎么使用正则表达式(regular expression(regex)),我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接,尤其是文章结尾“更多学习”部分的链接。我们今天只是讲一讲正则表达式最基本的用法,正则表达式能做的远远超过我们今天所讲的内容。

基本用法

test()方法

它的简单在于,一个正则表达式可以是一个你想要匹配的简单字符串。尽管JavaScript本身已经为…

Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放

原文地址:30 Days of Mootools 1.2 Tutorials – Day 12 – Drag and Drop using Drag.Move

使用MooTools 1.2中的Drag.Move来实现拖放

请尊重个人劳动,转载请注明出处:http://fdream.net, 译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天我们开始第十二讲,今天我们将仔细看一下Drag.Move——一个很强大的MooTools类,它可以让你给你的web应用添加拖放功能。它的使用和我们见过的其他的插件类似:首先你使用“new”关键字来创建一个Drag.Move对象并赋值给一个变量,然后你再定义你的选项和事件。这就是全部要做的事情,不过你一定要注意一下下面的例子中描述的IE的CSS怪异现象。

基本用法

Drag.Move

创建你自己的拖动对象非常的容易。稍微看一下下面的例子就行了。注意一下我们是怎么把我们的Drag.Move对象的选项和事件从我们的Drag选项和事件中分离出来的。Drag.Move类扩展了Drag类,因此它可以接受Drag类的选项和事件。今天我们并不打算特别地讲一讲Drag类,不过我们还是要研究一下一些有用的选项和事件。看一下下面的代码,然后学习一下其中的细节。…

Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件

原文地址:30 Days of Mootools 1.2 Tutorials – Day 11 – Using Fx.Morph, Fx Options and Fx Events

MooTools 1.2的Fx.Morph、Fx选项和Fx事件

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天,我们继续探索一下这个库的Fx部分,我们将学习如何使用Fx.Morph(它从本质上可以让你同时渐变多个样式表属性),然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项,最后我们将看看如何使用Fx事件,譬如“onComplete”和“onStart”。通过这些选项和事件,我们可以获得更好的控制权来控制形变动画。

Fx.Morph

创建一个新的Fx.Morph

初始化一个新的形变和创建一个新的渐变很类似,除了你要指定多个样式属性以外。…

JavaScript类型转换太变态,慎用

JavaScript的是弱类型的,但是在很多操作中,它会自动进行相应的类型转换,可能很多人都知道下面这样的变态类型转换:

// 下面这个等于80.8
alert('88.8' - 8);
// 下面这个等于'88.88'
alert('88.8' + 8)

上面的这个很好理解,JavaScript在做减法运算时,会自动把字符串转换为Number,在做加法时,只要是和字符串相加,那么肯定会把数字转换为字符串。但是,但是很少有人知道下面这样变态的类型转换:

var x = '0E8888';
alert(x == 0);        // 这个是true
if (x >= 0) {
    alert('x >= 0');  // 这个也是true
}
if (x < 0) {
    alert('x < 0');
}

如果说我们这样理解:在做比较运算时,会自动把字符串转换为数字,所以’0E8888’被转换为0,所以上面的结果没有任何问题。那么下面的就没办法解释了:…

Mootools 1.2教程(10)——Fx.Tween的使用

原文地址:30 Days of Mootools 1.2 Tutorials – Day 10 – Using FX.Tween

MooTools 1.2的渐变

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天我们开始第三讲,我们今天主要看一下Fx.Tween。和我们看到的其他的MooTools函数一样,这些方法使用起来都非常简单,但是功能都很强大。Tween可以让你添加那些极“炫”的效果——可以很平滑地发生形变动画,从而改善你的用户体验。

Tween的快捷方法

我们通常都从“基本知识”入手,不过MooTools 1.2只为渐变(tween)提供了这样极其出色的快捷方法,它们使用起来都极其简单以至于我忍不住要从这里开始。

.tween();

一个渐变(tween)是一个在两个样式属性值之间的平滑的变化。举个例子,通过渐变(tween)你可以把div的宽度(width)平滑地由100像素变化为300像素。…

Adobe的JSON转换类还不够完美

JSON格式的数据还是很方便的,在JavaScript中使用非常广泛。因此在Flash和JavaScript的交互中,使用JSON格式把数据传递给Flash也是一个很不错的选择。不过用AS3(ActionScript 3)来解析JSON是个麻烦的事情,还有有Adobe有相关的API——有一个com.adobe.serialization.json包,可以用来解析JSON格式的数据,并转换成和JS中类似的对象。

这个包使用起来非常简单,如下:

// 这是JSON格式的数据
var str:String = '{ "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }';
// 转换为对象
var obj:Object