这篇我们看看标签页是怎么实现的，默认情况下要靠点击切换标签，也可以用鼠标切换标签选项，就是鼠标放在标签上切换。
首先看看引用的资源文件
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:Seriousphpdeveasyuijquery-easyui-1.3.5src这个路径下文件诸如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="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="700px;height:auto;"这个属性，高度是auto的话标签的高度可以根据内容自动调整，如果设置为style="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这个文件中取得数据源。来看看那这个文件是什么样子的。
这个文件就存放一个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。