也发一个基于mootools的tabs

傷城~ 2021-12-21 09:45 375阅读 0赞

先上个二级tabs截图：

![2010092113434364.png][]

代码如下：

class:

/*
    * CnYuTabber v0.3 01.25,09
    */
    var CnYuTabber = new Class({
        Implements: Options,
        options: {
            mousetype: 'click',
            headContainer: '.TabTitle',
            tabhead: 'li',
            bodyContainer: '.TabContent',
            tabbody: 'div'
        },
        initialize: function(id, options) {
            this.setOptions(options);
            var mousetype = this.options.mousetype;
            var headContainer = this.options.headContainer;
            var bodyContainer = this.options.bodyContainer;
            var tabhead = this.options.tabhead;
            var tabbody = this.options.tabbody;
            var titles = $$('#' + id + ' ' + headContainer + ' ' + tabhead);
            var contents = $$('#' + id + ' ' + bodyContainer + ' ' + tabbody);
            this.titles = titles;
            this.contents = contents;
            this.index = 0;
    
            titles.each(function(title) {
                title.addEvent(mousetype, function(event) {
                    this.index = titles.indexOf(title);
                    titles.each(function(content, index) {
                        if (content == title) {
                            content.className = 'active';
                            contents[index].setStyle('display', 'block');
                            this.index = index;
                        }
                        else {
                            content.className = 'normal';
                            contents[index].setStyle('display', 'none');
                        }
                    });
                });
            });
        },
        select: function(index) {
            this.index = index;
            return this.titles[index].fireEvent(this.options.mousetype);
        }
    });

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝下面是测试代码＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

css

.none{display:none;}
    #demo active{color:#f90;}

html

<div id="demo">
     <div class="TabTitle">
      <ul>
       <li class="active">title1</li>
       <li class="normal">title2</li>
      </ul>
     </div>
     <div class="TabContent">
      <div>
       content1
      </div>
      <div class="none">
       content2
      </div>
     </div>
    </div>

调用示例：

var tab=new CnYuTabber('demo');

[源文件下载][Link 1]:

[http://files.cnblogs.com/cisky/demo.rar][Link 1]

转载于:https://www.cnblogs.com/cisky/archive/2010/09/21/1832517.html

[2010092113434364.png]: /images/20211221/5058f2cff62f4fb58e53a487807cdd3e.png
[Link 1]: http://files.cnblogs.com/cisky/demo.rar