0.0.0-beta.1.13.0 • Published 4 years ago
tripleplus v0.0.0-beta.1.13.0
Getting Started With tripleplus
목차
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>
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'
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 >
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>
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>
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>
MORE(더 보기) 기능은 2 종류의 기능을 제공합니다.
- Ratio은 아이템 객수의 비율로 계산해서 numbering을 계산해줍니다.
- 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>
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>
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>
0.0.0-beta.1.13.0
4 years ago
0.0.0-beta.1.12.8
4 years ago
0.0.0-beta.1.13.9
4 years ago
0.0.0-beta.1.12.9
4 years ago
0.0.0-beta.1.12.7
4 years ago
0.0.0-beta.1.12.6
4 years ago
0.0.0-beta.1.12.4
4 years ago
0.0.0-beta.1.12.5
4 years ago
0.0.0-beta.1.12.3
4 years ago
0.0.0-beta.1.11.3
4 years ago
0.0.0-beta.1.10.3
4 years ago
0.0.0-beta.1.10.2
4 years ago
0.0.0-beta.1.10.1
4 years ago
0.0.0-beta.1.10.0
4 years ago
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