Component

Paging

Basic

Paging 컴포넌트는 페이지 처리 기능을 제공하는 컴포넌트입니다. class="Paging"

1 2 3

<div class="Paging">
	<a class="Link">1</a>
	<a class="Link">2</a>
	<a class="Link">3</a>
</div>

선택 인덱스 설정

1 2 3

<div class="Paging">
	<a class="Link">1</a>
	<a class="Link Selected">2</a>
	<a class="Link">3</a>
</div>

모바일 스타일

1 2 3

<div class="Paging Mobile">
	<a class="Link">1</a>
	<a class="Link Selected">2</a>
	<a class="Link">3</a>
</div>

이전,다음 페이지 지정

이전 1 2 3 다음

<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>

이전 그룹 버튼, 이전 페이지 버튼

1 2 3

<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>

첫 페이지 버튼, 마지막 페이지 버튼

1 2 3

<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 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

totalpage

data-totalpage 참고

maxpage

data-maxpage 참고

Functions

.getOptions() 3.0.0+

Paging에 설정된 옵션값을 모두 가져올 수 있습니다.

Return {object}
- object
  - Paging에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Paging에 설정된 모든옵션값을 가져옵니다.
$('#Paging').getOptions();

.getSelectedPage()

선택된 페이지를 가져옵니다.

return
- page {number} 선택된 페이지를 가져옵니다.

.setMaxPage(number)

화면에 보여지는 페이지 수를 동적으로 설정합니다.

parameter
- number {number} Required
  - 설정하고자하는 화면 페이지 수

.setOptions(options) 3.0.0+

Paging에 동적으로 옵션을 설정합니다.

Parameters
- options {object}
  - Paging에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.

$('#Paging').setOptions({
	totalpage: 3,
	maxpage: 4
});

.setSelectedPage(number)

페이지를 동적으로 선택합니다.

parameter
- number {number} Required
  - 선택하고자 하는 페이지

.setTotalPage(number)

전체 페이지 수를 동적으로 설정합니다.

parameter
- number {number} Required
  - 설정하고자하는 전체 페이지 수

본문 상단으로 이동