English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML:
<%-- Правый контекстное меню --%> <div id="zTreeRightMenuContainer" style="z-index: 9999;"> <%-- Уровень 0 --%> <ul class="dropdown-menu" role="menu" level="0"> <%-- Расширение подменю можно реализовать, добавив стиль "hasChildren" к элементу меню и структуру меню под li-тегом --%> <li class="hasChildren"><a tabindex="-1" action="refreshzTreeObj">Обновить</a></li> <ul class="dropdown-menu" role="menu" level="1"> <li><a tabindex="-1">Копирование базы данных на другой сервер/базу данных</a></li> <li><a tabindex="-1">Создание базы данных</a></li> <li><a tabindex="-1">Изменение базы данных</a></li> <li><a tabindex="-1">Новый поиск данных</a></li> <li><a tabindex="-1">Создание/создание</a></li> <li><a tabindex="-1">Дополнительные операции с базой данных</a></li> <li class="divider"></li> <li><a tabindex="-1">Резервное копирование/экспорт</a></li> <li><a tabindex="-1">Импорт</a></li> <li class="divider"></li> <li><a tabindex="-1">Создание структуры базы данных в HTML</a></li> </ul> </li> </ul> <%-- Уровень 1 --%> <ul class="dropdown-menu" role="menu" level="1"> <li><a tabindex="-1">Копирование базы данных на другой сервер/базу данных</a></li> <li><a tabindex="-1">Создание базы данных</a></li> <li><a tabindex="-1">Изменение базы данных</a></li> <li><a tabindex="-1">Новый поиск данных</a></li> <li><a tabindex="-1">Создание/создание</a></li> <li><a tabindex="-1">Дополнительные операции с базой данных</a></li> <li class="divider"></li> <li><a tabindex="-1">Резервное копирование/экспорт</a></li> <li><a tabindex="-1">Импорт</a></li> <li class="divider"></li> <li><a tabindex="-1">Создание структуры базы данных в HTML</a></li> </ul> <%-- Уровень 2 --%> <ul class="dropdown-menu" role="menu" level="2"> <li><a tabindex="-1">Создание таблицы</a></li> <li><a tabindex="-1">Копирование таблицы на другой сервер/базу данных</a></li> <li><a tabindex="-1">Поиск данных</a></li> <li class="divider"></li> <li><a tabindex="-1">Планируемое резервное копирование</a></li> <li><a tabindex="-1">Резервное копирование таблицы в виде SQL-дамп</a></li> </ul> </div>
CSS:
/* Правый клик меню - start */ .dropdown-menu .dropdown-menu { position: absolute; top: -9px; left: 100%; } .dropdown-menu li { position: relative; } .dropdown-menu li.hasChildren:before { content: ''; position: absolute; top: 50%; right: 8px; width: 0; height: 0; margin-top: -5px; border-style: solid; border-color: transparent transparent transparent rgba(0, 0, 0, 0.5); border-width: 5px 0 5px 5px; pointer-events: none; } .dropdown-menu li.hasChildren:hover > .dropdown-menu { display: block; } /* 右键菜单 - end */
JS:
/* 以下为右键菜单插件(Bootstrap风格) */ ;(function ($) { 'use strict'; /* CONTEXTMENU CLASS DEFINITION * ============================ */ var toggle = '[data-toggle="context"]'; var ContextMenu = function (element, options) { this.$element = $(element); this.before = options.before || this.before; this.onItem = options.onItem || this.onItem; this.scopes = options.scopes || null; if (options.target) { this.$element.data('target', options.target); } this.listen(); }); ContextMenu.prototype = { constructor: ContextMenu , show: function (e) { var $menu; , evt; , tp; , items; , relatedTarget = {relatedTarget: this, target: e.currentTarget}; if (this.isDisabled()) return; this.closemenu(); if (this.before.call(this, e, $(e.currentTarget)) === false) return; $menu = this.getMenu(); $menu.trigger(evt = $.Event('show.bs.context', relatedTarget)); tp = this.getPosition(e, $menu); items = 'li:not(.divider)'; $menu.attr('style', ''); .css(tp); .addClass('open'); .on('click.context.data-api', items, $.proxy(this.onItem, this, $(e.currentTarget))); .trigger('shown.bs.context', relatedTarget); // делегирование `closemenu` только на текущее открытое меню. // Это предотвращает закрытие других открытых меню. $('html') .on('click.context.data-api', $menu.selector, $.proxy(this.closemenu, this)); return false; } , closemenu: function (e) { var $menu; , evt; , items; , relatedTarget; $menu = this.getMenu(); if (!$menu.hasClass('open')) return; relatedTarget = {relatedTarget: this}; $menu.trigger(evt = $.Event('hide.bs.context', relatedTarget)); items = 'li:not(.divider)'; $menu.removeClass('open') .off('click.context.data-api', items) .trigger('hidden.bs.context', relatedTarget); $('html') .off('click.context.data-api', $menu.selector); // Don't propagate click event so other currently // opened menus won't close. if (e) { e.stopPropagation(); } } , keydown: function (e) { if (e.which == 27) this.closemenu(e); } , before: function (e) { return true; } , onItem: function (e) { return true; } , listen: function () { this.$element.on('contextmenu.context.data-api', this.scopes, $.proxy(this.show, this)); $('html').on('click.context.data-api', $.proxy(this.closemenu, this)); $('html').on('keydown.context.data-api', $.proxy(this.keydown, this)); } , destroy: function () { this.$element.off('.context.data-api').removeData('context'); $('html').off('.context.data-api'); } , isDisabled: function () { return this.$element.hasClass('disabled') || this.$element.attr('disabled'); } , getMenu: function () { var selector = this.$element.data('target'); , $menu; if (!selector) { selector = this.$element.attr('href'); selector = selector && selector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7 } $menu = $(selector); return $menu && $menu.length ? $menu : this.$element.find(selector); } , getPosition: function (e, $menu) { var mouseX = e.clientX , mouseY = e.clientY , boundsX = $(window).width() , boundsY = $(window).height() , menuWidth = $menu.find('.dropdown-menu').outerWidth() , menuHeight = $menu.find('.dropdown-menu').outerHeight() , tp = {"position": "absolute", "z-index": 9999} , Y, X, parentOffset; if (mouseY + menuHeight > boundsY) { Y = {"top": mouseY - menuHeight + $(window).scrollTop()}; } Y = {"top": mouseY + $(window).scrollTop()}; } if ((mouseX + menuWidth > boundsX) && ((mouseX - menuWidth) > 0)) { X = {"left": mouseX - menuWidth + $(window).scrollLeft()}; } X = {"left": mouseX + $(window).scrollLeft()}; } // Если родитель контекстного меню установлен с помощью абсолютного или относительного позиционирования, // рассчитанная позиция мыши будет неправильной. // Корректирует положение меню по позиции родительского элемента. parentOffset = $menu.offsetParent().offset(); X.left = X.left - parentOffset.left; Y.top = Y.top - parentOffset.top; возвращает $.extend(tp, Y, X); } }); /* ОПИСАНИЕ ПЛАГИНА КОНТЕКСТНОГО МЕНЮ * ========================== */ $.fn.contextmenu = функция (option, e) { возвращает this.each(function () { var $this = $(this) , data = $this.data('context') , options = (typeof option == 'object') && option; если (!data) $this.data('context', (data = new ContextMenu($this, options))); если (typeof option == 'string') data[option].call(data, e); ); }); $.fn.contextmenu.Constructor = ContextMenu; /* ПРИМЕНЯЕТСЯ К ЭЛЕМЕНТАМ СТАНДАРТНОГО КОНТЕКСТНОГО МЕНЮ * =================================== */ $(document) .он('контекстное меню.context.data-api', функция () { $(toggle).each(function () { var data = $(this).data('context'); если (!data) возвращает; data.closemenu(); ); }); .он('контекстное меню.context.data-api', переключатель, функция (e) { $(this).contextmenu('show', e);} e.preventDefault(); e.stopPropagation(); ); }(jQuery));
/* 以下方法是通过上面的js插件封装的方法 */ /* parentNode(zTree容器 || 指定的节点) */ function initzTreeRightMenu(parentNode) { //树形菜单右击事件 $('li, a', $(parentNode)).contextmenu({ target: '#zTreeRightMenuContainer', //此设置项是zTree的容器 before: function (e, element, target) { //当前右击节点ID var selectedId = element[0].tagName == 'LI' ? element.attr('id') : element.parent().attr('id'); //根据节点ID获取当前节点详细信息 curSelectNode = zTreeObj.getNodeByTId(selectedId); //当前节点的层级 var level = curSelectNode.level; level = 0; //选中当前右击节点 zTreeObj.selectNode(curSelectNode); //根据当前节点层级显示相应的菜单 $('#zTreeRightMenuContainer ul.dropdown-menu[level="' + level + '"]').removeClass('hide').siblings().addClass('hide'); }, onItem: function (context, e) { var action = $(e.target).attr('action'); this.closemenu(); if (action) { zTreeRightMenuFuns[action](); } } ); }
步骤:
1、引入zTree相关js、css文件(以我自己的项目为例:jquery.ztree.all-3.5.min.js,zTreeStyle.css);
2. Сохраните предоставленный плагин правой клавиши меню как файл js и включите его в страницу (например, в моем проекте: bsContextmenu.js)
3. После инициализации zTree на странице вызовите указанный метод: initzTreeRightMenu('#schemaMgrTree'); // ‘#schemaMgrTree' - это ID контейнера zTree в моем проекте
Примечание:
1. Если в zTree есть узлы, загруженные асинхронно (например, в моем проекте: часть узлов zTree загружается после раскрытия родительского узла, в таких случаях необходимо привязать текущие подузлы в onExpandFun zTree)
function onExpandFun(event, treeId, treeNode) { /* Код выполнения при раскрытии текущего узла.... *///Привязка события правой клавиши мыши к подузлам текущего раскрытого узла initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId - это ID текущего раскрытого узла }
Указанные выше Bootstrap-стили zTree правая клавиша меню, я надеюсь, что это поможет вам, если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, я отвечу вам своевременно. В этом также очень благодарен всем за поддержку сайта呐喊 руководства!
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат автору, контент предоставлен пользователями Интернета, самостоятельно загружен, сайт не имеет права собственности, не был отредактирован вручную, не несет ответственности за связанные с этим юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. При подтверждении факта нарушения сайт незамедлительно удаляет涉嫌侵权的内容.