Pagination.js 커스터마이징2

Pagination.js 커스터마이징2

안녕하세요. TriplexLab입니다.

오늘은 지난 시간에 이어서  Pagination.js 커스텀 마이징에 관해서 작성 해보겠습니다.

지난번에 작성한 글입니다. 참고로 보시면 좋습니다.

Pagination.js 커스터마이징

이번에는 Pagination.js를 가지고 Tab기능을 만들어 봤습니다. 

Tab 기능은 어느 홈페이지든 간에 정말 자주 사용하는 기능중에 하나 입니다.
보통 퍼블리셔라면 마크업 만들어서 DOM의 기준으로 숨기고, 보여지고를 만들면 되지만, 이번에는 
데이터의 기준으로 각각의 Tab에 주제별로 보여질수 있게 만들어 봤습니다.

<ul class="work_tab">
  <li><a href="javascript:;">ALL</a></li>
  <li><a href="javascript:;" data-work-idx="Tab1">Tab1</a></li>
  <li><a href="javascript:;" data-work-idx="Tab2">Tab2</a></li>
  <li><a href="javascript:;" data-work-idx="Tab3">Tab3</a></li>
</ul>

<div id="data-container"></div>
<div id="pagination-container"></div>

 

@-webkit-keyframes fadeInFromNone { 
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1;}
}

@-moz-keyframes fadeInFromNone {
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1; }
}

@-o-keyframes fadeInFromNone {
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1;}
}

@keyframes fadeInFromNone {
  0% { display: none; opacity: 0; }
  100% { display: block; opacity: 1; }
}

.inner.active {
  opacity: 0;
  display: none;
}

.inner {
  display: block;
  -webkit-animation: fadeInFromNone 0.7s ease-out;
  -moz-animation: fadeInFromNone 0.7s ease-out;
  -o-animation: fadeInFromNone 0.7s ease-out;
  animation: fadeInFromNone 0.7s ease-out;
}

 

$( document ).ready(function() {
            var simpleTemplating = function (data, pagination) {
                var html = '<ul class="inner">';
                $.each(data, function(index, item){
                    if(index + 1 <= pagination.pageSize) {
                        html += '<li>'+ item['title'] +'</li>';
                    }
                });
                html += '</ul>';
                return html;
            };

            var tabsTemplating = function(data, pagination, workTabs) {
                var newArr = Array();
                var templat = '<ul class="inner">';
                $.each(data, function(index, item) {
                    if(item['kinds'] === workTabs) newArr.push(item);
                    if( undefined === workTabs) newArr.push(item);
                });

                $.each(newArr, function(index, item) {
                    if(index + 1 <= pagination.pageSize) {
                        console.log(item)
                        templat += '<li>'+ item['title'] +'</li>';
                    }
                });
                templat += '</ul>';
                return templat;
            };

            var contain = $('#pagination-container');
            contain.pagination({
                dataSource: './data.json',
                locator: 'items',
                showPrevious: false,
                showNext: false,
                pageSize: 20, // 디폴트 값 10개
                callback: function(data, pagination) {
                    var html = simpleTemplating(data, pagination);
                    $('#data-container').html(html);

                    var list = $('.work_tab li');
                    list.on('click', function(e) {
                        var work = $(this).find('a').data('work-idx');
                        var tabsHtml = tabsTemplating(data, pagination, work)
                       $('#data-container').html(tabsHtml);
                    });
                }
            })
});

 

소스코드 공유해 드립니다. 
필요한 분들은 다운받아서 테스트 하세요 :)

Pagination-Customizing2.zip

0.01MB