欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

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

 

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title></title>

    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--jquery 1.11.3-->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>

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

    <div class="tabs" id="tabs">

        <!--标签页导航条-->

        <div class="tab-header">

            <!--左边按钮-->

            <a class="tab-left">

                <i class="fa fa-backward"></i>

            </a>

            <!--右边按钮-->

            <a class="tab-right">

                <i class="fa fa-forward"></i>

            </a>

            <div class="tabs-wrap">

                <!--标签页内容-->

                <ul class="tabs-content">

                    <li class="active" data-id="0"><a href="#">首页</a></li>

                </ul>

            </div>

        </div>

        <!--标签页内容-->

        <div class="tab-panel" id="tab-panel">

            <div class="panel-content" data-id="0">

                <iframe class="myiframe" name="iframe0" scrolling="auto" width="100%" height="100%" src="view/home.html" frameborder="0"></iframe>

            </div>

        </div>

    </div>

 

    <ul class="dropdown-menu Rightmenu">

        <li class="tabUpdate"><a>刷新</a></li>

        <li class="divider"></li>

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

        <li class="divider"></li>

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

        <li class="divider"></li>

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

        <li class="divider"></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>

    <script >

        //获取全部的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>'

        );

        //tabtab面板添加到页面

        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>

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

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h18933.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-03-09 09:43 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。