如何使用Html实现添加、删除、右键菜单
.tabs{
width:800px;
margin:150px auto;
}
.tab-header {
position: relative;
height: 40px;
line-height: 40px;
background: #fafafa;
border-bottom: solid 2px #39AEF5;
overflow: hidden;
}
.tab-left, .tab-right {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
color: #888;
background-color: #ffffff;
cursor: pointer;
z-index: 1000;
}
.tab-left {
left: 0;
border-right: solid 1px #eee;
}
.tab-right {
right: 0;
border-left: solid 1px #eee;
}
.tabs-wrap {
position: relative;
overflow: hidden;
margin: 0 40px;
}
.tabs-wrap ul{
list-style-type: none;
height: 40px;
margin: 0;
padding: 0;
font-size: 14px;
width: 5000px;
}
.tabs-wrap ul li {
float: left;
display: inline-block;
}
.tabs-wrap ul li a {
display: block;
border-right: solid 1px #eee;
padding: 0 15px;
color: #888;
}
.tabs-wrap ul li.active a{
background-color: #39AEF5;
color: #fff;
}
.tabs-wrap ul li a:hover{
text-decoration: none;
}
//获取全部的tab标签的宽度
function getContentWidth(c){
var w = 0;
c.children().each(function(){
w += $(this).outerWidth(true);
});
return w;
}
// 判断tab是否已存在
function tabRepeat(id) {
var li = $(".tabs-content li");
var isRepeat = false;
$.each( li , function (i,n) {
if($(n).attr("data-id") == id){
isRepeat = true;
return false;
}
});
return isRepeat;
}
//添加tab方法
function addTab(id, title, content) {
var ul = $(".tabs-content");
var panels = $(".tab-panel");
var tab;
// 如果tab标题已存在,就打开当前标签页并返回
if (tabRepeat(id)) {
tab = $(".tabs-content li[data-id=" + id + "]");
scrollSelected(tab);
} else {
//创建tab
tab = $(
'
'' +
title +
' ' +
''
);
//创建tab面板
var tabPanel = $(
' content + '
);
//将tab和tab面板添加到页面
tab.appendTo(ul);
tabPanel.appendTo(panels);
//如果标签过多,就滚动标签容器使标签显示
var tabsWidth = getContentWidth(ul);
tabsWidth > $(".tabs-wrap").width() && ul.animate({
"margin-left" : $(".tabs-wrap").width() - tabsWidth
});
}
//选中tab
selectTab(tab);
}
//选中标签页
function selectTab(self){
//所有的tab取消选中
$(".tabs-content li").removeClass("active");
//隐藏所有的面板
$(".panel-content ").hide();
//选中时显示选中的标签页
self.addClass("active");
var id = self.attr("data-id");
$(".panel-content[data-id="+ id + "]").show();
return false;
}
//选中时移动Tab
function scrollSelected(self){
var w= parseInt(self.css("width"));
var ul = $(".tabs-content");
var ulLeft = parseInt( ul.css("margin-left"));
var wapW = $(".tabs-wrap").width();
var tabsWidth = getContentWidth(ul);
var prveall = self.prevAll();
var nextall = self.nextAll();
var prveallwidth = 0;
var nextallwidth = 0;
var newleft;
$.each(prveall,function(i , n){
prveallwidth += parseInt($(n).css("width"))
});
$.each(nextall,function(i , n){
nextallwidth += parseInt($(n).css("width"))
});
if(prveallwidth + w < wapW){
newleft = 0
}else if( nextallwidth < wapW ){
newleft = wapW - tabsWidth
}else{
newleft = -prveallwidth + wapW/2
}
if( prveallwidth < -ulLeft || prveallwidth > wapW - w ){
ul.animate({
"margin-left": newleft
})
}
}
//删除标签页
function closeTab(self){
var li = self.parents("li");
var id = li.attr("data-id");
var nextLI = li.next();
var prevLI = li.prev();
var w = li.width();
var ul = $(".tabs-content");
var tabConLeft = parseInt(ul.css("margin-left"));
//删除标签和面板
li.remove();
$(".panel-content[data-id="+ id + "]").remove();
//删除标签页时显示其他标签页
if(li.hasClass("active") && nextLI.size() == 0 ){
prevLI.addClass("active");
$(".panel-content[data-id="+ prevLI.attr("data-id") + "]").show();
}else if(li.hasClass("active") && nextLI.size() != 0){
nextLI.addClass("active");
$(".panel-content[data-id="+ nextLI.attr("data-id") + "]").show();
return false
}
//需要时滚动标签
tabConLeft < 0 && ul.animate({
"margin-left": tabConLeft + w > 0 ? 0 : tabConLeft + w
});
}
//绑定点击事件
function bindEvents(self) {
self.unbind().bind("click", function (e) {
var left = 200;
var ul = $(".tabs-content");
var ulLeft = parseInt(ul.css("margin-left"));
var tabsWidth = getContentWidth(ul);
if ($(e.target).hasClass("tab-left") || $(e.target).parent().hasClass("tab-left")) {
ulLeft < 0 && scrollBy(left);
} else if ($(e.target).hasClass("tab-right") || $(e.target).parent().hasClass("tab-right")) {
ulLeft > $(".tabs-wrap").width() - tabsWidth && scrollBy(-left)
} else if($(e.target).hasClass("tab-close")){
closeTab($(e.target))
}else{
var li = $(e.target).closest('li');
if(li.length){
selectTab(li);
}
return false
}
}).on('contextmenu','li',function(e){
e.preventDefault();
selectTab($(this));
$(".Rightmenu").css({
display: 'block',
left: e.pageX,
top: e.pageY
});
});
tabRightmenuEven();
}
//设置标签滚动
function scrollBy(left){
var ul = $(".tabs-content");
var ulLeft = parseInt(ul.css("margin-left"));
var tabsWidth = getContentWidth(ul);
var newLeft = ulLeft + left;
if(newLeft > 0 ){
newLeft = 0
}else if(newLeft < $(".tabs-wrap").width() - tabsWidth){
newLeft = $(".tabs-wrap").width() - tabsWidth
}
ul.animate({
"margin-left": newLeft
})
}
//绑定右键菜单事件
function tabRightmenuEven() {
//离开选项卡时,隐藏右键菜单
$(".Rightmenu").on('mouseleave',function(){
$(this).hide();
return false;
});
$(".sidebar, .main, .top-navbar").mouseover(function(){
$(".Rightmenu").hide();
});
//刷新
$('.tabUpdate').click(function () {
var tabs = $(".tabs-content li");
tabs.each(function (i, n) {
if ($(n).hasClass("active")) {
var id = $(n).attr("data-id");
//用js调用强制刷新
$(".panel-content[data-id = '"+ id +"'] iframe").attr('src', $(".panel-content[data-id = '"+ id +"'] iframe").attr('src'));
}
});
$(".Rightmenu").hide();
return false;
});
//关闭全部
$(".tabCloseAll").click(function () {
var tabs = $(".tabs-content li");
$.each( tabs, function( i , n){
var id = $(n).attr("data-id");
if(id != 0){
$(n).remove();
$(".panel-content[data-id = '"+ id +"']").remove();
}else{
$(n).addClass("active");
$(".panel-content[data-id = '"+ id +"']").show();
}
});
$(".Rightmenu").hide();
return false;
});
//关闭其他页面
$(".tabCloseOther").click(function () {
var tabs = $(".tabs-content li");
tabs.parent().css("margin-left", "0px");
tabs.each(function (i, n) {
if (i != 0 && !$(n).hasClass("active")) {
var id = $(n).attr("data-id");
$(n).remove();
$(".panel-content[data-id = '"+ id +"']").remove();
}
});
$(".Rightmenu").hide();
return false;
});
//关闭当前tab之前的所有页面
$(".tabprevClose").click(function () {
var tab = $(".tabs-content li.active");
var prevalltab = tab.prevAll();
var ulLeft = parseInt(tab.parent().css("margin-left"));
prevalltab.each(function (i, n) {
if (i != prevalltab.length-1) {
var id = $(n).attr("data-id");
$(n).remove();
$(".panel-content[data-id = '"+ id +"']").remove();
}
});
ulLeft < 0 && tab.parent().animate({ "margin-left" : 0 });
$(".Rightmenu").hide();
return false;
});
//关闭当前tab之后的所有页面
$(".tabnextClose").click(function () {
var tab = $(".tabs-content li.active");
var nextalltab = tab.nextAll();
var ulLeft = parseInt(tab.parent().css("margin-left"));
var wapW = $(".tabs-wrap").width();
nextalltab.each(function (i, n) {
var id = $(n).attr("data-id");
$(n).remove();
$(".panel-content[data-id = '" + id + "']").remove();
});
var tabs = $(".tabs-content li");
var tabsW = 0;
tabs.each(function(z,x){
tabsW += parseInt($(x).css("width"));
});
if(ulLeft < 0 ){
tab.parent().animate({
"margin-left" : tabsW < wapW ? 0 : wapW - tabsW
});
}
$(".Rightmenu").hide();
return false;
});
}
$(function(){
$(".btn").click(function(){
var id = $(this).attr("data-id");
var title = $(this).text();
var content = '';
addTab(id,title,content);
bindEvents($(".tab-header"));
return false
});
})