基于Ext-core-3.0实现的tabs示例JS代码解析

JS代码：

 Ext.onReady(function(){ Ext.select('.tab-buttons-panel').on('mousedown', function(e, t) { Ext.fly(t).radioClass('tab-show'); Ext.get('content' + t.id.slice(-1)).radioClass('tab-content-show'); }, null, {delegate: 'li'}); });

Ext.select()封装出id为‘tab-buttons-panel’的CompositeElement对象，该对象为Element对象的集合对象，拥有Element对象的所有方法。

调用Element对象的on方法注册事件监听函数，将函数作用域设置为null，通过css选择符将目标对象代理给子元素‘li’，此时参数t就是鼠标点击的li元素了（类型为HTMLElement），

Ext.fly(t)方法获取当前tab封装后的Element对象，调用Element对象的radioClass方法设置当前tab为选中状态的class并移除兄弟结点的选中状态class。

Ext.get('content' + t.id.slice(-1)).radioClass('tab-content-show');通过id选出对应的内容结点并设置样式。

HTML代码：

---

<div class="tab_container"> <div class="tab-buttons-panel"> <ul> <li id="tab1" class="tab-show"> <span>Nature</span> </li> <li id="tab2"> <span>Vehicles</span> </li> <li id="tab3"> <span>Animals</span> </li> </ul> </div> <div id="content1" class="tab-content tab-content-show"> <div class="tab-content-panel-border"> <div class="tab-content-panel"> <b>Things in Nature</b> <ul> <li>Plants</li> <li>Ocean</li> <li>Trees</li> <li>Skies</li> <li>Mountains</li> </ul> </div> </div> </div> <div id="content2" class="tab-content"> <div class="tab-content-panel-border"> <div class="tab-content-panel"> <b>Types of Vehicles</b> <ul> <li>Cars</li> <li>Boats</li> <li>Trucks</li> <li>Bikes</li> </ul> </div> </div> </div> <div id="content3" class="tab-content"> <div class="tab-content-panel-border"> <div class="tab-content-panel"> <b>Types of Animals</b> <ul> <li>Tigers</li> <li>Elephants</li> <li>Fish</li> <li>Birds</li> </ul> </div> </div> </div> </div>

css代码：

/*! * Ext Core Library 3.0 * http://extjs.com/ * Copyright(c) 2006-2009, Ext JS, LLC. * * MIT Licensed - http://extjs.com/license/mit.txt */ .tab_container { float: left; width: 400px; } .tab-buttons-panel { width: 100%; float: left; background: url(images/wt-norm.png) repeat-x bottom; } .tab-buttons-panel ul { margin: 0; padding: 0px; list-style: none; } .tab-buttons-panel li { float:left; margin:0; padding:0; cursor: pointer; border-color: #b8cbde; border-style: solid; border-width: 0px 0px 1px 0px; background: url(images/wt-right.png) no-repeat right top; } .tab-buttons-panel span { color: #222; display: block; background: url(images/wt-left.png) no-repeat left top; padding: 5px 15px 4px; } .tab-buttons-panel li.tab-show { background: url(images/wt-right-on.png) no-repeat right top; border-width: 0px 0px 0px 0px; } .tab-buttons-panel li.tab-show span { background:url(images/wt-left-on.png) no-repeat left top; padding:5px 15px 5px; } .tab-content { top: 27px; position: relative; border-width: 0px 1px 1px 1px; border-color: #b8cbde; border-style: none solid solid solid; background-color: #e1e6ee; display: none; padding: 15px; padding-bottom: 0px; } .ext-border-box .tab-content { top: 0px; } .tab-content-show { display: block; } .tab-content-panel-border { margin-bottom: 20px; } .tab-content-panel { padding: 5px; border: 1px dotted #abb3b0; background-color: #f8fafd; } .tab-content-panel li { list-style-type: circle; list-style-position: inside; }

效果演示：http://www.extjs.com/playpen/ext-core-latest/examples/tabs/

官网上的例子用面向对象的方式重做了，新例子html的编码量减少了，JS功能也做了扩展，但其核心就是那点