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

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. النص الرئيسي

قائمة القوائم اليمنى zTree بأسلوب Bootstrap

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>
   <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';
 /* تعريف فئة سياق-القائمة */
  * ============================ */
 var toggle = '[data-toggle="سياق"]';
 var سياق-القائمة = 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();
 };
 سياق-القائمة.prototype = {
  constructor: سياق-القائمة
  , 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);
   // لا تنتشر حدث النقر لآخر حالي
   // قوائم المفتوحة لن تغلق.
   إذا (e) {
    e.stopPropagation();
   }
  }
  , keydown: function (e) {
   إذا (e.which == 27) هذا.closemenu(e);
  }
  , before: function (e) {
   إذا كان الصحيح;
  }
  , onItem: function (e) {
   إذا كان الصحيح;
  }
  , listen: function () {
   هذا.$الذات.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 () {
   هذا.$الذات.off('.السياق.data-api').removeData('سياق');
   $('html').off('.السياق.data-api');
  }
  , isDisabled: function () {
   إذا (هذا.$الذات.hasClass('ممنوع') ||
    هذا.$الذات.attr('ممنوع');
  }
  , getMenus: function () {
   تعريف selector = هذا.$الذات.data('هدف');
    , $menu;
   إذا (!selector) {
    selector = هذا.$الذات.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()};
   }
   // إذا كان موقع وسم القائمة المتنوعة محددًا باستخدام التوضيح المطلق أو التوضيح النسبي ,
   // الموقع المحدد للفأرة سيكون غير صحيح.
   // ضبط موقع القائمة بواسطة موقع الوالدي للقائمة.
   parentOffset = $menu.offsetParent().offset();
   X.left = X.left - parentOffset.left;
   Y.top = Y.top - parentOffset.top;
   return $.extend(tp, Y, X);
  }
 };
 /* تعريف مكتبة قائمة السياق */
  *========================================*/
 $.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;
 /* تطبيق على عناصر القائمة السياق القياسية */
  *=======================================*/
 $(document)
  .on('menucontext.context.data-api', function () {
   $(toggle).each(function () {
    var data = $(this).data('context');
    if (!data) return;
    data.closemenu();
   });
  )
  .on('menucontext.context.data-api', toggle, function (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) {
   // معرف العنصر المضروب بالضربة اليمنى الحالي
   تعريف selectedId = element[0].tagName == 'LI' ? element.attr('id') : element.parent().attr('id');
   // الحصول على تفاصيل العنصر الحالي بناءً على معرف العنصر
   curSelectNode = zTreeObj.getNodeByTId(selectedId);
   // مستوى العنصر الحالي
   تعريف مستوى = curSelectNode.level;
   مستوى = 0;
   // اختيار العنصر المختار بالضربة اليمنى
   zTreeObj.selectNode(curSelectNode);
   // عرض القائمة المناسبة بناءً على مستوى العنصر الحالي
   $('#zTreeRightMenuContainer ul.dropdown-menu[level="' + level + '"]').removeClass('hide').siblings().addClass('hide');
  },
  onItem: function (context, e) {
   تعريف action = $(e.target).attr('action');
   this.closemenu();
   إذا (action) {
    zTreeRightMenuFuns[action]();
   }
  }
 });
}

الخطوات:

1- دمج ملفات js و css الخاصة بـ zTree (مثالًا، في مشروعي الخاص بي: jquery.ztree.all-3.5.min.js، zTreeStyle.css)；

2. احفظ المكون الإضافي للقائمة السياقية اليمينية المقدم أعلاه كملف js وأدرجه في الصفحة (مثال على مشروعي: bsContextmenu.js)

3. بعد إعداد zTree في الصفحة، قم بتشغيل الطريقة المذكورة أعلاه: initzTreeRightMenu('#schemaMgrTree'); // ‘#schemaMgrTree' هو معرف صندوق zTree لمشروعي

ملاحظة:

1. إذا كان هناك عقدة يتم تحميلها بشكل متزامن في zTree (مثال على مشروعي: بعض العقد في zTree يتم فتحها بعد تحميل العقدة الأم، في هذه الحالة يجب ربط فرع العقدة الحالية في onExpandFun zTree)

function onExpandFun(event, treeId, treeNode) {
  /* الكود الذي يتم تنفيذه عند فتح العقدة الحالية... *///تحديد أحداث الضغط الأيمن على فرع العقدة الحالية
  initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId هو معرف العقدة المفتوحة الحالية
}

ما تم ذكره أعلاه هو قائمة قدمها المحرر لكم من Bootstrap style zTree قائمة السياق، آمل أن تكون مفيدة لكم، إذا كان لديكم أي استفسارات، يرجى ترك تعليق، وسأقوم بالرد على رسائلكم في الوقت المناسب. وأعزز من خلال هذا الشكر لكم جميعًا لدعم موقع呐喊 التعليمي!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات للمالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بشكل متعاوني وتحميلها بشكل مستقل، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتويات المشبوهة بشكل فوري.

تعليمية الأساس
سيحبك