Tabs右键页签
华懿轩
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<title>天猫智销系统</title>
<%@include file="/WEB-INF/views/head.jsp" %>
<%-- 创建菜单--%>
<script type="text/javascript">
$(function () {
$('#menuTree').tree({
url:"/util/loginUserMenus",
onClick:function(node) {
addTab(node.text,node.url);
}
});
})
//创建选项卡
function addTab(title, url){
if(url){
//判断是否存在，去在选中，不存在重新创建
if ($('#dataTab').tabs('exists', title)){
$('#dataTab').tabs('select', title);
} else {
//可以嵌套任何页面iframe frameborder边框
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#dataTab').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
}
</script>
<%--===========================================================================--%>
<%-- 右键菜单--%>
<script type="text/javascript">
$(function () {
//返回所有
//tab右键触发时候所触发的函数
$("#dataTab").tabs({
onContextMenu:function(e, title) {
//在每个菜单选项中添加title值
var $divMenu = $("#tab_rightmenu div[id]");
$divMenu.each(function() {
$(this).attr("id", title);
});
//显示menu菜单
$('#tab_rightmenu').menu('show', {
left: e.pageX,
top: e.pageY
});
e.preventDefault();
}
});
//实例化menu点击触发事件
$('#tab_rightmenu').menu({
"onClick":function(item) {
closeTab(item.id,item.text);
}
});
})
//关闭选项卡功能 注意：还需要上面的 .tabs和.menu右击触发事件显示菜单功能哦
function closeTab(title, text) {
if (text == '关闭全部标签') {
$(".tabs li").each(function (index, obj) {
//获取所有可关闭的选项卡
var tabTitle = $(".tabs-closable", this).text();
$("#dataTab").tabs("close", tabTitle);
});
}
if (text == '关闭其他标签') {
$(".tabs li").each(function (index, obj) {
//获取所有可关闭的选项卡
var tabTitle = $(".tabs-closable", this).text();
if (tabTitle != title) {
$("#dataTab").tabs("close", tabTitle);
}
});
}
if (text == '关闭右侧标签') {
var $tabs = $(".tabs li");
for (var i = $tabs.length - 1; i >= 0; i--) {
//获取所有可关闭的选项卡
var tabTitle = $(".tabs-closable", $tabs[i]).text();
if (tabTitle != title) {
$("#dataTab").tabs("close", tabTitle);
} else {
break;
}
}
}
if (text == '关闭左侧标签') {
var $tabs = $(".tabs li");
for (var i = 0; i < $tabs.length; i++) {
//获取所有可关闭的选项卡
var tabTitle = $(".tabs-closable", $tabs[i]).text();
if (tabTitle != title) {
$("#dataTab").tabs("close", tabTitle);
} else {
break;
}
}
}
}
</script>
<%--===========================================================================--%>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:90px;">
<div style="width:100%" align="center" >
<h2>欢迎进入源码时代智销系统</h2></div>
<div style=”text-align:right;>
<shiro:user >
欢迎[ <shiro:principal property="username" />]登录，
<a href="${pageContext.request.contextPath}/logout">退出</a>
<a id="div1" style="float: right"></a>
</shiro:user>
</div>
<%--时间--%>
<%--===========================================================================--%>
<script>
window.onload=function(){
//定时器每秒调用一次fnDateht
setInterval(function(){
fnDate();
},1000);}
//js 获取当前时间
function fnDate(){
var oDiv=document.getElementById("div1");
var date=new Date();
var year=date.getFullYear();//当前年份
var month=date.getMonth();//当前月份
var data=date.getDate();//天
var hours=date.getHours();//小时
var minute=date.getMinutes();//分
var second=date.getSeconds();//秒
var time=year+"-"+fnW((month+1))+"-"+fnW(data)+" "+fnW(hours)+":"+fnW(minute)+":"+fnW(second);
oDiv.innerHTML=time;}
//补位 当某个字段不是两位数时补0
function fnW(str){
var num;
str>9?num=str:num="0"+str;
return num;}
</script>
<%--===========================================================================--%>
</div>
</div>
<div data-options="region:'west',title:'菜单栏',split:true" style="width:150px;">
<ul id="menuTree"></ul>
</div>
<div id="dataTab" data-options="region:'center'"
class="easyui-tabs" style="background:#eee;">
<div title="主页" style="padding:5px;display:none;">
<img src="/images/head/88.jpg" style="width: 100%;height: 100%;padding: 0px" >
</div>
</div>
<%--===========================================================================--%>
<!--关闭tab选项的隐藏div菜单-->
<div id="tab_rightmenu" class="easyui-menu" style="width:135px; display:none">
<div name="tab_menu-tabcloseall" id="closeAll" data-options="iconCls:'icon-cancel'">关闭全部标签</div>
<div name="tab_menu-tabcloseother" id="closeOthor" data-options="iconCls:'icon-clear'">关闭其他标签</div>
<div class="menu-sep"></div>
<div name="tab_menu-tabcloseright" id="closeRight" data-options="iconCls:'icon-redo'">关闭右侧标签</div>
<div name="tab_menu-tabcloseleft" id="closeLeft" data-options="iconCls:'icon-undo'">关闭左侧标签</div>
</div>
</body>
</html>
类似资料：