自己动手写MooTools Tabs Class
关于标签(Tabs)选项卡,jQuery版的插件众多,功能强大的也非常多,只要你Google一下,一抓一大把,但是,不是每一个都适合自己,考虑到代码的臃肿,需求的变动,得需要有一个符合自己的标签选项卡插件。
关于jQuery Tabs 我还是喜欢Karry的《自己动手做jquery Tab标签插件》,简单,高效,实用。
MooTools Tabs ,一直没有找到合适的,得花时间自己搞一个出来!既然,jQuery Tabs 有那么多好用的Tabs,何不模仿一个就行了,这样岂不是两全其美,jQuery 和 MooTools 都学习了。
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 条评论!