为Tab选项卡加入:关闭当前、关闭所有右键弹出选项功能

分享 已结 26 4978
TangHanF
TangHanF 2018-4-4
悬赏:20飞吻
首先管理端模板的话还是使用官方提供的,参考链接: http://www.layui.com/demo/layuiAdmin.html

以下我只列举出关键代码,各位根据实际情况拷贝到自己项目适当位置

目前仅仅加入了:关闭当前、关闭所有,各位可以继续扩展,例如关闭左侧所有、关闭右侧所有、关闭其它,不是很难,循环判断即可。当然了,后面有时间我也会完善一下此功能
效果图:



代码截图:


具体可以参考我上传到Github的说明,地址: 点击此处直达



回帖
  • 谢谢楼主!首先说明,不是踩场啊[嘻嘻] [嘻嘻] ,适应我的项目做了一点修改:
    1.有些固定的tab不能关闭的,添加了一个配置项specialIDs,弹出的是默认右键菜单
    2.当前currentActiveTabID,修改为右键点击时候获取,避免菜单弹出位置是a,但操作的是B的情况。
    3.把let和const改为var,适配IE,IE这垃圾太坑了,但是项目偏偏要适配IE。

    希望能帮到同样需求的友友们!以下是代码
    layui.define(['element'], function (exports) {
    var element = layui.element;
    var $ = layui.jquery;
    var currentActiveTabID = undefined; //当前ID修改为全局
    var MOD_NAME = 'tabrightmenu';
    var RIGHTMENUMOD = function () {
    this.v = '1.0.0';
    this.author = 'TangHanF';
    this.email = 'guofu_gh@163.com';
    this.filter = '';//Tab选项卡的事件过滤

    };
    String.prototype.format = function () {
    if (arguments.length == 0) return this;
    var param = arguments[0];
    var s = this;
    if (typeof(param) == 'object') {
    for (var key in param) s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
    return s;
    } else {
    for (var i = 0; i < arguments.length; i++) s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
    return s;
    }
    }

    function createStyle(ulClassName) {
    var style = '.{name} {position: absolute;width: 110px;z-index: 9999;display: none;background-color: #fff;padding: 2px;color: #333;border: 1px solid #eee;border-radius: 2px;cursor: pointer;}.{name} li {text-align: center;display: block;height: 30px;line-height: 32px;}.{name} li:hover {background-color: #666;color: #fff;}'
    .format({name: ulClassName});
    return style;
    }

    /**
    * 初始化
    */
    RIGHTMENUMOD.prototype.render = function (opt) {
    createStyle();

    if (!opt.container) {
    console.error("[ERROR]使用rightmenu组件需要制定'container'属性!");
    return;
    }
    if (!opt.filter) {
    console.error("[ERROR]使用rightmenu组件需要制定'filter'属性!");
    return;
    }
    this.filter = opt.filter;

    opt.specialIDs = opt.specialIDs || []; //添加特殊ID,不需要弹出菜单的

    var defaultNavArr = [
    { eventName: 'refresh', title: '刷新当前页' },
    { eventName: 'closeall', title: '关闭所有' },
    { eventName: 'closethis', title: '关闭标签'},
    { eventName: 'closeothers', title: '关闭其它'},
    { eventName: 'closeleft', title: '关闭左侧标签' },
    { eventName: 'closeright', title: '关闭右侧标签' }
    ];
    opt = opt || {};
    opt.navArr = opt.navArr || defaultNavArr;
    CreateRightMenu(opt);
    };


    /**
    * 创建右键菜单项目
    * @param rightMenuConfig
    * @constructor
    */
    function CreateRightMenu(rightMenuConfig) {
    // 使用"filter"属性作为css样式名称
    $("<style></style>").text(createStyle(rightMenuConfig.filter)).appendTo($("head"));
    var li = '';
    $.each(rightMenuConfig.navArr, function (index, conf) {
    // li += '<li data-type="' + conf.eventName + '"><i class="layui-icon layui-icon-face-smile"></i> ' + conf.title + '</li>';
    li += '<li data-type="{eventName}"><i class="layui-icon {icon}"></i>{title}</li>'
    .format({eventName:conf.eventName,icon:conf.icon?conf.icon:"",title:conf.title});
    })
    var tmpHtml = '<ul class="{className}">{liStr} </ul>'.format({ liStr: li, className: rightMenuConfig.filter })
    $(rightMenuConfig.container).after(tmpHtml);
    _CustomRightClick(rightMenuConfig);
    }


    /**
    * 绑定右键菜单
    * @constructor
    */
    function _CustomRightClick(rightMenuConfig) {

    //屏蔽Tab右键
    //$("#" + rightmenuObj.filter + ' li').on('contextmenu', function (e) {
    // return false;
    //})
    $('#' + rightmenuObj.filter + ',' + rightmenuObj.filter + ' li').click(function () {
    $('.' + rightMenuConfig.filter).hide();
    });
    //修改为事件委托,处理动态添加的li
    $("#" + rightmenuObj.filter).on('contextmenu', 'li', function (e) {
    currentActiveTabID = $(e.target).attr('lay-id');// 获取当前激活的选项卡ID,当前ID改为右键菜单弹出时就获取

    if (rightMenuConfig.specialIDs.indexOf(currentActiveTabID) != -1 || currentActiveTabID == undefined)
    { //特殊ID,弹出默认的右键菜单
    return true;
    }
    var popupmenu = $("." + rightMenuConfig.filter);
    var leftValue = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
    var topValue = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
    popupmenu.css({left: leftValue, top: topValue}).show();
    return false;
    });

    // 点击空白处隐藏弹出菜单
    $(document).click(function (event) {
    event.stopPropagation();
    $("." + rightMenuConfig.filter).hide();
    });
    /**
    * 注册tab右键菜单点击事件
    */
    $('.' + rightMenuConfig.filter + ' li').click(function (e) {
    var tabtitle = $("#" + rightMenuConfig.filter + " li");
    var allTabIDArr = [];
    var idIndex = 0;
    $.each(tabtitle, function (i) {
    var id = $(this).attr("lay-id");
    if (rightMenuConfig.specialIDs.indexOf(id) == -1 || id == undefined) //去除特殊ID
    {
    allTabIDArr[idIndex] = id;
    idIndex++;
    }
    })

    // 事件处理
    switch ($(this).attr("data-type")) {
    case "closethis"://关闭当前,如果开始了tab可关闭,实际意义不大
    tabDelete(currentActiveTabID, rightMenuConfig.filter);
    break;
    case "closeall"://关闭所有
    tabDeleteAll(allTabIDArr, rightMenuConfig.filter);
    break;
    case "closeothers"://关闭非当前
    $.each(allTabIDArr, function (i) {
    var tmpTabID = allTabIDArr[i];
    if (currentActiveTabID != tmpTabID)
    tabDelete(tmpTabID, rightMenuConfig.filter);
    })
    break;
    case "closeleft"://关闭左侧全部
    var indexCloseleft = allTabIDArr.indexOf(currentActiveTabID);
    console.log(allTabIDArr.slice(0, indexCloseleft));
    tabDeleteAll(allTabIDArr.slice(0, indexCloseleft), rightMenuConfig.filter);
    break;
    case "closeright"://关闭右侧全部
    var indexCloseright = allTabIDArr.indexOf(currentActiveTabID);
    tabDeleteAll(allTabIDArr.slice(indexCloseright + 1), rightMenuConfig.filter);
    break;
    case "refresh":
    // 重新加载iFrame,实现更新。注意:如果你不是使用的iFrame则无效,具体刷新实现自行处理
    // document.getElementById(currentActiveTabID).contentWindow.location.reload(true);
    refreshiFrame();
    break;
    default:
    var currentTitle = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").text();
    rightMenuConfig.registMethod[$(this).attr("data-type")](currentActiveTabID, currentTitle, rightMenuConfig.container, $(this)[0]);

    }
    $('.rightmenu').hide();
    })
    }

    var tabDelete = function (id, currentNav) {
    //console.log("删除的TabID:" + id + ",所属组:" + currentNav);
    element.tabDelete(currentNav, id);//删除
    }
    var tabDeleteAll = function (ids, currentNav) {
    $.each(ids, function (i, item) {
    element.tabDelete(currentNav, item);
    })
    }
    /**
    * 重新加载iFrame,实现更新
    * @returns {boolean}
    */
    var refreshiFrame = function () {
    var $curFrame = $('iframe:visible');
    $curFrame.attr("src", $curFrame.attr("src"));
    return false;
    }

    var rightmenuObj = new RIGHTMENUMOD();
    exports(MOD_NAME, rightmenuObj);
    })
    0 回复
  • 先赞一个[good] ,今天试了你的方法,并做了点优化
    基本思路:
    动态添加tab,绑定右键菜单方法时,一个一个绑定,且右键菜单出现前,添加点击事件触发当前tab
    代码如下:
    // 绑定右键菜单
    function customRightClick(id){

    // 获取当前tab对应ul>li
    var li = $(".layui-tab-title li");
    // 获取当前tab对应ul>li的位置
    var ind=0;
    $.each(li,function(i,item){
    console.log(item);
    if($(item).attr('lay-id')==id&&i!=0){
    ind = i;
    }
    });

    // 屏蔽右键
    $(".layui-tab-title li:eq("+ind+")").on('contextmenu', function (e) {

    // 选中当前tab
    $(".layui-tab-title li:eq("+ind+")").trigger("click");

    // 菜单浮窗
    var popupmenu = $(".rightmenu");
    l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
    t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
    popupmenu.css({left: l, top: t}).show();

    return false;

    });

    }
    结果展示:

    再次感谢分享!!

    1 回复
  • 收藏,好东西要收藏备用
    0 回复
  • TangHanF
    2018-4-5
    @BUG开发工程师 我会在github不定期更新相关内容,请及时更新
    0 回复
  • One丶
    2018-4-12
    正好需要,阿里嘎多
    0 回复
  • TangHanF
    2018-4-12
    @One丶 有问题可以一起讨论
    0 回复
  • TangHanF
    2018-4-12
    @One丶 因我在GitHub修改了文件名可能连接失效,本帖子已更新,连接可用
    0 回复
  • 星爵
    2018-5-19
    亲,还可以加一个刷新当前tab的按钮啊
    0 回复
  • TangHanF
    2018-5-19
    @星爵 可以
    0 回复
  • June051
    2018-6-26
    为什么我点右键出不来菜单啊?CustomRightClick ()函数在哪执行啊
    0 回复