aui-Tabview와 aui-Pagination을 결합한 것

Question

YUI 스크립트 내에서 AlloyUI 구성 요소를 사용 중이며 aui-tabview (Pills)와 aui-pagination을 결합하여 각 탭 (pill)을 클릭하면 페이지 매김이 각 탭의 내용/노드 목록 예를 들어 탭 -2의 노드 목록에 7 개의 항목이있는 경우 7 개의 페이지 매기기 단추를 가져야하고 탭 3의 항목 6 개는 6 개의 페이지 매기기 단추를 표시해야합니다.이 두 구성 요소를 통합 할 수 없습니다. 어떤 도움이라도 감사하게 받아 들여질 것입니다. 그것을 궁리 다음과 같은 해결책을 마련하기 위해

나는 위의 게시물에 아무 대답도받지 했으므로

<div id="myTab"> 
    <ul class="nav nav-pills"> 
    <li class="active"><a href="#view-all">View all</a></li> 
    <li><a href="#beauty">Beauty</a></li> 
    <li><a href="#days-out">Days out</a></li> 
    <li><a href="#holidays">Holidays</a></li> 
    </ul> 

    <div class="products tab-content"> 
    <div id="beauty" class="tab-pane"> 
     <div>some content</div> 
     <div>some more content</div> 
     <div>more content</div> 
     <div>a few words</div> 
    </div> 
    <div id="days-out" class="tab-pane"> 
     <div>some content</div> 
     <div>some more content</div> 
     <div>more content</div> 
     <div>a few words</div> 
    </div> 
    <div id="holidays" class="tab-pane"> 
     <div>some content</div> 
     <div>some more content</div> 
     <div>more content</div> 
     <div>a few words</div> 
    </div> 
    </div> 
</div> 

    <script> 
     YUI({ 
     }).use('node', 'node-base', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) { 
      new Y.TabView(
       { 
        srcNode: '#myTab', 
        type: 'pills' 
       } 
      ).render(); 

      Y.one(".nav.nav-pills").delegate('click', function(e) { 
       var id = Y.one(e.currentTarget); 
       var href = id.get('href'); 
       var arr = href.split("#"); 
       var target = arr[1]; 
       var pages = Y.all('#' +target + " > div"); 
       var total_rows = pages._nodes.length; 
       Y.log(total_rows); 

       new Y.Pagination(
        { 
         page: 1, 
         total: total_rows, 
         boundingBox: '#pagination', 
         circular: false, 
         contentBox: '#pagination .pagination-content', 
         on: { 
          changeRequest: function(event) { 
           var instance = this, 
            current = event.currentTarget, 
            state = event.state, 
            lastState = event.lastState; 
           if (lastState) { 
            pages.item(lastState.page - 1).setStyle('display', 'none'); 
           } 
           pages.item(state.page - 1).setStyle('display', 'block'); 
          } 
         }, 
         after: { 
          changeRequest: function(event) { 
           // goto top 
           a = new Y.Anim(
            { 
             node: 'body', 
             to: {scrollTop: 0}, 
             duration: 0.4, 
             easing: Y.Easing.easeOut 
            } 
           ); 
           a.run(); 
          } 
         }, 
         strings: { 
          next: '&raquo;', 
          prev: '&laquo;' 
         } 
        } 
       ).render(); 

      }, 'a'); 
     } 
     ); 
    </script> 

Answer 1

, 내가 몇 일 왼쪽 봤는데 :

여기 내 코드입니다. 모든 추가 또는 개선을 환영합니다.

<script> 
YUI({}).ready('node', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) { 

var tabs = ''; 
var setup = ''; 
var tabTargetID = ''; 

tabs = new Y.TabView(
    { 
     srcNode: '#myTab', 
     type: 'pills' 
    } 
).render(); 

setup = { 
    contentId: function() { 
     if (tabTargetID !== '') { 
      var content = tabTargetID; 
     } else { 
      var id = tabs.getActiveTab(); 
      var href = id.one('a').get('href'); 
      var arr = href.split("#"); 
      var content = '#' + arr[1]; 
     } 
     return content; 
    }, 
    pages: function() { 
     return Y.all(setup.contentId() + " > div"); 
    }, 
    currentTabPageTotal: function() { 
     return setup.pages()._nodes.length; 
    } 
}; 

var pages = setup.pages(); 
var pg = new Y.Pagination(
    { 
     page: 1, 
     total: setup.currentTabPageTotal(), 
     boundingBox: '#pagination', 
     circular: false, 
     contentBox: '#pagination > ul', 
     offset: 1, 
     on: { 
      changeRequest: function(e) { 
       var instance = this, 
        state = e.state, 
        lastState = e.lastState; 

       // Set the pagination links active state 
       Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active'); 
       var pg_links = Y.all(".pagination > ul > li:not(.pagination-control)"); 
       pg_links.item(state.page - 1).addClass('active'); 

       // Hide all but the focussed tabs 1st paginated page 
       pages.setStyles({display: 'none', opacity: '0'}); 
       pages.item(state.page - 1).setStyle('display', 'block') 
        .transition({ 
         opacity: {value: 1, duration: 1} 
        }); 
      } 
     }, 
     after: { 
      changeRequest: function(e) { 
       // goto top 
       a = new Y.Anim(
        { 
         node: 'body', 
         to: {scrollTop: 0}, 
         duration: 0.4, 
         easing: Y.Easing.easeOut 
        } 
       ); 
       a.run(); 
      } 
     }, 
     strings: { 
      next: '&raquo;', 
      prev: '&laquo;' 
     } 
    } 
).render(); 

tabs.on('selectionChange', function(e) { 

    var tabIndex = tabs.indexOf(e.newVal); 
    var tabContents = Y.all(".tab-content > div"); 
    var tabTarget = Y.one(tabContents.item(tabIndex)); 
    tabTargetID = '#' + tabTarget.get('id'); 
    pages = setup.pages(); 

    // Hide all but the focussed tabs 1st paginated content 
    Y.all(tabTargetID + ' > div').setStyles({display: 'none', opacity: '0'}); 
    Y.one(tabTargetID + ' > div').setStyles({display: 'block'}) 
     .transition({ 
      opacity: {value: 1, duration: 1} 
     }); 

    // For the focussed Tab, build the pagination links with x number of links and set to 1st page 
    pg.setAttrs({page: 1, total: setup.currentTabPageTotal()}); 

    // Highlight the 1st pagination link 
    Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active'); 
    Y.one('.pagination > ul > li:not(.pagination-control)').addClass('active'); 

}); 
}); 
</script>