MenuMan

📃

쉽게 Context Menu를 구성할 수 있다.
Menu와 이를 조건별로 담을 수 있는 MenuBoard로 나뉩니다.
✨ Source: https://github.com/sj-js/menuman
✨ Document: https://sj-js.github.io/sj-js/menuman

Index

1. Getting Started

1-1. How to load?

Browser

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/menuman/dist/css/menuman.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@sj-js/menuman/dist/js/menuman.min.js"></script>
  <script>
       var menuman = new MenuMan();
  </script>

ES6+

  npm install @sj-js/menuman

  require('@sj-js/menuman/dist/css/menuman.css');
  const MenuMan = require('@sj-js/menuman');
  const menuman = new MenuMan();

1-2. Simple Example

For convenience, 1-1 code, which loads and creates a Library in the example, is omitted.

Example A

.setTheme(CODE)
```
 menuman.setTheme('default');
```

.addMenu(ID, LABEL, EVENT)

menuman.addMenu();
menuman.addMenu('MENU_ID_1', 'MENU_LABEL', function(element){
    //SOMETHING TO DO
});
menuman.addMenu('MENU_ID_2', 'MENU_LABEL', function(element){
   //SOMETHING TO DO 
});

.addMenuBoard(ID, CONDITION, MENU_ID_LIST)

menuman.addMenuBoard('BOARD_ID_1', {'id':'icon-*'}, ['MENU_ID_1', 'MENU_ID_2']);

👨‍💻
<style> .test-style { display:inline-block; min-width:50px; height:30px; border:2px solid black; cursor:pointer; background:pink; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; } </style> <body> <div class="test-style icon">Right Click - 1</div> <div class="test-style icon">Right Click - 2</div> <div id="test001" class="test-style">Right Click - 3</div> <div id="test002" class="test-style">Right Click - 4</div> </body> <script> menuman.setTheme('test-1'); menuman.addMenu('menu-console', 'Console', function(element){ console.log('Hello ' + element.innerHTML); }); menuman.addMenu('menu-alert', 'Alert', function(element){ alert('Hello ' + element.innerHTML); }); menuman.addMenu('menu-nothing', 'Nothing', function(element){ //None }); menuman.addMenu('menu-1', 'Print', function(element){ console.log('Print', element); }); menuman.addMenuBoard('board-a', [{'class':'*icon*'}], ['menu-console', 'menu-alert']); menuman.addMenuBoard('board-b', [{'id':'test001'}], ['menu-nothing']); menuman.addMenuBoard('board-c', [{'id':'*02'}], ['menu-1']); </script>