这篇我们看看标签页是怎么实现的，默认情况下要靠点击切换标签，也可以用鼠标切换标签选项，就是鼠标放在标签上切换。
首先看看引用的资源文件
1.资源文件
<head>
<meta charset="UTF-8" />
<title>Basic Tabs - jQuery EasyUI Demo</title>
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />
<link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" />
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
</head>
这里我们看到还是这几个文件，这里要说一下jquery.easyui.min.js这个文件是包含所有easyui标签功能的，D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\src这个路径下文件诸如jquery.draggable.js，jquery.linkbutton.js这样的js只是包含单一功能的文件，比jquery.easyui.min.js这个要小。
2.html代码
<body>
<h2>Basic Tabs</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click tab strip to swap tab panel content.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="tt" class="easyui-tabs" style="width:700px;height:auto;">
<div title="About" style="padding:10px;">
<p style="font-size:14px;">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documnets" style="padding:10px;">
<ul class="easyui-tree" data-options="url:'jquery-easyui-1.3.5/demo/tabs/tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px;">
This is the help content.
</div>
</div>
<script type="text/javascript">
$(function(){
var tabs = $("#tt").tabs().tabs('tabs');
for(var i=0; i<tabs.length; i++){
tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
$('#tt').tabs('select',e.data.index);
});
}
})
</script>
</body>
这个tabs功能其实也很简单，就是在一个div中包含几个嵌套的div就可以了。class="easyui-tabs"这个就是最主要的功能了，easyui可以将这个div下面的div都识别为标签选项。注意style="width:700px;height:auto;"这个属性，高度是auto的话标签的高度可以根据内容自动调整，如果设置为style="width:700px;height:300px;"这样固定高度的话高度就固定为300px。
注意第二个标签内容是一个树形结构，并且数据还是从其他的文件中取得的，<ul class="easyui-tree" data-options="url:'jquery-easyui-1.3.5/demo/tabs/tree_data1.json',method:'get',animate:true"></ul>这个的意思是使用get方法从jquery-easyui-1.3.5/demo/tabs/tree_data1.json这个文件中取得数据源。来看看那这个文件是什么样子的。
aaarticlea/png;base64,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" alt="" />
这个文件就存放一个json对象，这里不再深究这个树是怎么实现的。
最后一个标签有点特殊，可以关闭，data-options="iconCls:'icon-help',closable:true"这里设置了一个特性可以关闭。
3.js代码
<script type="text/javascript">
$(function(){
var tabs = $("#tt").tabs().tabs('tabs');
for(var i=0; i<tabs.length; i++){
tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){
$('#tt').tabs('select',e.data.index);
});
}
})
</script>
最后看看js标签实现的鼠标放上去切换的动作，首先获取到所有的标签页，然后对每个标签页绑定mouseenter动作，这个动作就是选中当前标签，$('#tt').tabs('select',e.data.index);绑定动作select，第二个参数是当前标签的index。