Bootstrap風(fēng)格的zTree右鍵菜單
HTML:
<%-- 右鍵菜單 --%> <div id="zTreeRightMenuContainer" style="z-index: 9999;"> <%-- 層級(jí) 0 --%> <ul class="dropdown-menu" role="menu" level="0"> <%-- 通過(guò)給菜單項(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ù)庫(kù)復(fù)制到不同的主機(jī)/數(shù)據(jù)庫(kù)</a></li> <li><a tabindex="-1">創(chuàng)建數(shù)據(jù)庫(kù)</a></li> <li><a tabindex="-1">改變數(shù)據(jù)庫(kù)</a></li> <li><a tabindex="-1">新數(shù)據(jù)搜索</a></li> <li><a tabindex="-1">創(chuàng)/建</a></li> <li><a tabindex="-1">更多數(shù)據(jù)庫(kù)操作</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ù)庫(kù)架構(gòu)HTML</a></li> </ul> </li> </ul> <%-- 層級(jí) 1 --%> <ul class="dropdown-menu" role="menu" level="1"> <li><a tabindex="-1">將數(shù)據(jù)庫(kù)復(fù)制到不同的主機(jī)/數(shù)據(jù)庫(kù)</a></li> <li><a tabindex="-1">創(chuàng)建數(shù)據(jù)庫(kù)</a></li> <li><a tabindex="-1">改變數(shù)據(jù)庫(kù)</a></li> <li><a tabindex="-1">新數(shù)據(jù)搜索</a></li> <li><a tabindex="-1">創(chuàng)/建</a></li> <li><a tabindex="-1">更多數(shù)據(jù)庫(kù)操作</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ù)庫(kù)架構(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ù)庫(kù)</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));
/* 以下方法是通過(guò)上面的js插件封裝的方法 */ /* parentNode(zTree容器 || 指定的節(jié)點(diǎn)) */ function initzTreeRightMenu(parentNode) { //樹(shù)形菜單右擊事件 $('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文件引入頁(yè)面(以我自己的項(xiàng)目為例:bsContextmenu.js)
3、在頁(yè)面初始化zTree之后,調(diào)用上面的方法:initzTreeRightMenu('#schemaMgrTree'); // ‘#schemaMgrTree' 是我自己項(xiàng)目的zTree容器ID
備注:
1、假如zTree中有異步載入的節(jié)點(diǎn)(以我自己項(xiàng)目為例:zTree中有部分節(jié)點(diǎn)是展開(kāi)了父節(jié)點(diǎn)之后才加載的,像這種情況則需要在 zTree 的 onExpandFun 里面綁定當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn))
function onExpandFun(event, treeId, treeNode) { /* 展開(kāi)當(dāng)前節(jié)點(diǎn)執(zhí)行的代碼.... *///綁定當(dāng)前展開(kāi)節(jié)點(diǎn)的子節(jié)點(diǎn)右擊事件 initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId 是當(dāng)前展開(kāi)節(jié)點(diǎn)的ID }
以上所述是小編給大家介紹的Bootstrap風(fēng)格的zTree右鍵菜單,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
electron 無(wú)邊框窗口拖拽移動(dòng)問(wèn)題及解決辦法
在做一款uTools的插件,懸浮文本,窗口是沒(méi)有標(biāo)題欄的,所以需要找一個(gè)地方可以拖動(dòng)移動(dòng)位置,本文給大家介紹electron 無(wú)邊框窗口拖拽移動(dòng)問(wèn)題及解決辦法,感興趣的朋友一起看看吧2023-12-12js變量值傳到php過(guò)程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過(guò)程詳解 將php解析成數(shù)據(jù),傳參數(shù)去后臺(tái),用ajax,或者原生js方式拼接url。明白原理,洞悉系統(tǒng)是先解析php,再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06JavaScript操作選擇對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript操作選擇對(duì)象的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05setTimeout的延時(shí)為0時(shí)多個(gè)瀏覽器的區(qū)別
一直比較迷惑:js的setTimeout到底會(huì)在什么時(shí)候執(zhí)行,如果執(zhí)行了,和主執(zhí)行腳本到底差多長(zhǎng)時(shí)間2012-05-05JavaScript實(shí)現(xiàn)給定時(shí)間相加天數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)給定時(shí)間相加天數(shù)的方法,涉及JavaScript針對(duì)日期與時(shí)間操作相關(guān)技巧,需要的朋友可以參考下2016-01-01JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫(huà)文字效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫(huà)文字效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)設(shè)置IE狀態(tài)欄文字顯示效果相關(guān)操作技巧,需要的朋友可以參考下2017-10-10