微信公众号:程序yuan
关注可了解更多的教程。问题或建议,请公众号留言;
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Panel
<%--使用class加载方式--%>
<%--
TAB1
TAB2
TAB3
--%>
TAB1
TAB2
TAB3
JS文件
$(function () {
$("#box").tabs({
//---------- 属性列表 --------------
width:600,
height:400,
//设置是否显示控制面板背景
plain:false,
//选项卡的大小将铺满它所在的容器,默认为false
fit:false,
//设置是否显示选项卡的边框,默认为true,
border:true,
// tabWidth:300,
//选项卡滚动条每次滚动的像素值
// scrollIncrement:100,
//每次滚动持续的动画事件
// scrollDuration:100,
//tab选项卡的宽和高
tabWidth:100,
tabHeight:30,
//设置选项卡的位置 left right top bottom
tabPosition:'top',
//header tab选项卡所在的位置的宽度,只要在tabPosition为left或right时有效
// headerWidth:50,
//初始化时选中那个tab,默认为0,【0,1,2...】
selected:0,
//设置是否显示选项卡头部,默认为true,
showHeader:true,
//通过数组,也可以通过选择器
tools:[
{
iconCls:'icon-add',
handler:function () {
alert("add");
}
},{
iconCls:'icon-remove',
handler:function () {
alert("删除");
}
}
],
//工具栏的位置:left,right
toolPosition:'right',
//--------------- 事件列表 ------------------
//选中某一个选项卡时触发。
onSelect:function (title,index) {
// alert("title:"+title+", index:"+index);
},
//释放某一个选中卡时触发
onUnselect:function (title,index) {
// alert("title:"+title+", index:"+index);
},
//关闭选项卡之前触发
onBeforeClose:function (title,index) {
// alert("title:"+title+",index:"+index);
},
//关闭选项卡之后触发
onClose:function (title,index) {
alert("title:"+title+",index:"+index);
},
//鼠标右击某个选项卡时触发
onContextMenu:function (e,title,index) {
console.log(e);
console.log(title);
console.log(index);
},
onLoad:function (panel) {
console.log("在加载时触发");
console.log(panel);
},
onAdd:function (title,index) {
alert("添加选项卡时触发,title:"+title+", index:"+index);
},
onUpdate:function (title,index) {
alert("选项卡更新时触发");
}
});
// ------------ 方法列表 ---------------
//返回属性对象
console.log($('#box').tabs('options'));
//返回所有选项卡面板
console.log($("#box").tabs('tabs'));
//重置容器和选项卡的大小
$("#box").tabs('resize');
//添加一个选项卡
$("#btn1").click(function () {
$("#box").tabs('add',{
title:"new tab",
//设置选项卡是否可以折叠
collapsible:true,
//设置为选中状态
selected:true,
//设置是否可以关闭
closable:true,
href:'http://localhost:8081/easyui/getUsers.action',
iconCls:'icon-add',
});
});
//关闭选项卡
$("#btn2").click(function () {
//关闭选项卡,参数可以是index,也可以是title
$("#box").tabs('close',1);
// $("#box").tabs('close','Tab2');
});
//获取指定选项卡
$("#btn3").click(function () {
//获取选选项卡,参数可以是index,也可以是title
console.log($("#box").tabs('getTab',2));
});
//获取选项卡的索引
$("#btn4").click(function () {
//获取选选项卡,参数可以是index,也可以是title
alert($('#box').tabs('getTabIndex',$('#box').tabs('getTab','Tab1')));
});
//获取选择的选项卡面板
$("#btn5").click(function () {
console.log($('#box').tabs('getSelected'));
});
//选择面板
$("#btn6").click(function () {
$('#box').tabs('select','Tab2');
});
//取消选择面板
$("#btn7").click(function () {
$('#box').tabs('unselect','Tab2');
});
//显示选项卡的标签头
$("#btn8").click(function () {
$('#box').tabs('showHeader');
});
//隐藏选项卡的标签头
$("#btn9").click(function () {
$('#box').tabs('hideHeader');
});
//判断指定选项卡是否存在(参数可以是title或index)
$("#btn10").click(function () {
alert($('#box').tabs('exists','Tab2'));
});
//更新面板
$("#btn11").click(function () {
$('#box').tabs('update',{
tab:$('#box').tabs('getTab',0),
options:{
title:"更新标题",
}
});
});
//禁用指定选项卡(参数可以是title或index)
$("#btn12").click(function () {
$('#box').tabs('disableTab','Tab3');
});
//启用指定选项卡(参数可以是title或index)
$("#btn13").click(function () {
$('#box').tabs('enableTab','Tab3');
});
$("#btn14").click(function () {
$('#box').tabs('scrollBy',100);
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源