English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Местоположение
  2. Главная страница
  3. Записки по опыту
  4. Текст

Меню правой кнопки мыши в стиле Bootstrap для zTree

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 (во время отправки письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. При подтверждении факта нарушения сайт незамедлительно удаляет涉嫌侵权的内容.

Основной учебник
Рекомендуем также