Fdream's Blog
专注于WEB前端开发
Powered by Google
17 8 9 10 11 12 13 14 1584

冬天说来就来了,周五还在公司里穿短袖,今天在家里却忍不住套了两件外套,居然还觉得冷……虽然是寒冬,可还是给blog换了个绿色的皮肤:

另外,有哪位用IE 6的同学帮忙注意一下有哪些地方不正常,请在此文后留言说明,谢谢!

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

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

基本用法

test()方法

它的简单在于,一个正则表达式可以是一个你想要匹配的简单字符串。尽管JavaScript本身已经为RegExp对象提供了它自己的test()方法,MooTools的test()方法更好用一些,在JavaScript中使用正则表达式也更轻松一些。

对于初学者,我们先看一下test()方法最简单的用法,在一个大的字符串中查找特定的字符串...

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

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

基本用法

Drag.Move

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

参考代码: [复制代码] [保存代码]

var myDrag = new Drag.Move(dragElement, {
    // Drag.Move的选项
    droppables: dropElement,
    container: dragContainer,
    // Drag的选项
    handle: dragHandle,
    // Drag.Move 的事件...
});

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

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

Fx.Morph

创建一个新的Fx.Morph

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

参考代码: [复制代码] [保存代码]

// 首先,把我们的元素赋值给一个变量
var morphElement = $('morph_element');
 
// 现在,我们创建一个新的形变
var morphObject = new Fx.Morph(morphElement);

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');
}

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

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

Tween的快捷方法

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

.tween();

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

参考代码: [复制代码] [保存代码]

// 创建一个新的函数
var tweenerFunction  = function() {
    // 选中你要使用渐变的元素
    // 然后加上.tween
    // 最后声明你要变化到的属性和值
    $('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
    // 在这里给一个按钮添加一个事件
    // 当点击时初始化这个渐变
    // 并调用我们的渐变函数
    $('tween_button').addEvent('click', tweenerFunction);
});

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": "brett@newInstance.com" }';
// 转换为对象
var obj:Object = JSON.decode(str)  as  Object;

不过,就像我说的,这个类很不完美,因为它对你的JSON数据格式要求太严格太BT了,以下几点都是不允许的...

字符串函数

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

今天我们来看一看MooTools给我们提供的额外的一些处理字符函数。这只是MooTools字符串处理中的一部分,并不包含一些神秘的函数(比如toCamelCase())和使用正则表达式处理字符串的函数。我们会在以后另外用一讲来将一下正则表达式的基本知识和在MooTools下的使用。

在开始之前,我想先花一点时间来看一下字符串函数是怎么调用的。在我的例子中,我是在字符串变量上面直接调用这个方法的,就像下面的这样:

参考代码: [复制代码] [保存代码]

var my_text_variable = "Heres some text";
//  结果                 字符串变量        方法名
var result_of_function = my_text_variable.someStringFunction();

但是我这样写只是为了能够更清楚地解释它,你应该了解到这些字符串函数也可以直接在字符串上调用,而不需要声明一个变量,就像这样...

17 8 9 10 11 12 13 14 1584
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 0.5937614 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号