jsmind.menu.js

jsmind.menu.js

開源項目jsmind.js的右鍵擴展插件

jsmind.menu.js 文檔

• 說明：該文檔是遵循開源規範開發的初版jsmind插件。

• 功能：包含了 一、完整的右鍵功能 二、可配置右鍵功能選項 三、可配置的右鍵樣式重寫

• 依賴 ： jsmind.js https://github.com/hizzgdev/j...

• 項目地址： https://github.com/allensunji...

• 做者： Allen.sun
• 日期： 2019-12-05

歷史說明：因爲臨時接到一個組織架構任務，也是措手不及，緣由是並無接觸過相關的技術。原頁面的組織架構又根本無法看。遂準備重寫一個插件來知足如今和將來的需求。又由於時間的緣由不可能在一個星期的時間內去造個輪子，因此最後仍是決定去改寫目前已有的插件 也就是 ——— jsmind 插件。

jsmind插件並不能知足現有的需求，因此針對性的改寫的大量的代碼。同時也發現了原做者在文檔中不少（半成品）API，通過改寫以後造成了本身的插件，項目地址：（https://github.com/allensunji...）。項目完成以後發現源碼中自己已經存在擴展API，向我這樣爲了知足當前需求而去直接改寫源碼，是存在不少風險的，諸如：插件一旦更新就沒法使用，可擴展性變弱，性能方面有沒必要要的損失。最重要的是並不具有開源精神也沒有遵循開發規範。因此，在開發任務完成以後，着手開始 規範性的對jsmind進行擴展。造成了初版，規範的，純淨的，基於jsmind的 jsmind.menu.js插件。

正式的介紹

引入順序：
jsmind.js
jsmind.menu.js

配置menu以前 須要先了解jsmind的配置 http://hizzgdev.github.io/jsm...

瞭解了jsmind功能和配置以後 引入jsmind.menu.js 順序如： 【引入順序】

正式開始介紹menu的配置：

初級版：

{                   
    menuOpts:{  // 這裏加入一個專門配置menu的對象
      showMenu: true, //showMenu 爲 true 則打開右鍵功能 ，反之關閉
    }
  };

簡單的配置以後簡單版的功能已經造成，咱們去看一下：

簡單版，分別提供了三個基本功能： 編輯節點(edit node)，添加子節點(append child)，刪除節點(delete node)。

想要更多的功能怎麼辦？

能夠根據須要自行配置須要的功能：

menuOpts:{
      showMenu: true,
      injectionList: ['edit', 'addChild', 'addBrother', 'delete','showAll','hideAll', 'screenshot', 'showNode', 'hideNode'],  //這是完整的功能列表
    },

咱們再去看下 實例：

對應的功能分別是：

• edit node 編輯節點
• append child 新增子節點
• append brother 新增兄弟節點
• delete node 刪除節點
• show all 展開所有節點
• hide all 隱藏所有節點
• load mind picture 下載導圖 （須要依賴插件jsmind.screenshot.js）
• show target node 展開選中的節點
• hide target node 關閉選中的節點

爲何選項都是英文的呢？答案是與國際接軌...

若是想自定義一個選項，能夠盡享以下配置

menuOpts:{
      showMenu: true,
      injectionList: [
          {target:'edit',text: '編輯節點'}, 
          {target:'addChild',text: '添加子節點'},
          {target:'addBrother',text: '添加兄弟節點'},
      ],
    }

如下是效果哦~

是否是很滿意？

咱們的項目須要知道我點了那個選項！這個咋辦！

這個我已經都考慮到了~
這樣進行配置，你將會獲得你想知道的一切！

menuOpts:{
      showMenu: true,
      injectionList: [
          {target:'edit',text: '編輯節點',
              callback: function (node) {
              console.log(node)
              }
          },
          {target:'addChild',text: '添加子節點',
              callback: function (node) {
                  console.log(node)
              }
          },
          {target:'addBrother',text: '添加兄弟節點',
              callback: function (node) {
                  console.log(node)
              }
          }
      ],
    },

您能夠親自去試一下~，簡單配置一個callback便可

這個右鍵咱們產品以爲太醜了！我改如何重寫？

這個.....這個.....試試添加一個style屬性你會獲得驚喜

menuOpts:{
      showMenu: true,
      tipContent: '這是一個新增的提示',
      style: {
          menu:{
                // 控制menu容器的樣式
                background: 'red' //添加一個紅色的北京
          },
          menuItem:{
                   // 控制條目的樣式
                   'font-weight': 700 //文字加粗效果
          },
      }
    },

效果這樣的！

仍是很醜？？ 哈哈那你就本身添加樣式屬性吧！ 注意事項：樣式屬性須要時JSON格式的

還有其餘人性化的設置嗎？

這是什麼？

再不選中節點的狀況下，單機右鍵,選中 編輯節點 就會有這樣的提示~，緣由是 插件沒有捕獲到節點而沒法進行下一步操做，因此說，在沒選中節點的狀況下，部分功能是沒法使用的。

圓規正傳，咱們是否是能夠自定義提示語呢？

能夠的

menuOpts:{
      showMenu: true,
      style: {
          menu:{
            background: 'red'
          },
          menuItem:{
            'font-weight': 800
          },
      },
    tipContent: '我要自定義一個提示！！！',
    },

就能夠啦！

-------------------------------------------END?----------------------------------------------------

no!!!!!

咱們有更多的事情去作！