PartMan

🎞️

구역을 분리하여 강조합니다.
✨ Source: https://github.com/sj-js/partman
✨ Document: https://sj-js.github.io/sj-js/partman

Index

1. Getting Started

1-1. How to load?

Browser

  <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>

ES6+

  npm install @sj-js/partman

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

1-2. Simple Example

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

Example - data-part

Set data-part attribute 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 a data-part attribute
```
partman.detect();
```
👨‍💻
<script> partman.setup({firstPartMarginHeight:100, partMarginHeight:50, lastPartMarginHeight:500}).detect(); </script> <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>

Example - data-part-fold

Set data-part-fold-a attribute 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-tool attribute to tool element on top of content

<div data-part-fold-tool>
    <button onclick="partman.closeContentAll();">X</button>
</div>

Set data-part-fold attribute 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 a data-part attribute
```
partman.detect();
```
👨‍💻
<style> html { scroll-behavior: smooth; } button[data-part-fold-a] { width:120px; height:100px; cursor:pointer; } .part-fold-active { border:2px solid skyblue; background:skyblue; } </style> <script> partman.detect(); </script> <body>  <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 data-part-fold-tool> <button onclick="partman.closeContentAll();">X</button> </div>  <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>