增加/删除tab
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>增加/删除tab</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/tabs/assets/dpl.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js" data-config="{combine:true}"></script>
</head>
<body>
<div style="width:90%;margin:0 auto;">
<h1>增加/删除tab</h1>
<p>在指定位置增加或删除tab</p>
<div id="container" style="padding:10px 10px;margin:20px 0;border:1px rgb(97, 83, 83) solid;">
</div>
<div id="add" class="ks-button ks-button-info">增加一个tab</div>
<div id="remove" class="ks-button ks-button-danger">删除一个tab</div>
</div>
<script type="text/javascript">
require(['tabs', 'node'], function(Tabs, $){
var myTabs = new Tabs({
render : '#container',
width : '60%',
items : [
{
title : 'title of tab-1',
content : 'tab-1 content'
},
{
title : 'title of tab-2',
content : 'tab-2 content',
selected : true //默认选中这个tab
},
{
title : 'title of tab-3',
content : 'tab-3 content',
closable : true //显示关闭按钮，点击删除tab
}
]
}).render();
$('#add').on('click', function(ev){
myTabs.addItem({
title : 'title of tab-insert',
content : 'tab-insert content',
closable : true,
selected : true
},2); //删除在index=2位置的tab
});
$('#remove').on('click', function(ev){
myTabs.removeItemAt(myTabs.getTabs().length - 1); //删除最后一个tab
})
});
</script>
</body>
</html>