easyui的tabs源码分析
使用原始的html div代码:
<div class="easyui-tabs" id="testtabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1" style="padding:10px;">fdafdadsf</div>
<div title="Title2" style="padding:10px;">Content 2</div>
<div title="Title3" style="padding:10px;">Content 3</div>
</div>
经过转换后html代码:
<div style="height: 100px; width: 1400px;" plain="true" fit="true"
id="testtabs" class="easyui-tabs tabs-container">
<!--tab的头-->
<div class="tabs-header tabs-header-plain" style="width: 1400px;">
<div class="tabs-scroller-left" style="display: block;"></div>
<div class="tabs-scroller-right" style="display: block;"></div>
<div class="tabs-wrap" style="margin-left: 0px; left: 0px; width: 1400px;">
<ul class="tabs">
<li class="tabs-selected">
<a class="tabs-inner" href="javascript:void(0)">
<span class="tabs-title">Title1</span>
<span class="tabs-icon"></span>
</a>
</li>
<li class="">
<a class="tabs-inner" href="javascript:void(0)">
<!--tabs-title没有具体的样式,只是为了js代码使用,为了选中或者修改标题用-->
<span class="tabs-title tabs-with-icon">Title2</span>
<!--小图标-->
<span class="tabs-icon icon-reload"></span>
</a>
</li>
<li class="">
<a class="tabs-inner" href="javascript:void(0)">
<span class="tabs-title tabs-closable">Title3</span>
<span class="tabs-icon"></span>
</a>
<!--关闭按钮-->
<a class="tabs-close" href="javascript:void(0)"></a>
</li>
</ul>
</div>
</div>
<!--tab主体-->
<div class="tabs-panels" style="height: 70px; width: 1398px;">
<div class="panel" style="display: block; width: 1398px;">
<div style="padding: 10px; width: 1378px; height: 50px;" title="" closed="true"
class="panel-body panel-body-noheader panel-body-noborder">
fdafdadsf
</div>
</div>
<div class="panel" style="display: none; width: 1398px;">
<div style="padding: 10px; width: 1378px; height: 50px;" title="" closed="true"
class="panel-body panel-body-noheader panel-body-noborder">
Content 2
</div>
</div>
<div class="panel" style="display: none; width: 1398px;">
<div style="padding: 10px; width: 1378px; height: 50px;" title="" closed="true"
class="panel-body panel-body-noheader panel-body-noborder">
Content 3
</div>
</div>
</div>
</div>
通过对比原始html和转换后html的对比,easyui对原始的html增加了头<div class="tabs-header tabs-header-plain" style="width: 1400px;">...</div>并且对原始的主体进行了总的封装<div class="tabs-panels" style="height: 70px; width: 1398px;">......</div>。
根据源码可以分析出easyui的tabs生成步骤如下:
1.根据传入的参数来决定是执行相应的方法还是进行初始化
2.初始化时对原始的div进行了包装,包装函数为wrapTabs(container)
此函数主要功能是生成tab的头,即<div class="tabs-header tabs-header-plain" style="width: 1400px;">...</div>和外部包装体<div class="tabs-panels" style="height: 70px; width: 1398px;">......</div>。
此方法只是生成框架,而真正具体实现的是通过方法createTab(container, options)。
createTab用于创建tab页得header,即在ul添加li和设置主体div的内容
3.通过setProperties(this)函数为tabs的小标签tab就头添加事件或动作,并根据href加载主体panel异步的内容
4.通过setSize(this)函数设置tab的大小和设置tab的滚动条是否可见
5.通过selectTab(this)选中tab标签
说明:
在源码中tab一般表示标签页
panel表示的是tab的主体