有没有用于显示嵌套上下文菜单的敲除插件? [英] Is there any knockout plugin for showing a nested context menu?

问题描述

有没有用于显示嵌套上下文菜单的敲除插件?

Is there any knockout plugin for showing a nested context menu?

我的特定需求是显示列表项的上下文菜单，该菜单具有"SendTo"菜单项，可能的子项必须在运行时设置.

My specific need is to show a contextmenu for list items, that has a "SendTo" menuitem and the possible subItems have to be set at runtime.

推荐答案

在显然缺少合适的插件的情况下，我选择了更为直接的淘汰赛方法.我确信代码可以更优雅地打包在自定义绑定中，但这是我想出的解决方案，如果有人需要类似的东西的话.在我的情况下，菜单在每次打开时都会生成，因为在我的用例中这很有意义.我确信该代码可以轻松地针对其他情况进行自定义.

In the apparent lack of suitable plugins I went for the more direct Knockout approach. I'm sure the code can be more elegantly packed in a custom binding but this is the solution I came up with, if anyone would need something similar. In my case the menu is build each time it's opened because it makes sense in my usecase. I'm sure the code can easily be customized to some other scenarios.

所以...标记:
<li data-bind="event: { contextmenu: $root.showSendToMenu }/> 用于显示弹出菜单，单击鼠标右键时该项目. 菜单本身的标记:

So... The markup:
<li data-bind="event: { contextmenu: $root.showSendToMenu }/> is used to show the popup menu, for an item on a right click. And the markup for the menu itself:

@*The send to popup menu*@
<ul class="context-menu" data-bind="visible:contextMenu.activeElement, style:{left:contextMenu.left, top:contextMenu.top}, template: { name: 'menu-item-template', foreach: contextMenu.items }, event: { mouseleave: contextMenu.contextMouseLeave }"></ul>

@*Template for a menu item*@
<script type="text/html" id="menu-item-template">
    <li>
        <!-- ko if: children -->
        <span data-bind="text:text"></span>
        <ul data-bind="template: { name: 'menu-item-template', foreach: children }"></ul>
        <!-- /ko -->
        <!-- ko if: !children -->
        <a href="#" data-bind="text:text, click:$root.onContextClick"></a>
        <!-- /ko -->
    </li>
</script>

在viewModel中，我有以下代码(TypeScript):

And in the viewModel, I have the following code (TypeScript):

contextMenu = { activeElement: ko.observable(null), left: ko.observable('0px'), top: ko.observable('200px'), items: ko.observableArray(<MenuItem[]>[]), contextMouseLeave : () => { this.contextMenu.activeElement(null); } };

    showSendToMenu = (item, event) => {

        //Set menu position
        this.contextMenu.left(event.pageX + 'px');
        this.contextMenu.top(event.pageY + 'px');

        //Build the menu
        var lines = [];
        for (var i = 0; i < this.prodLines().length; i++) {
            var line = this.prodLines()[i];

            if (line.lists().length > 0) {
                var lists = [];
                for (var j = 0; j < line.lists().length; j++) {
                    var list = line.lists()[j];
                    lists.push(new MenuItem(list.name(), null, list));
                }
                lines.push(new MenuItem(line.name + "->", lists, line));
            }
        }

        var items = [new MenuItem("SendTo ->", lines)];

        //Set the menu
        this.contextMenu.items(items);
        this.contextMenu.activeElement(item);
    }


    onContextClick = (menuItem: MenuItem) => {
        var sendToList = menuItem.tag;
        var item = this.contextMenu.activeElement();
        this.dropToList(item, sendToList);
        //Hide the menu
        this.contextMenu.activeElement(null);
    }

最后，我使用了这段CSS，使菜单的行为类似于菜单:

And lastly, I used this piece of css to make the menu behave menu-like:

.context-menu {
  position: absolute;
  padding: 0;
  margin: 0;
  z-index: 1030;
  background-color: #dddddd;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  min-width:100px;
  border: 1px solid gray;
  text-decoration:none;
}
.context-menu ul {
  position: absolute;
  z-index: 1031;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  display:none;
  left:98px;
  min-width:100px;
  top:-1px;
  background-color:#dddddd;
  border: 1px solid gray;
  text-decoration:none;
}

.context-menu li {
  position:relative;
}

.context-menu li:hover > ul {
  display:block;
}

.context-menu li {
  padding: 4px 20px;
  margin: 0;
  list-style-type: none;
  cursor: pointer;
  white-space: nowrap;
  color: #333333;
}
.context-menu ul > li:hover {
  background-color: white;
  text-decoration:underline;
}

我希望这会对某人有所帮助

I hope this will help someone

这篇关于有没有用于显示嵌套上下文菜单的敲除插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！