tabs源码分析

 

 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的主体