首页 / 知识

Html实现添加、删除、右键菜单

2023-04-11 16:03:00

如何实现一个右键菜单效果，这在初级前端学习中是一个常见的实例，divcss小编实现代码如下：

<!DOCTYPE html>

<head>

<style>

.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;

}

</style>

</head>

<body>

</a>

</a>

</ul>

</div>

</div>

<li class="tabCloseAll"><a>关闭全部选项卡</a></li>

<li class="tabCloseOther"><a>关闭其他选项卡</a></li>

<li class="tabnextClose"><a>关闭右边其他选项卡</a></li>

<li class="tabprevClose"><a>关闭左边其他选项卡</a></li>

</ul>

<a class="btn btn-primary btn-lg" data-id="1" style="margin-left: 100px">添加TABS1</a>

<a class="btn btn-primary btn-lg" data-id="2" style="">添加TABS2</a>

<a class="btn btn-primary btn-lg" data-id="3" style="">添加TABS3</a>

<a class="btn btn-primary btn-lg" data-id="4" style="">添加TABS4</a>

<a class="btn btn-primary btn-lg" data-id="5" style="">添加TABS5</a>

<a class="btn btn-primary btn-lg" data-id="6" style="">添加TABS6</a>

<a class="btn btn-primary btn-lg" data-id="7" style="">添加TABS7</a>

<a class="btn btn-primary btn-lg" data-id="8" style="">添加TABS8</a>

<a class="btn btn-primary btn-lg" data-id="9" style="">添加TABS9</a>

//获取全部的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 = $(

'<li data-id = "' + id + '">' +

'<a href="javascript:void(0)">' +

title +

' <i class="fa fa-times-circle tab-close"></i></a>' +

'</li>'

);

//创建tab面板

var tabPanel = $(

'<div class="panel-content" data-id="'+ id +'">' +

content +

'</div>'

);

//将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;

});

}

</script>

$(function(){

$(".btn").click(function(){

var id = $(this).attr("data-id");

var title = $(this).text();

var content = '<iframe class="myiframe" scrolling="auto" width="100%" height="100%" src="view/home.html" frameborder="0"></iframe>';

addTab(id,title,content);

bindEvents($(".tab-header"));

return false

});

})

</script>

</body>

</html>

菜单右键菜单删除学习效果添加

首页 / 知识

Html实现添加、删除、右键菜单

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢