- HTML DOM๊ฐ์ฒด๋ฅผ ์์ ๋กญ๊ฒ ์ด๋์ํค๊ฑฐ๋ ํน์ ์์ญ(Box)์ผ๋ก ์ฎ๊ธธ ์ ์์ต๋๋ค.
- Drag & Dropํ ์ ์๋
OBJElement์ ์ด๋ฅผ ๋ด์ ์ ์๋BOXElement๋ก ๋๋ฉ๋๋ค. - โจ Source: https://github.com/sj-js/boxman
- โจ Document: https://sj-js.github.io/sj-js/boxman
-
Load
- Browser
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/css/boxman.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/boxman/dist/js/boxman.min.js"></script> <script> var boxman = new BoxMan(); </script>
- ES6+
npm i @sj-js/boxman
require('@sj-js/boxman/dist/css/boxman.css'); const BoxMan = require('@sj-js/boxman'); const boxman = new BoxMan();
- Browser
-
Make BOX
boxman.newBox({content:'BOX', width:'100px', minHeight:'35px'});
-
Make OBJ
boxman.newObj({content:'OBJ', width:'50px', height:'30px'});
-
Simple Example
<!DOCTYPE html> <HTML> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/css/boxman.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/boxman/dist/js/boxman.min.js"></script> <script> var boxman = new BoxMan(); </script> <style> div[data-box] { display:block; width:200px; min-height:30px;} div[data-obj] { display:inline-block; min-width:50px; min-height:30px;} div[data-box].test-a { background:pink; border:1px solid black; } div[data-obj].test-a { background:deeppink; border:1px solid black; } </style> </head> <body> Hello Boxman<br/> </body> <script> boxman.setTheme('default'); boxman.newBox({content:'BOX A', class:'test-a'}); boxman.newBox({content:'BOX B'}); boxman.newObj({content:'A'}); boxman.newObj({content:'B'}); boxman.newObj({content:'C', class:'test-a'}); boxman.newObj({content:'G', class:'test-a'}); </script> </HTML>