@sj-js/partman

v1.1.0

Published

3 years ago

partman

Downloads

0High
0Medium
0Low

souljungkim

PartMan

🎞️

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

Getting Started

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

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

Sample A

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();
```

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>

Sample B

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();
```

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

PartMan

🎞️

Getting Started

Sample A

Sample B