easyui 05 tab选项卡
2016-11-07 本文已影响45人
小小机器人
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"
charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<!-- <div id="tt" class="easyui-tabs" data-options="plain:true,scrollIncrement:20" style="width: 250px; height: 250px;">
<div title="Tab1" style="padding: 20px; display: none;">选项卡1</div>
<div title="Tab2" data-options="closable:true"
style="overflow: auto; padding: 20px; display: none;">选项卡2</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
style="padding: 20px; display: none;">选项卡3</div>
<div title="Tab4" style="padding: 20px; display: none;">选项卡4</div>
</div> -->
<div id="tt"></div>
<a id="btn" href="#">添加</a>
<script type="text/javascript">
$(function(){
$("#tt").tabs({
plain:true,//将不显示控制面板的背景
//tabPosition:'left',
scrollIncrement:20,//选项卡滚动条每次滚动的像素值
height:250,
width:200,
onSelect:function(){
alert("选项卡被选择了哦")
},
/* onClose:
onUpdate:
onAdd: */
});
//添加一个默认的选项卡
$("#tt").tabs('add',{
title:'New Tab',
content:'Tab Body',
height:30,
closable:true
/* 不需要给选项卡面板添加工具
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}] */
});
//创建按钮组件
$('#btn').linkbutton({
iconCls: 'icon-add'
});
//点击按钮添加选项卡
$("#btn").bind('click',function(){
//添加一个新的选项卡面板
$('#tt').tabs('add',{
title:'New Tab',
content:'新选项卡',
closable:true,
});
});
});
</script>
</body>
</html>
tabs.gif
