triplexlab
Version:
프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻💻🧑🏻💻
449 lines (445 loc) • 18 kB
HTML
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="./app.css" />
<title>Ratio</title>
</head>
<body>
<h1 class="content_tit">Ratio</h1>
<div class="js-load main">
<div class="js-load content_component"></div>
<ul class="list__inner">
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
<li class="list__item__box js-load-list">
<a href="#0">
<img src="../images/logo-sub.png" alt="logo" />
<div class="tit_inner">
<p class="tit_sub">Triple Lab</p>
<h3 class="tit">Please enter the contents of each content.</h3>
<p class="txt_day">April 9, 2020</p>
</div>
</a>
</li>
</ul>
<div class="btn-wrap"></div>
</div>
<script src="/dist/MoreViews.min.js"></script>
<script>
(function () {
console.log(tr);
const ratioMore = {
targets: {
startEl: '.js-load', // 컴포넌트 상의 루트(Element)를 시작 선택자로 선언 합니다.
endEl: '.js-load-list', // 컴포넌트 상의 리스트들(Element)를 끝나는 선택자로 선언 합니다.
eventEl: '.btn-wrap', // 더보고 기능 추가할경우, 클릭 대상인 선택자를 선언 합니다.
},
additems: 10,
addClassName: 'active',
template: function (idx, current, total, addClassName = 'none') {
// template라는 키로 더보기 버튼 템플릿을 직접 만들수 있습니다.
return `<a href="javascript:;" class="${addClassName}">
<span class="txt">Load more articles</span>
<span data-click="${idx}">
<span class="current">${current}</span>
<span> / </span>
<span class="total">${total}</span>
</span>
</a>`;
},
};
new tr.Ratio(ratioMore);
})();
</script>
</body>
</html>