首页 > 资讯 > 前端开发 > html >如何使用Html实现添加、删除、右键菜单

388

分享到

如何使用Html实现添加、删除、右键菜单

2024-04-02 19:04:59 388人浏览独家记忆

摘要

这篇文章将为大家详细讲解有关如何使用html实现添加、删除、右键菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下：<!DOCTYPE html>&l

这篇文章将为大家详细讲解有关如何使用html实现添加、删除、右键菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

代码如下：

<!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实现添加、删除、右键菜单”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用Html实现添加、删除、右键菜单

本文链接: https://www.lsjlt.com/news/89783.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

如何使用Html实现添加、删除、右键菜单

本篇文章演示代码以及资料文档资料下载

如何使用Html实现添加、删除、右键菜单

vbs如何实现右键菜单中添加CMD HERE

如何实现右键菜单中添加打开MS-DOS的批处理bat

Windows中如何使用注册表删除IE浏览器中右键菜单项

python实现应用程序在右键菜单中添加打开方式功能

ubuntu下如何实现右键菜单添加新建word、excel文档等快捷方式

Win7桌面右键菜单小工具选项如何删除没有太多作用

Java如何实现Excel表单控件的添加与删除

如何使用vbs实现IE浏览器增加复制图像地址的右键菜单

如何实现jQuery EasyUI右键菜单变灰不可用效果

jQuery如何实现的简单动态添加、删除表格功能

如何用Vue.js实现动态添加、删除选题功能

Angular如何实现搜索、过滤、批量删除、添加、表单验证功能

如何使用android实现左右侧滑菜单效果的方法

如何使用HTML和CSS实现菜单选项布局

如何使用HTML和CSS实现菜单选项卡布局

如何使用HTML和CSS实现一个水平菜单布局

如何使用MongoDB实现数据的增加、修改、删除功能

如何使用HTML和CSS实现一个水平滚动导航菜单布局

如何使用vbs实现可自删除、开启3389创建用户粘滞键后门