- 쉽게 Context Menu를 구성할 수 있다.
Menu와 이를 조건별로 담을 수 있는MenuBoard로 나뉩니다.- ✨ Source: https://github.com/sj-js/menuman
- ✨ Document: https://sj-js.github.io/sj-js/menuman
-
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();
- Browser
-
.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']);
-
Simple Example
<!DOCTYPE html> <HTML> <head> <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> </head> <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> </HTML>