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一般表示标签页