0.0.0-beta.1.13.0 • Published 4 years ago

tripleplus v0.0.0-beta.1.13.0

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Getting Started With tripleplus

목차

  1. Installation
  2. Tabs
  3. Accordions
  4. ImagesChange
  5. Cookie
  6. MORE(더보기)
  7. DynamicToggle

Installation

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

A. Use tripleplus from CDN

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

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

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

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

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

⬆ back to top

B. Download assets

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

----- OR -----

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

C. Install from NPM

NPM에서 아래와 같은 방법으로도 지원합니다.

$ npm install tripleplus
// import tripleplus JS
import Tripleplus from 'tripleplus';

const Accordions = new Tripleplus.Accordions({...});
const Ratio = new Tripleplus.Ratio({...});

// import tripleplus styles
import 'tripleplus/dist/build.css' 
----- OR -----
import 'tripleplus/dist/build.min.css'

⬆ back to top

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

Tabs의 사용방법 및 옵션들 제공

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

⬆ back to top

Accordions의 사용방법 및 옵션들 제공

<script src="https://unpkg.com/tripleplus/dist/build.min.js"></script>
<script>
 new tripleplus.Accordions ({
   targets: {
        startEl: '.faq_component',     // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
        endEl: '.faq_item'             // 컴포넌트 리스트들(Element)를 끝나는 선택자로 선언 합니다.
    },
    addClassName: 'active',  // 넣고 싶은 클랙스 명
    firstItemActive: false,  // 첫번째 아이템을 활성화 할건지 여부체크 true or false
    duration: 0.2,           // 아코디언 활성화시 펼쳐지는 시간을 컨트롤합니다.
    autoplay: 0,             // 설정한 시간 이후에 활성화가 됩니다.
    loop: false              // 무한 반복한것인지 여부를 물어봅니다.,
});
</script>

⬆ back to top

ImagesChange의 사용방법 및 옵션들 제공

<script src="https://unpkg.com/tripleplus/dist/build.min.js"></script>
<script>
new tripleplus.ImagesChange({
    targets: '.img_js',      //이미지(Element)를 선택자로 선언 합니다.
    property: '_active.png', // 이미지(Element)의 src속성 명에 추가 하고 싶은 이름을 넣습니다.
    firstItemActive: true
});
</script>

⬆ back to top

Cookie의 사용방법 및 옵션들 제공

<script src="https://unpkg.com/tripleplus/dist/build.min.js"></script>
<script>
new tripleplus.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

MORE(더 보기) 기능은 2 종류의 기능을 제공합니다.

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

MORE(더 보기)의 Ratio 사용방법 및 옵션들 제공

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

⬆ back to top

MORE(더 보기)의 Item 사용방법 및 옵션들 제공

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

⬆ back to top

DynamicToggle의 사용방법 및 옵션들 제공

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

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

⬆ back to top

0.0.0-beta.1.9

4 years ago

0.0.0-beta.1.10

4 years ago

0.0.0-beta.1.8

4 years ago

0.0.0-beta.1.7

4 years ago

0.0.0-beta.1.5

4 years ago

0.0.0-beta.1.6

4 years ago

0.0.0-beta.1.4

4 years ago

0.0.0-beta.1.3

4 years ago

0.0.0-beta.1.2

4 years ago

0.0.0-beta.1.1

4 years ago

0.0.0-beta.1

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago