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

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

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像素。…

Mootools 1.2教程(9)——输入过滤第二部分(字符串)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 9 – Input Filtering Part II (Strings)

输入过滤第二部分(字符串)

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

字符串函数

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

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

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

var my_text_variable

在JavaScript应用中使用Flash来存储本地数据

最近在Google Reader里面看到的,一日本人在blog上提出来的,他还有一个示例页面,这里是Demo下载地址。不过在看到这篇文章之前,我就已经在我们的项目(PPLive iKan 1.0)中用过了,其中的观看历史记录就是使用的Flash来进行存取的。

其实Flash在JavaScript应用程序中当“幕后英雄”的例子早就有过了,最先是为了解决用JavaScript复制文本的问题,用Flash这可以轻而易举地解决跨浏览器问题。我之所以想到用Flash来存储观看记录是因为我觉得用Flash来保存更有优势:

  • 存储方式可靠

JavaScript中存储本地数据的常见方式是使用Cookie,还一种方式是使用UserData。写Cookie的方式也很可靠,读写都非常的容易,但是UserData有时候却不是那么可靠,不知道为什么有时候清理Cookie都会带来莫名奇妙的问题,造成UserData无法写入或者无法读取的情况,很诡异。…

QQ邮箱的Web QQ聊天

昨天开QQ邮箱的时候,发现联系人旁边多了个小图:

点开一看,还真是个Web QQ:

展开,鼠标移上去可以看到联系人信息:

找个人聊天试试,自己用另外一个号登陆了,版本是QQ 2009 Preview 3,打开一看,发现提示不支持,囧:

再找个人,发现也不支持,看来那人也用的是QQ 2009,不过她是隐身的,居然提示不支持,直接暴露了隐身状态,再囧:

好了,总算找到个人,没有提示不支持,发消息,居然弹出个提示,要求输入验证码,请允许我再囧一次:

还好,输入验证码以后就可以正常聊天了,返回的消息没有发到我的QQ客户端上,很好:

不聊的时候可以收起来,成这样:

有消息来的时候会有消息提示音,这个地方会闪烁,浏览器的标题栏也会闪烁:

不过这个Web版的QQ支持IE浏览器和Firefox,不支持Chrome……看了一下,基本上是每隔15秒向服务器轮询一次消息。…

Mootools 1.2教程(8)——输入过滤第一部分(数字)

原文地址:《MooTools 1.2系列教程目录》

今天我们来看看MooTools是怎样使得过滤用户输入变得非常轻松。我们今天将讲一些基本的数字过滤,明天再更深入地讲讲字符串过滤。

注意:JavaScript中的输入过滤只是为了保证(客户端)代码顺利执行,并不能替代服务器端的字符串过滤来保护你的应用程序不被注入攻击。

在第四讲的最后的一个例子中,我们从文本输入框获取RGB值,然后使用它们来改变页面背景色,今天我们首先来看看那个例子的部分代码,并以此展开我们这一讲。…

Mootools 1.2教程(7)——设置和获取样式表属性

原文地址:30 Days of Mootools 1.2 Tutorials – Day 7 – Set and Get Style Properties

设置和获取样式表属性

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

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

欢迎开始这一系列的教程的第七讲。今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权。处理样式非常简单,不过今天我们要做一些调整。例如,我们要介绍键值对(key-value pair)对象。我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样。从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念。如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以随意地问我任何问题。…

Mootools 1.2教程(6)——操纵HTML DOM元素

原文地址:30 Days of Mootools 1.2 Tutorials – Day 6 – Manipulating HTML

通过Mootools 1.2来操纵HTML DOM元素

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

如果你还没有准备好,请阅读以前的教程,这里是《MooTools 1.2系列教程目录》

我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数,这些都非常容易。

基本方法

.get();

这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:

// 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……)

Mootools 1.2系列教程目录

还是需要一个目录,那就做一个吧!

MooTools是近来仅次于jQuery流行的JavaScript框架,也是我一直比较喜欢的开发框架,最近也正在写MooTools 1.2的注释文档。本来自己也想写一些关于MooTools的教程来着,但是自己很懒,又担心自己写的不好,反倒误了初学者。正好今天无意在国外的论坛上看到这么一个blog,发现有这么一系列的教程,写的很好,很适合初学者和对MooTools完全不熟悉的人,于是决定全部中文化。

另外,此翻译版本已获得原作者支持,在其第一篇文章中已有本文链接。

Mootools 1.2教程(5)——事件处理

原文地址:30 Days of Mootools 1.2 Tutorials – Day 5 – Event Handling

MooTools 1.2中的事件处理

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

如果你还没有准备好,请阅读以前的教程,这里是《MooTools 1.2系列教程目录》

今天我们开始第五讲,在上一讲(《Mootools 1.2教程(4)——函数》)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似,事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果。先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件。

左键单击事件

左键单击事件是web开发中最常见的事件。超链接识别点击事件,然后把你带到另外一个URL地址。MooTools能够识别其他DOM元素上的点击事件,在设计和功能上给了你极大的灵活性。给一个元素添加一个点击事件的第一步:…