- 구역을 분리하여 강조합니다.
- ✨ Source: https://github.com/sj-js/partman
- ✨ Document: https://sj-js.github.io/sj-js/partman
- Load
- Browser
<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/partman/dist/js/partman.min.js"></script> <script> var partman = new PartMan(); </script>
- ES6+
npm install @sj-js/partmanrequire('@sj-js/partman/dist/css/partman.css'); const PartMan = require('@sj-js/partman'); const partman = new PartMan();
- Browser
-
Set
data-partattribute to target element and set color<div data-part style="background:#EEFF88;">Hello Part Area 1</div> <div data-part style="background:#DDAAFF;">Hello Part Area 2</div>
-
Run
detect()then, When Page is Loaded, detect and apply elements with adata-partattributepartman.detect();
-
Simple Example
<!DOCTYPE html> <HTML> <head> <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/partman/dist/js/partman.min.js"></script> <script> var partman = new PartMan(); </script> <script> partman.setup({firstPartMarginHeight:100, partMarginHeight:50, lastPartMarginHeight:500}).detect(); </script> </head> <body> <div data-part style="background:#EEFF88;"> Hello Part Area 1 </div> <div data-part style="background:#DDAAFF;"> Hello Part Area 2 </div> <div data-part style="background:gold;"> Hello Part Area 3 </div> <div data-part style="background:skyblue;"> Hello Part Area 4 </div> </body> </HTML>
- Set
data-part-fold-aattribute to button element to open folded content<button data-part-fold-a="fold-1">fold-1</button> <button data-part-fold-a="fold-2">fold-2</button>
- Set
data-part-fold-toolattribute to tool element on top of content<div data-part-fold-tool> <button onclick="partman.closeContentAll();">X</button> </div>
- Set
data-part-foldattribute to folded content<div data-part-fold="fold-1"> 1 </div> <div data-part-fold="fold-2"> 2 </div>
- Run
detect()then, When Page is Loaded, detect and apply elements with adata-partattributepartman.detect();
- Simple Example
<!DOCTYPE html> <HTML> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/partman/dist/css/partman.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/partman/dist/js/partman.min.js"></script> <script> var partman = new PartMan(); </script> <script> partman.setup({firstPartMarginHeight:100, partMarginHeight:50, lastPartMarginHeight:500}).detect(); </script> <style> html { scroll-behavior: smooth; } button[data-part-fold-a] { width:150px; height:100px; cursor:pointer; } .part-fold-active { border:2px solid skyblue; background:skyblue; } </style> </head> <body> <!-- Icons --> <div> <button data-part-fold-a="fold-1">fold-1</button> <button data-part-fold-a="fold-2">fold-2</button> <button data-part-fold-a="fold-3">fold-3</button> <button data-part-fold-a="fold-4">fold-4</button> <button data-part-fold-a="fold-5">fold-5</button> </div> <!-- Tools --> <div data-part-fold-tool> <button onclick="partman.closeContentAll();">X</button> </div> <!-- Contents --> <div data-part-fold="fold-1"> 1 </div> <div data-part-fold="fold-2"> 2 </div> <div data-part-fold="fold-3"> 3 </div> <div data-part-fold="fold-4"> 4 </div> <div data-part-fold="fold-5"> 5 </div> </body> </HTML>