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

给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));

注意：如果你快速地点击上面的示例，你将看的会同时出现多个内容区块。从根本上讲，如果showFunction在上一个形变完成之前调用，它将不会隐藏其他的区块内容。要解决这个问题，我们需要打破这一规则，并充分利用Fx.Elements。