EasyUI-选项卡工具组

dxm809

于 2019-04-03 07:51:54 发布

阅读量138

点赞数

分类专栏： Jquery EasyUI

Jquery EasyUI 专栏收录该内容

110 篇文章 0 订阅

订阅专栏

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
<link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
<h2>Tabs Tools</h2>
<p>Click the buttons on the top right of tabs header to add or remove tab panel.</p>
<div style="margin:20px 0;"></div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" οnclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" οnclick="removePanel()"></a>
</div>
<script type="text/javascript">
var index = 0;
function addPanel() {
index++;
$('#tt').tabs('add', {
title: 'Tab' + index,
content: '<div style="padding:10px">Content' + index + '</div>',
closable: true
});
}
function removePanel() {
var tab = $('#tt').tabs('getSelected');
if (tab) {
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
</script>
</body>
</html>