这一篇我们来看看标签页的添加和删除动作。我在想看这些例子还不如看文档，文档的内容更加全面，但是文档全部是理论没有实际的操作，看起来很枯燥，文档只能是遇到问题的时候查。easyui的文档写的还是很详细的，这点对开发者很重要。
1.html代码
<div id="tt" class="easyui-tabs" data-options="tools:‘#tab-tools‘" 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> <div id="tab-tools"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-add‘" onclick=‘addPanel()‘></a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-remove‘" onclick=‘removePanel()‘></a> </div>
这里给标签页添加了一个工具栏，data-options="tools:‘#tab-tools‘"注意这里是#所以下面定义工具栏的是时候id="tab-tools"而不是class=“tab-tools”，其他没有什么关于工具栏前面已经介绍了。
2.js代码
var index = 0; function addPanel(){ index++; $(‘#tt‘).tabs(‘add‘,{ title:‘Tab‘+index, content:‘<div style="padding:10px;">Content‘+index+‘</div>‘, closeable:true }); } function removePanel(){ var tab = $(‘#tt‘).tabs(‘getSelected‘); if(tab){ var index = $(‘#tt‘).tabs(‘getTabIndex‘,tab); $(‘#tt‘).tabs(‘close‘,index); } }
貌似和手风琴的格子的添加和删除的方法是类似的。
$(‘#tt‘).tabs(‘add‘,{ title:‘Tab‘+index, content:‘<div style="padding:10px;">Content‘+index+‘</div>‘, closeable:true });
这段是添加一个标签，标签的title是‘Tab‘+index，内容是‘<div style="padding:10px;">Content‘+index+‘</div>‘这样一个标签页
$("#aa").accordion("add",{
title:"Title"+idx,
content:‘<div
style="padding:10px">Content‘+idx+‘</div>‘
});
idx++;
这段是手风琴中添加一个格子的方法，是很类似的，只不过关键字accordion不一样。
function
removePanel(){
var tab =
$(‘#tt‘).tabs(‘getSelected‘);
if(tab){
var index =
$(‘#tt‘).tabs(‘getTabIndex‘,tab);
$(‘#tt‘).tabs(‘close‘,index);
}
}
这段是删除一个标签的方法，首先找到当前选中的标签的对象，然后如果有选中的标签，找到这个标签的index，最后根据这个index关闭这个标签，这个关闭可能就是删除的功能。