Component
Paging
Basic
Paging 컴포넌트는 페이지 처리 기능을 제공하는 컴포넌트입니다. class="Paging"
선택 인덱스 설정
<div class="Paging">
<a class="Link">1</a>
<a class="Link Selected">2</a>
<a class="Link">3</a>
</div>
모바일 스타일
<div class="Paging Mobile">
<a class="Link">1</a>
<a class="Link Selected">2</a>
<a class="Link">3</a>
</div>
이전,다음 페이지 지정
<div id="p6" class="Paging" data-totalpage="19">
<a class="Link Prev">이전</a>
<a class="Link">1</a>
<a class="Link ">2</a>
<a class="Link Selected">3</a>
<a class="Link Next">다음</a>
</div>
이전 그룹 버튼, 이전 페이지 버튼
<div id="p6" class="Paging" data-totalpage="19">
<a class="Link Prev-group"><span class="Icon Backward"></span></a>
<a class="Link Prev"><span class="Icon Chevron-left"></span></a>
<a class="Link">1</a>
<a class="Link Selected">2</a>
<a class="Link">3</a>
<a class="Link Next"><span class="Icon Chevron-right"></span></a>
<a class="Link Next-group"><span class="Icon Forward"></span></a>
</div>
첫 페이지 버튼, 마지막 페이지 버튼
<div id="p6" class="Paging" data-totalpage="19" data-button-behavior="disable">
<a class="Link First"><span class="Icon Step-backward"></span></a>
<a class="Link Prev"><span class="Icon Chevron-left"></span></a>
<a class="Link">1</a>
<a class="Link Selected">2</a>
<a class="Link">3</a>
<a class="Link Next"><span class="Icon Chevron-right"></span></a>
<a class="Link Last"><span class="Icon Step-forward"></span></a>
</div>
Attributes
data-maxpage
- Type: {number}
- 한 화면에 보여질 페이지 갯수를 설정합니다.
data-totalpage
- Type: {number}
- 전체 페이지 갯수를 설정합니다.
Options
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
totalpage
maxpage
- data-maxpage 참고
Functions
.getOptions()
Paging에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Paging에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Paging에 설정된 모든옵션값을 가져옵니다.
$('#Paging').getOptions();
.getSelectedPage()
선택된 페이지를 가져옵니다.
- return
- page {number} 선택된 페이지를 가져옵니다.
.setMaxPage(number)
화면에 보여지는 페이지 수를 동적으로 설정합니다.
- parameter
- number {number} Required
- 설정하고자하는 화면 페이지 수
- number {number} Required
.setOptions(options)
Paging에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Paging에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Paging').setOptions({
totalpage: 3,
maxpage: 4
});
.setSelectedPage(number)
페이지를 동적으로 선택합니다.
- parameter
- number {number} Required
- 선택하고자 하는 페이지
- number {number} Required
.setTotalPage(number)
전체 페이지 수를 동적으로 설정합니다.
- parameter
- number {number} Required
- 설정하고자하는 전체 페이지 수
- number {number} Required