网络编程
位置:首页>> 网络编程>> JavaScript>> Mootools 1.2教程(20)——选项卡效果(Tabs)(3)

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

作者:Fdream 来源:Fdream博客 发布时间:2008-12-26 18:19:00 

标签:Mootools,Tabs,教程,选项卡,javascript

代码示例

下面的这个示例和上面的示例差不多,不过当你快速地点击两个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注:这个意思就是说,这一系列的教程中,覆盖的内容还不够全面,因此强烈建议大家仔细阅读全部文档。)

远程下载:下载最后一个示例的代码 (44.44 KB)

asp之家下载地址:mootorial_day20_tabs.zip (44.44 KB)

也包含你开始实践所需要的所有东西。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com