BoxMan

๐Ÿ“ฆ

Build Status All Download Release License

Index

1. Getting Started

1-1. How to load?

1-2. Simple Example

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

Example - with script
  1. BOX ์ƒ์„ฑ
     boxman.newBox({content:'BOX', width:'100px', minHeight:'35px'});
    
  2. OBJ ์ƒ์„ฑ
     boxman.newObj({content:'OBJ', width:'50px', height:'30px'});
    
  3. ๐Ÿ‘จโ€๐Ÿ’ป
    <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> <body> Drag & Drop A, B, C, D<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:'D', class:'test-a'}); </script>
Example - with template
  1. BOX Element์— data-box๋ฅผ ๋ช…์‹œ
     <div data-box>BOX A</div>
    
  2. OBJ Element์— data-obj๋ฅผ ๋ช…์‹œ
     <div data-obj>OBJ A</div>
    
  3. Script์—์„œ detect()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
     boxman.detect();
    
  4. ๐Ÿ‘จโ€๐Ÿ’ป
    <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> <script> boxman.setTheme('default').detect(); </script> <body> Drag & Drop A, B, C, D<br/> <div data-box data-theme="test-1" class="test-a">BOX A</div> <div data-box>BOX B</div> <div data-obj>A</div> <div data-obj>B</div> <div data-obj class="test-a">C</div> <div data-obj class="test-a">D</div> </body>