Triplelab NPM | npm.io

Getting Started With triplexlab

약 10/11일후부터 triplexlab 이라는 명칭으로 변경 됩니다.
npm에서는 triplelab라는 이름의 플로그인은 사라질것 입니다.


It will be renamed triplexlab after about 10/11 days.
In npm, the plugin named triplelab will disappear.

ContentsList

Installation
Tabs
Accordions
ChangeProps
Cookie
MORE(더보기)
ToggleDynamic
ScrollProgressBar
Animate

Installation

프로젝트에 triplexlab 포함/가져오는 방법에는 몇 가지 옵션이 있다.

A. Use triplexlab from CDN

프로젝트에 triplexlab 파일을 포함하지 않으려면 CDN에서 파일을 사용하십시오. 다음 파일을 사용할 수 있다.

<link rel="stylesheet" href="https://unpkg.com/triplexlab/dist/build.min.css">

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>

브라우저에서 ES 모듈을 바로 사용하는 경우 CDN 버전도 있습니다.

<script type="module">
    import triplexlab from "https://unpkg.com/triplexlab/dist/build.min.js";
    
    new triplexlab.Accordions ({...});
</script>

⬆ back to top

B. Download assets

triplexlab 자산을 로컬에서 사용하려면 직접 다운로드하십시오. https://unpkg.com/browse/triplexlab/

----- OR -----

triplexlab 자산을 github를 통해서 직접 다운로드하십시오. https://github.com/triplelab/module

C. 자세한 사용방법 및 옵션들 제공

Tabs

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
const my = new triplexlab.Tabs ({
     targets: {
        startEl: '.triple_tabs', // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.tab_js'         // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
    },
    addClassName: 'actives',     // 넣고 싶은 클랙스 명
    firstItemActive: true        // 첫번째 아이템을 활성화 할건지 여부체크 true or false
});
</script >

Tabs Properties

1. my.store.idx    // endEl의 (자기 자신을 클릭한) 인텍스 값을 가져올수 있습니다.

⬆ back to top

Accordions

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
 new triplexlab.Accordions ({
   targets: {
        startEl: '.faq_component',     // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.faq_item'             // 컴포넌트 리스트들(Element)를 끝나는 선택자로 선언 합니다.
    },
    event: 'click',          // 이벤트 mouseenter와, click 2가지를 옵션으로 넣을수 있습니다.
    addClassName: 'active',  // 넣고 싶은 클랙스 명
    firstItemActive: false  // 첫번째 아이템을 활성화 할건지 여부체크 true or false
});
</script>

⬆ back to top

ChangeProps

ChangeSelfProps은 자기 자신 prop 값을 변경합니다.
ChangeTabProps은 자기 자신 외에 나머지들을 prop 값을 변경합니다.

ChangeSelfProps

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.ChangeSelfProps({
    targets: '.img_js',     // 속성을 Change 하고자 하는 DOM.
    prop : 'src',           // 속성들중에 원하는 속성 이름.
    value: './imgs/deflut_active.png'   // 바꾸고 싶어하는 값을 넣으세요.
});
</script>

⬆ back to top

ChangeTabProps

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.ChangeTabProps({
    targets: '.img_js',   // 속성을 Change 하고자 하는 DOM.
    prop : 'src',         // 속성들중에 원하는 속성 이름.
    value: './imgs/deflut_active.png',   // 바꾸고 싶어하는 값을 넣으세요.
    firstItemActive: true               // 첫번째 아이템을 활성화 할건지 여부체크
});
</script>

⬆ back to top

Cookie

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.Cookie({
    targets: {
        startEl:'.triple_popups_js',
        eventEl:'.closeed'
    },
    daying: 1,                          // 오늘 하루 안보기의 (1 day)
    startdate: '2020/08/22 23:56:00',   // 시작하는 날짜와 시간
    enddate: '2020/08/25 09:00:00',     // 끝나는 날짜와 시간
});
</script>

⬆ back to top

Ratio은 아이템 객수의 비율로 계산해서 numbering을 계산해줍니다.
Item은 아이템 객수만큼 계산해서 numbering이 증가해 줍니다.

MORE Ratio

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.Ratio({                   // Ratio은 아이템 객수의 비율로 계산해서 숫자들이 증가 합니다.
    targets: {
        startEl: '.js-load',             // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.js-load-list',          // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
        eventEl: '.btn-wrap-js'          // 더보고 혹은 (숫자 증가) 기능 추가할경우, 클릭 대상의 Components를 선택자로 선언 합니다.
    },
    additems: 10,                                                    // 추가 하고 싶은 항목의 객수를 뜻합니다.(1개 이상의 값을 넣어야만 실행 가능합니다.)
    addClassName: "more_active",                                     // numbering이라는 클래스 위치에 또다른 클래스를 추가할수 있습니다.
    template: function(idIdx, current, total, addClassName="none") { // template라는 키로 더보기 버튼 템플릿을 직접 만들수 있습니다.
        return `<a href="javascript:;" class="${addClassName}">
            <span class="txt">Load more articles</span>
            <span class="numbering">
                <span data-click="${idIdx}" class="current">${current}</span>
                <span> / </span>
                <span class="total">${total}</span>
            </span>
        </a>`
    }
});
</script>

⬆ back to top

MORE Item

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.Item({                    // Item은 아이템 객수만큼 계산해서 숫자들이 증가 합니다.
    targets: {
        startEl: '.js-load',             // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.js-load-list',          // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
        eventEl: '.btn-wrap-js'          // 더보고 혹은 (숫자 증가) 기능 추가할경우, 클릭 대상의 Components를 선택자로 선언 합니다.
    },
    additems: 10,                                     // 추가 하고 싶은 항목의 객수를 뜻합니다.(1개 이상의 값을 넣어야만 실행 가능합니다.)
    addClassName: "more_active",                      // numbering이라는 클래스 위치에 또다른 클래스를 추가할수 있습니다.
    template: function(idIdx, current, total, addClassName="none") {   // template라는 키로 더보기 버튼 템플릿을 직접 만들수 있습니다.
        return `<a href="javascript:;" class="${addClassName}">
            <span class="txt">Load more articles</span>
            <span data-click="${idIdx}" class="numbering ">
                <span class="current">${current}</span>
                <span> / </span>
                <span class="total">${total}</span>
            </span>
        </a>`
    }
});
</script>

⬆ back to top

ToggleDynamic

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>

new triplexlab.ToggleDynamic({
    targets: {
        startEl: '.faq_inner',              // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.faq_item',                 // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
        eventEl: '.btn',                    // 클릭 대상의 이벤트 선택자로 선언 합니다.
    },
    addClassName: 'active',                 // 넣고 싶은 클랙스 명
});
</script>

⬆ back to top

ScrollProgressBar

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.ScrollProgressBar({
    targets: '.bar',
    ProgressBarWidth: true
});
</script>

⬆ back to top

Animate

<script src="https://unpkg.com/triplexlab/dist/build.min.js"></script>
<script>
new triplexlab.Animate('.teetet', {
    opacity: 1,
    transform: 'rotate(180deg) translateY(-10px)',
    duration: function(index) {
        return index * 0.5;
    },
    delay: 1
});
</script>

⬆ back to top