本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下
加载方式
Class加载
<div class="easyui-tabs" style="width: 400px;height: 250px">
<div title="Tab1" data-options="closable:true">
tab1
</div>
<div title="Tab2" data-options="closable:true">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
tab3
</div>
</div>JS调用加载
<div id="box" style="width: 400px;height: 250px">
<div title="Tab1" data-options="closable:true">
tab1
</div>
<div title="Tab2" data-options="closable:true">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
tab3
</div>
</div> <script>
$(function () {
$('#box').tabs({
// 选项卡容器宽度
width : 500,
// 项卡容器高度
height: 400,
// 是否不显示控制面板背景。
plain : false,
// 选项卡是否将铺满它所在的容器
fit : false,
// 是否显示选项卡容器边框
border : true,
// 选项卡滚动条每次滚动的像素值
scrollIncrement : 200,
// 每次滚动动画持续的时间
scrollDuration : 400,
// 工具栏添加在选项卡面板头的左侧或右侧
tools:[{
iconCls : 'icon-add',
handler : function () {
alert('添加!');
},
}],
// 工具栏位置
toolPosition : 'left',
// 选项卡位置
tabPosition : 'left',
// 选项卡标题宽度，在 tabPosition 属性设置为'left'或'right'的时候才有效
headerWidth : 300,
// 标签条的宽度
tabWidth : 250,
// 标签条的高度
tabHeight : 25,
// 初始化选中一个 tab 页, 从0开始
selected : 2,
// 是否显示 tab 页标题
showHeader: true
}) ;
});
</script>
属性列表
事件列表
$(function () {
$('#box').tabs({
// 在 ajax 选项卡面板加载完远程数据的时候触发。
onLoad : function (pannel) {
alert(panel);
},
// 用户在选择一个选项卡面板的时候触发
onSelect : function (title,index) {
