基于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功能也做了扩展，但其核心就是那点