Bootstrap風(fēng)格的zTree右鍵菜單

HTML：

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)信州免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

<%-- 右鍵菜單 --%>
<div id="zTreeRightMenuContainer" >
 <%-- 層級(jí) 0 --%>
 <ul class="dropdown-menu" role="menu" level="0">
　　　　<%-- 通過給菜單項(xiàng)添加樣式“hasChildren”并在li標(biāo)簽下添加菜單結(jié)構(gòu)即可擴(kuò)展子級(jí)菜單 --%>
  <li class="hasChildren"><a tabindex="-1" action="refreshzTreeObj">刷新</a>
   <ul class="dropdown-menu" role="menu" level="1">
    <li><a tabindex="-1">將數(shù)據(jù)庫復(fù)制到不同的主機(jī)/數(shù)據(jù)庫</a></li>
    <li><a tabindex="-1">創(chuàng)建數(shù)據(jù)庫</a></li>
    <li><a tabindex="-1">改變數(shù)據(jù)庫</a></li>
    <li><a tabindex="-1">新數(shù)據(jù)搜索</a></li>
    <li><a tabindex="-1">創(chuàng)/建</a></li>
    <li><a tabindex="-1">更多數(shù)據(jù)庫操作</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1">備份/導(dǎo)出</a></li>
    <li><a tabindex="-1">導(dǎo)入</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1">在創(chuàng)建數(shù)據(jù)庫架構(gòu)HTML</a></li>
   </ul>
  </li>
 </ul>
 <%-- 層級(jí) 1 --%>
 <ul class="dropdown-menu" role="menu" level="1">
  <li><a tabindex="-1">將數(shù)據(jù)庫復(fù)制到不同的主機(jī)/數(shù)據(jù)庫</a></li>
  <li><a tabindex="-1">創(chuàng)建數(shù)據(jù)庫</a></li>
  <li><a tabindex="-1">改變數(shù)據(jù)庫</a></li>
  <li><a tabindex="-1">新數(shù)據(jù)搜索</a></li>
  <li><a tabindex="-1">創(chuàng)/建</a></li>
  <li><a tabindex="-1">更多數(shù)據(jù)庫操作</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1">備份/導(dǎo)出</a></li>
  <li><a tabindex="-1">導(dǎo)入</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1">在創(chuàng)建數(shù)據(jù)庫架構(gòu)HTML</a></li>
 </ul>
 <%-- 層級(jí) 2 --%>
 <ul class="dropdown-menu" role="menu" level="2">
  <li><a tabindex="-1">創(chuàng)建表</a></li>
  <li><a tabindex="-1">將表復(fù)制到不同的主機(jī)/數(shù)據(jù)庫</a></li>
  <li><a tabindex="-1">數(shù)據(jù)搜索</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1">計(jì)劃備份</a></li>
  <li><a tabindex="-1">備份表作為SQL轉(zhuǎn)儲(chǔ)</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風(fēng)格） */
;(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);
   // Delegating the `closemenu` only on the currently opened menu.
   // This prevents other opened menus from closing.
   $('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()};
   } else {
    Y = {"top": mouseY + $(window).scrollTop()};
   }
   if ((mouseX + menuWidth > boundsX) && ((mouseX - menuWidth) > 0)) {
    X = {"left": mouseX - menuWidth + $(window).scrollLeft()};
   } else {
    X = {"left": mouseX + $(window).scrollLeft()};
   }
   // If context-menu's parent is positioned using absolute or relative positioning,
   // the calculated mouse position will be incorrect.
   // Adjust the position of the menu by its offset parent position.
   parentOffset = $menu.offsetParent().offset();
   X.left = X.left - parentOffset.left;
   Y.top = Y.top - parentOffset.top;
   return $.extend(tp, Y, X);
  }
 };
 /* CONTEXT MENU PLUGIN DEFINITION
  * ========================== */
 $.fn.contextmenu = function (option, e) {
  return this.each(function () {
   var $this = $(this)
    , data = $this.data('context')
    , options = (typeof option == 'object') && option;
   if (!data) $this.data('context', (data = new ContextMenu($this, options)));
   if (typeof option == 'string') data[option].call(data, e);
  });
 };
 $.fn.contextmenu.Constructor = ContextMenu;
 /* APPLY TO STANDARD CONTEXT MENU ELEMENTS
  * =================================== */
 $(document)
  .on('contextmenu.context.data-api', function () {
   $(toggle).each(function () {
    var data = $(this).data('context');
    if (!data) return;
    data.closemenu();
   });
  })
  .on('contextmenu.context.data-api', toggle, function (e) {
   $(this).contextmenu('show', e);
   e.preventDefault();
   e.stopPropagation();
  });
}(jQuery));

/* 以下方法是通過上面的js插件封裝的方法 */
/*
　　parentNode（zTree容器 || 指定的節(jié)點(diǎn)）
*/
function initzTreeRightMenu(parentNode) {
 //樹形菜單右擊事件
 $('li, a', $(parentNode)).contextmenu({
  target: '#zTreeRightMenuContainer', //此設(shè)置項(xiàng)是zTree的容器
  before: function (e, element, target) {
   //當(dāng)前右擊節(jié)點(diǎn)ID
   var selectedId = element[0].tagName == 'LI' ? element.attr('id') : element.parent().attr('id');
   //根據(jù)節(jié)點(diǎn)ID獲取當(dāng)前節(jié)點(diǎn)詳細(xì)信息
   curSelectNode = zTreeObj.getNodeByTId(selectedId);
   //當(dāng)前節(jié)點(diǎn)的層級(jí)
   var level = curSelectNode.level;
   level = 0;
   //選中當(dāng)前右擊節(jié)點(diǎn)
   zTreeObj.selectNode(curSelectNode);
   //根據(jù)當(dāng)前節(jié)點(diǎn)層級(jí)顯示相應(yīng)的菜單
   $('#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相關(guān)js、css文件（以我自己的項(xiàng)目為例：jquery.ztree.all-3.5.min.js，zTreeStyle.css）；

2、將上面給出的右鍵菜單插件另存為js文件引入頁面（以我自己的項(xiàng)目為例：bsContextmenu.js）

3、在頁面初始化zTree之后，調(diào)用上面的方法：initzTreeRightMenu('#schemaMgrTree'); // ‘#schemaMgrTree' 是我自己項(xiàng)目的zTree容器ID

備注：

1、假如zTree中有異步載入的節(jié)點(diǎn)（以我自己項(xiàng)目為例：zTree中有部分節(jié)點(diǎn)是展開了父節(jié)點(diǎn)之后才加載的，像這種情況則需要在 zTree 的 onExpandFun 里面綁定當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)）

function onExpandFun(event, treeId, treeNode) {
  /* 展開當(dāng)前節(jié)點(diǎn)執(zhí)行的代碼.... *///綁定當(dāng)前展開節(jié)點(diǎn)的子節(jié)點(diǎn)右擊事件
  initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId 是當(dāng)前展開節(jié)點(diǎn)的ID
}

以上所述是小編給大家介紹的Bootstrap風(fēng)格的zTree右鍵菜單，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站名稱：Bootstrap風(fēng)格的zTree右鍵菜單
分享URL：http://chinadenli.net/article12/pgpegc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Bootstrap風(fēng)格的zTree右鍵菜單