时间戳

首页 > 解决方案 > 动态改变jquery contextmenu

javascript - 动态改变jquery contextmenu

问题描述

我正在使用这个jquery 插件。菜单的实例化如下所示：

$.contextMenu({
    selector:'.disposition-menu',
    zIndex: 120,

    callback: function(key, options) {
        var stepID = $(this).closest('.card').attr("id").substring(5);
        handle_disposition(key,stepID);

    },
    items: {
        "pin": {name: "Pin to top"},
        "unpin": {name:"Unpin"},
        "complete": {name: "Mark step completed"},
        "remove": {name: "Remove step from Map"},
   },
   events: {
       show: function(){}, //this is where I'm lost
       hide: function(){} //this is where I'm lost
   },
    trigger: 'hover'
});

'handle disposition' 函数与 php 和数据库交互以将 '.card' 记录为在数据库中固定或取消固定，以便在重新加载页面时正确显示。HTML 是一个 bootstrap 4 卡片，如下所示：

<div class="card" >
    <div class="card-header ">
        <table class="title-table">
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td class="disposition-menu">&vellip;</td>
            </tr>
        </table>
    </div>

    <div class="card-body">
        ...{body content}
    </div>
</div>

我想要做的是在 pin 和 unpin 菜单项之间切换。一次只能在菜单上显示其中一个。如果该项目已经“固定”（即在数据库中标记，并由 '.card' html 中的数据属性表示），则应该出现“取消固定”......反之亦然。同样，一旦单击菜单上的“Pin...”，应立即更改菜单以隐藏“Pin”项并显示“Unpin”项，反之亦然

我查看了该插件的文档，但在使用带有冒号的键（例如选择器：）和回调之后使用函数时，我有点新手。该插件显然有一个“可见：”键，还有“显示：”和“隐藏：”键（根据这个问题使用，但我不知道如何将这些元素串在一起以实现我的目标。

标签： javascriptjquerydomcontextmenu

解决方案

使用build：

https://swisnl.github.io/jQuery-contextMenu/docs.html#build

如果在注册时发现构建回调，则不会立即构建菜单。菜单创建延迟到实际调用菜单显示的位置。

$.contextMenu({
  selector: ".menu",
  build: function($trigger) {
    var options = {
      callback: function(key, options) {
        var m = "clicked: " + key;
        alert(m);
      },
      items: {}
    };

    if ($trigger.hasClass('pin')) {
      options.items.unpin = {name: "unpin"};
    } else {
      options.items.pin = {name: "pin"};
    }

    return options;
  }
});
.menu{
    width: 100px;
    padding: 10px;
    background: red;
    margin: 10px;
    color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.0/jquery.contextMenu.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.0/jquery.contextMenu.min.js"></script>

<div class="menu pin">Pin</div>
<div class="menu">Unpin</div>

按需示例：

https://swisnl.github.io/jQuery-contextMenu/demo/dynamic-create.html

编辑：

$.contextMenu({
  selector: ".disposition-menu",
  build: function($trigger) {
    var options = {
      callback: function(key, options) {
        if(key == "pin")
            $trigger.removeClass("unpin").addClass("pin");
        else if(key == "unpin")
            $trigger.removeClass("pin").addClass("unpin");
      },
      items: {}
    };

    if ($trigger.hasClass('pin')) {
      options.items.unpin = {name: "unpin"};
    } else {
      options.items.pin = {name: "pin"};
    }

    return options;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.0/jquery.contextMenu.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.0/jquery.contextMenu.min.js"></script>
<div class="card" >
    <div class="card-header ">
        <table class="title-table">
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td class="disposition-menu">&vellip;</td>
            </tr>
        </table>
    </div>

    <div class="card-body">
        ...{body content}
    </div>
</div>

推荐阅读