简单的“额外信息”标签（TAB）
鼠标移上去显示内容的TAB在这第一个项目中，我们要创建一个简单的菜单，当鼠标移动到这些菜单上时显示相应的内容。首先，我们来完成HTML代码——我们就用包含四个列表项的ul好了，然后再创建四个div（每一个div对应一个列表项）：
参考代码：
复制代码代码如下:// 这里是我们的菜单One Two Three Four// 这里是我们的内容div content for one content for two content for three content for four现在，我们不需要关心怎么把它们做得漂亮。在CSS中，我们要做的全部事情就是把内容区块隐藏起来：参考代码： [复制代码] [保存代码].hidden {display: none;}好了，现在开始写MooTools代码。如果我们需要当用户把鼠标移上去的时候显示内容，当鼠标离开的时候隐藏内容，我们需要完成这样两个函数：
参考代码：
复制代码代码如下:var showFunction = function() {this.setStyle('display', 'block');}var hideFunction = function() {this.setStyle('display', 'none');}
还有一些事件：
参考代码：
复制代码代码如下:window.addEvent('domready', function() {// 这里我们可以把容器元素赋值给一个变量var elOne = $('contentone');$('one').addEvents({// 当鼠标进入的时候，我们调用showFunction// 并绑定这个元素elOne// 因此我们需要把它作为函数参数'mouseenter': showFunction.bind(elOne),'mouseleave': hideFunction.bind(elOne)});});现在，我们只需要为每个tab重复这个模式，并指定对应的内容区块就可以了。下面是完整的代码：参考代码： [复制代码] [保存代码]// 这里是用来改变样式的函数var showFunction = function() {this.setStyle('display', 'block');}var hideFunction = function() {this.setStyle('display', 'none');}window.addEvent('domready', function() {// 在这里我们把我们的内容块赋值给不同变量var elOne = $('contentone');var elTwo = $('contenttwo');var elThree = $('contentthree');var elFour = $('contentfour');// 给tab绑定事件$('one').addEvents({// 设置事件类型// 并给事件控制函数绑定相应的变量'mouseenter': showFunction.bind(elOne),'mouseleave': hideFunction.bind(elOne)});$('two').addEvents({'mouseenter': showFunction.bind(elTwo),'mouseleave': hideFunction.bind(elTwo)});$('three').addEvents({'mouseenter': showFunction.bind(elThree),'mouseleave': hideFunction.bind(elThree)});$('four').addEvents({'mouseenter': showFunction.bind(elFour),'mouseleave': hideFunction.bind(elFour)});});正如你所看到的，这一切看起来都非常的熟悉，完成这些并不需要任何我们目前为止没有学过的东西。
One Two Three Four content for one content for two content for three content for four点击时显示内容的TAB借鉴上面的想法，我们可以很轻松地调整它为点击时显示内容。我们就使用上面的HTML，然后修改一下MooTools代码，以完成点击事件。
首先，我们需要调整一下我们的函数。由于我们不能在鼠标离开时把内容隐藏起来，因此，我们需要换一种方式来切换这些div。可能最容易的选择是在点击时首先把它们全部隐藏起来，然后只把this（通过click事件传递进来的对象）所指的当前的内容显示出来。
参考代码：
复制代码代码如下:var showFunction = function() {$$('.hiddenB').setStyle('display', 'none');this.setStyle('display', 'block');}现在，当我们通过把元素绑定到一个函数上来传递这个变量时，它将隐藏其他的区块，并显示当前的区块。
接下来，我们还需要调整一下我们的事件。首先，我们只需要一个事件了，因此我们使用.addEvent();方法，然后还需要改变事件的类型为“click”。
参考代码：
复制代码代码如下:window.addEvent('domready', function() {var elOneB = $('contentoneB');var elTwoB = $('contenttwoB');var elThreeB = $('contentthreeB');var elFourB = $('contentfourB');$('oneB').addEvent('click', showFunction.bind(elOneB));$('twoB').addEvent('click', showFunction.bind(elTwoB));$('threeB').addEvent('click', showFunction.bind(elThreeB));$('fourB').addEvent('click', showFunction.bind(elFourB));});One Two Three Four content for one content for two content for three content for four给Tab的内容块加上形变通过扩展我们上面的代码，我们可以添加一些形变效果来显示我们隐藏的内容区块。首先，我们可以像以前那样创建一个Fx.Morph效果，不过在这里要设置不同的样式。当然，我们还需要创建我们的形变（Morph）对象：
参考代码：
复制代码代码如下:var showFunction = function() {// 在形变之前初始化所有样式$$('.hiddenM').setStyles({'display': 'none','opacity': 0,'background-color': '#fff','font-size': '16px'});// 在这里开始形变，并指定形变后的样式this.start({'display': 'block','opacity': 1,'background-color': '#d3715c','font-size': '31px'});}window.addEvent('domready', function() {var elOneM = $('contentoneM');var elTwoM = $('contenttwoM');var elThreeM = $('contentthreeM');var elFourM = $('contentfourM');// 创建一个形变对象elOneM = new Fx.Morph(elOneM, {link: 'cancel'});elTwoM = new Fx.Morph(elTwoM, {link: 'cancel'});elThreeM = new Fx.Morph(elThreeM, {link: 'cancel'});elFourM = new Fx.Morph(elFourM, {link: 'cancel'});$('oneM').addEvent('click', showFunction.bind(elOneM));$('twoM').addEvent('click', showFunction.bind(elTwoM));$('threeM').addEvent('click', showFunction.bind(elThreeM));$('fourM').addEvent('click', showFunction.bind(elFourM));});如果我们使用和上面相同的HTML代码，我们将得到类似这样的效果：One Two Three Four content for one content for two content for three content for four注意：如果你快速地点击上面的示例，你将看的会同时出现多个内容区块。从根本上讲，如果showFunction在上一个形变完成之前调用，它将不会隐藏其他的区块内容。要解决这个问题，我们需要打破这一规则，并充分利用Fx.Elements。
代码示例下面的这个示例和上面的示例差不多，不过当你快速地点击两个tab时，将不会同时出现多个内容div。
参考代码：
复制代码代码如下:// 创建一个隐藏所有元素的函数// 你可以把元素作为参数传递进来var hideAll = function(fxElementObject){fxElementObject.set({'0': {'display': 'none'},'1': {'display': 'none'},'2': {'display': 'none'},'3': {'display': 'none'}});}// 这里我们为每个内容区块创建一个函数var showFunctionOne = function() {// 首先，调用函数hideAll// 然后Fx.element对象的引用“this”作为参数传入hideAll(this);// 开始相应元素的Fx.element形变动画this.start({'0': {'display': ['none', 'block'],'background-color': ['#fff', '#999'],'font-size': ['16px', '25px']}});}var showFunctionTwo = function() {hideAll(this);this.start({'1': {'display': ['none', 'block'],'background-color': ['#fff', '#999'],'font-size': ['16px', '25px']}});}var showFunctionThree = function() {hideAll(this);this.start({'2': {'display': ['none', 'block'],'background-color': ['#fff', '#999'],'font-size': ['16px', '25px']}});}var showFunctionFour = function() {hideAll(this);this.start({'3': {'display': ['none', 'block'],'background-color': ['#fff', '#999'],'font-size': ['16px', '25px']}});}window.addEvent('domready', function() {// 建立一个数组来保存Fx.elements var morphElements = $$('.hiddenMel');// 创建一个新的Fx.Element对象var elementEffects = new Fx.Elements(morphElements, {// 设置"link"选项的值为cancel link: 'cancel'});$('oneMel').addEvent('click', showFunctionOne.bind(elementEffects));$('twoMel').addEvent('click', showFunctionTwo.bind(elementEffects));$('threeMel').addEvent('click', showFunctionThree.bind(elementEffects));$('fourMel').addEvent('click', showFunctionFour.bind(elementEffects));});更多学习这篇教程更多地是复习和应用我们在以前的教程中学些的东西。因此，如果你还么准备好，我们建议你全面阅读相应的文档。这比听起来的会更有趣。如果你是刚接触这个库的，但是一直在学习这一系列的教程，你可能会对你了解的程度非常的惊讶。（Fdream注：这个意思就是说，这一系列的教程中，覆盖的内容还不够全面，因此强烈建议大家仔细阅读全部文档。）
下载最后一个示例的代码也包含你开始实践所需要的所有东西。