搜索:
首页 >> JavaScript >> Js高级编程 >> Mootools 1.2教程(20)——选项卡效果(Tabs)

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

2008-12-26 作者:Fdream 来源:Fdream博客 投递文章

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

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

阅读上一讲:Mootools 1.2教程(19)——Tooltips

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

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

鼠标移上去显示内容的TAB

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

参考代码: 

// 这里是我们的菜单 
<ul id="tabs"> 
    <li id="one">One</li> 
    <li id="two">Two</li> 
    <li id="three">Three</li> 
    <li id="four">Four</li> 
</ul> 

// 这里是我们的内容div 
<div id="contentone" class="hidden">content for one</div> 
<div id="contenttwo" class="hidden">content for two</div> 
<div id="contentthree" class="hidden">content for three</div> 

现在,我们不需要关心怎么把它们做得漂亮。在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) 
    }); 


正如你所看到的,这一切看起来都非常的熟悉,完成这些并不需要任何我们目前为止没有学过的东西。

借鉴上面的想法,我们可以很轻松地调整它为点击时显示内容。我们就使用上面的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)); 

1   2  3 下一页 尾 页
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号