自己动手写MooTools Tabs Class

By Rainbow on // Series // 3219 Views+ // (0) Comments

关于标签（Tabs）选项卡，jQuery版的插件众多，功能强大的也非常多，只要你Google一下，一抓一大把，但是，不是每一个都适合自己，考虑到代码的臃肿，需求的变动，得需要有一个符合自己的标签选项卡插件。

关于jQuery Tabs 我还是喜欢Karry的《自己动手做jquery Tab标签插件》，简单，高效，实用。

MooTools Tabs ,一直没有找到合适的，得花时间自己搞一个出来！既然，jQuery Tabs 有那么多好用的Tabs，何不模仿一个就行了，这样岂不是两全其美，jQuery 和 MooTools 都学习了。

MooTools-Tabs

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div id="demo" class="box">
      <div class="hd">
            <ul class="tab-holder">
                <li class="selected"><a href="#">HTML5 </a></li>
                <li><a href="#">MooTools </a></li>
                <li><a href="#">Dojo </a></li>
                <li><a href="#">jQuery </a></li>
            </ul>
      </div>
      <div class="bd">
            <div class="tab-panel">
                内容1.........
            </div>
            <div class="tab-panel hide">
                内容2.........
            </div>
            <div class="tab-panel hide">
                内容3.........
            </div>
            <div class="tab-panel hide">
                内容4.........
            </div>
      </div>
</div>

The CSS Code :

1
2
3
4
5
6
7
8
9
10
11

.tab-holder {height:30px;overflow:hidden;}
.tab-holder li {background:#EFF6FA url(../images/tabs_bg.png) repeat-x 0 0;border:1px solid #cfdae4;border-right:none;cursor:pointer;color:#666!important;float:left;height:28px;	text-align:center;line-height:28px;margin-left:-1px;width:102px;}
.tab-holder .selected a{font-weight:bold;color:#000!important;}
.tab-holder .selected{background:url(../images/tabs_bg.png) repeat-x 0 -28px;border-top:1px solid #eea63a;border-bottom:1px solid #fff;}
.tab-holder li,
.tab-holder li a,
.tab-holder li a:hover{color:#15377e!important;font-weight:bold;}
.tab-panel { margin-left:8px; padding:3px 0; }
.tab-panel li {background:url(../images/point.gif) no-repeat 2px center;height:22px;line-height:22px;padding-left:10px;}
.tab-panel li a { color:#3e3e3e; }
.tab-panel li a:hover { color:#f60; }

简单的标签选项卡，实现方法一 ：

需要 MooTools More 的 Element.Delegation 插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

var TabPane = new Class({
 
    Implements: [Events, Options],
 
    options: {
        tabSelector: '.tab-holder li',
        contentSelector: '.tab-panel',
        activeClass: 'selected',
		eventType:"mouseover"			
    },
 
    container: null,
 
    initialize: function(container, options) {
        this.setOptions(options);
 
        this.container = document.id(container);
 
		//获得所有的选项面板，并设置为display:none
        this.container.getElements(this.options.contentSelector).setStyle('display', 'none');
 
		//Element.Delegates 给所有当前元素绑定事件
        this.container.addEvent(this.options.eventType+':relay(' + this.options.tabSelector + ')', function(event, tab) {																            //调用当前标签对应的面板
            this.showTab(this.container.getElements(this.options.tabSelector).indexOf(tab), tab);
        }.bind(this));
 
        //获得第一个选项卡，并添加 active 类样式
        this.container.getElement(this.options.tabSelector).addClass(this.options.activeClass);
	    //获得第一个选项面板，并设置为display:block
        this.container.getElement(this.options.contentSelector).setStyle('display', 'block');
    },
 
    showTab: function(index, tab) {
 
        var content = this.container.getElements(this.options.contentSelector)[index];
 
        if (!tab) {
            tab = this.container.getElements(this.options.tabSelector)[index];
        }
 
        if (content) {
            this.container.getElements(this.options.tabSelector).removeClass(this.options.activeClass);
            this.container.getElements(this.options.contentSelector).setStyle('display', 'none');
            tab.addClass(this.options.activeClass);
            content.setStyle('display', 'block');
 
            this.fireEvent('change', index);
        } 
    }
 
 
});

以上代码就是一个完整的标签选项卡类，此类不限标签个数，支持 click 和 mouseover事件,自定义当前选中标签的样式类。

演示
打包下载

简单的标签选项卡，实现方法二 ：

无需任何插件，只需 MooTools Core 库 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

var MooTabs=new Class({			  
    Implements: [Events, Options],
	options: {
       tabSelector:".tab-holder li",
	   contentSelector:".tab-panel",
       tabActiveClass:"active",
	   eventType:"mouseover"
	},
	initialize: function(options) {
        this.setOptions(options);
	    this._init();
		this.disableArr=[];
 
	},
	_init:function(){
	        var _this = this;
			if($$(_this.options.tabSelector).length>0){
			   $$(_this.options.tabSelector).each(function(item, index){
                    item.addEvent(_this.options.eventType,function(){
						//判断是否禁用，是否在当前选中的按钮上
						if(_this.disableArr.indexOf(item)==-1&&this.get("class").indexOf(_this.options.tabActiveClass)==-1){
 
							$$(_this.options.tabSelector).removeClass(_this.options.tabActiveClass);
							this.addClass(_this.options.tabActiveClass);
							_this._showContent(index);	
 
						}
 
					});				  
			   }); 	
		    }
 
	},
	_showContent:function(index){
		var _this = this;
        _showContent:function(index){
            var _this = this;
            var content = $$(_this.options.contentSelector)[index];
            if (content) {
               $$(_this.options.contentSelector).setStyle('display', 'none');
               content.setStyle('display', 'block');
            } 
        }
	}
 
});

演示
打包下载

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计