Mootools 1.2教程(20)——选项卡效果(Tabs)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 20 – A Few Mootools Tabs

项目——创建选项卡效果的几种方式

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

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

今天将不只是受限于这个库和一些基本的编程知识,我们来做一个简单的小项目。通过使用我们目前为止已经学过的一些知识,有几种方式来创建当鼠标移上去或者点击时显示相应内容的tab。

简单的“额外信息”标签(TAB)

鼠标移上去显示内容的TAB

在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容。首先,我们来完成HTML代码——我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项):

// 这里是我们的菜单

Mootools 1.2教程(19)——Tooltips

原文地址:30 Days of Mootools 1.2 Tutorials – Day 19 – Tooltips

Mootools 1.2工具提示(tooltip)教程

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

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

今天我们将来看一下MooTools绑定的Tooltip插件。通过“提示(Tips)”,你可以轻松地自定义一个包含一个标题和内容的工具提示,可以自定义样式,自定义淡入淡出渐变效果。我们还将仔细学习一下工具提示的选项和事件,还有一些用来从元素上添加和移除工具提示的工具。最后,我们将学习一下怎么让一个页面有多个不同样式的工具提示。

基础知识

创建一个新的工具提示

创建一个新的工具提示非常简单。首先,我们来创建一个要添加工具提示的链接:

<a class="tooltipA"

Mootools 1.2教程(18)——类(一)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 18 – Classes part I

Class(类)(第一部分)

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

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

今天我们将讲一下用MooTools来创建和使用类的一些基本知识。

简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能。在一个内容牵涉较多的项目中,类会显得难以置信的有用。

变量

在前面一系列的课程中,我们已经学习过了Hash对象中键值对(key/value pair)的使用方式,因此,下面的这个例子中创建了一个类,它只包含了一些变量,你看起来可能会觉得非常的熟悉:

// 创建一个名为class_one的类
// 包含两个内部变量

MooTools的Cookie类太“自作聪明”了

没注意到MooTools的Cookie类在写的时候自己做了一次encode,在读的时候做了一次decode,在一般的情况下,这个不会有什么问题。但是想一下特殊的情况,如果你在服务器端写Cookie的时候没有encode,那么读的时候是不是会乱掉?当然了,服务器端代码写Cookie一般还是会encode的。但是问题是这样的,如果你要写一个很长的Cookie,中间有很多内容,你先把这些内容那个encode,然后用$作为分隔符把这些项连接起来,再用服务器端代码写入到Cookie里面。好,你现在的Cookie的值可能是这样的:

// 这个cookie的内容有三项,分别为:
// Fdream——decode之后为——Fdream
// http%3A%2F%2Ffdream.net——decode之后为——http://fdream.net
// %25%25%24%24——decode之后为——%%$$
youkey=Fdream$http%3A%2F%2Ffdream.net$%25%25%24%24

Mootools 1.2教程(17)——手风琴插件

Mootools 1.2手风琴(Accordion)教程

原文地址:30 Days of Mootools 1.2 Tutorials – Day 17 – Accordion

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

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

继续我们的“更多”(More)库里面的插件教程,今天我们来学习一下可能是最流行最受欢迎的插件——手风琴。创建和配置一个基本的手风琴很简单,但是你一定要认真看完全文,因为更多的高级选项可能有一些复杂。

基础知识

创建一个新的手风琴

要创建一个新的手风琴,你需要选择一些成对的元素——包含标题和内容。因此,首先,需要给每一个标题和每一个内容块分别指定一个css类名:

<h3 class="togglers">Toggle 

Mootools 1.2教程(16)——排序类和方法简介

MooTools 1.2的整理排序类Sortables

原文地址:30 Days of Mootools 1.2 Tutorials – Day 16 – Sortables and Intro to Methods

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

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

从今天开始,我们将开始讲解“更多”(more)库里面的更多插件。Sortables是一个非常强大的插件,能够真正地扩大你的用户界面设计的选择面。Sortables类还提供了包括一个名叫“serialize”的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出——对于服务器端的开发非常有用。接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例。

基本知识

创建一个新的Sortable对象

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中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用。…

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类,不过我们还是要研究一下一些有用的选项和事件。看一下下面的代码,然后学习一下其中的细节。…