<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>Basic Tabs - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<script type="text/javascript">
var myTabs = $("#my-tabs");
$(function(){
myTabs.tabs({
onContextMenu : function (e, title, index) {
e.preventDefault();
$('#tab-menu').menu('show', {
left : e.pageX,
top : e.pageY
}).data("tabTitle", title);
}
});
$("#tab-menu").menu({
onClick : function (item) {
closeTab(this, item.id);
}
});
// 删除Tabs
function closeTab(menu, type) {
var myTabs = $("#my-tabs");
var allTabs = myTabs.tabs('tabs');
var allTabtitle = [];
$.each(allTabs, function (i, n) {
var opt = $(n).panel('options');
if (opt.closable){
allTabtitle.push(opt.title);
}
});
var curTabTitle = $(menu).data("tabTitle");
var currentTab = myTabs.tabs("getTab", curTabTitle);
var curTabIndex = myTabs.tabs("getTabIndex", currentTab);
if (type === "close-curTab") {
if(currentTab.panel("options").closable){
myTabs.tabs("close", curTabIndex);
return false;
}
}else if (type === "close-otherTab") {
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i]){
myTabs.tabs('close', allTabtitle[i]);
}
}
myTabs.tabs('select', curTabTitle);
}else if (type === "close-allTab") {
for (var i = 0; i < allTabtitle.length; i++) {
myTabs.tabs('close', allTabtitle[i]);
}
}else if (type === "close-leftTab") {
for (var i = 0; i < curTabIndex - 1; i++) {
myTabs.tabs('close', allTabtitle[i]);
}
myTabs.tabs('select', curTabTitle);
}else if (type === "close-rightTab") {
for (var i = curTabIndex; i < allTabtitle.length; i++) {
myTabs.tabs('close', allTabtitle[i]);
}
myTabs.tabs('select', curTabTitle);
}else if(type === "refresh-tab"){
currentTab.panel("refresh"); // 刷新有点问题
}
}
/*双击关闭TAB选项卡*/
$(".tabs-header").bind('dblclick',function(){
var tab = myTabs.tabs('getSelected');
var index = myTabs.tabs('getTabIndex',tab);
if(tab.panel("options").closable){
myTabs.tabs('close',index);
}
});
});
</script>
</head>
<body>
<h2>Basic Tabs</h2>
<p>Click tab strip to swap tab panel content.</p>
<div style="margin:20px 0 10px 0;"></div>
<div id="my-tabs" class="easyui-tabs" style="width:700px;height:250px" data-options="fit:true, tools:'#tab-tools'">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" data-options="closable:true" style="padding:10px">
My Documents
<script> document.write(new Date()); </script>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:false" style="padding:10px">
This is the help content.
</div>
</div>
<!-- Tabs 右键菜单 -->
<div id="tab-menu" class="easyui-menu">
<div id="refresh-tab"> 刷新 </div>
<div class="menu-sep"></div>
<div id="close-curTab"> 关闭当前 </div>
<div id="close-allTab"> 关闭全部 </div>
<div id="close-otherTab"> 关闭其他 </div>
<div class="menu-sep"></div>
<div id="close-leftTab"> 关闭左侧 </div>
<div id="close-rightTab"> 关闭右侧 </div>
</div>
<!-- Tabs tools -->
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
<div id="tab-tools-">
<a href="#" class="easyui-linkbutton l-btn l-btn-small" onclick="javascript:addPanel()">
<span class="l-btn-left">
<span class="l-btn-text">Open</span>
</span>
</a>
<a href="#" class="easyui-linkbutton l-btn l-btn-small" onclick="javascript:removePanel()">
<span class="l-btn-left">
<span class="l-btn-text">Close</span>
</span>
</a>
</div>
<script type="text/javascript">
var myTabs = $('#my-tabs');
var index = 0;
$(function(){
index = myTabs.tabs("tabs").length + 1;
});
function addPanel(){
index++;
myTabs.tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">Content'+index+'</div>' + new Date(),
closable: true,
tools: [{
iconCls: 'icon-mini-refresh',
handler: function() {
myTabs.tabs("select", $(this).parent().parent().first().first().text());
var tab = myTabs.tabs('getSelected'); // get selected panel
myTabs.tabs('update', {
tab: tab,
options: {
content:'<div style="padding:10px">Content' + index + '</div>' + new Date()
}
});
// tab.panel('refresh');
}
}]
});
}
function removePanel(){
var tab = myTabs.tabs('getSelected');
if (tab){
var index = myTabs.tabs('getTabIndex', tab);
myTabs.tabs('close', index);
}
}
</script>
</body>
</html>
easyui-tabbar右击弹出菜单
需积分: 10 82 浏览量
2016-09-14
10:25:07
上传
评论
收藏 7KB RAR 举报
easyui-tabbar右击弹出菜单.rar （4个子文件） 
easyui-tabbar右击弹出菜单 
easyui-tab-contextmenu-1.html 4KB easyui-tab-contextmenu-2.html 4KB easyui-tab-contextmenu-4.html 7KB easyui-tab-contextmenu-3.html 4KB资源评论
