jQuery 모바일 테이블
반응형
반응형 디자인은 일반적으로 사용자의 다양한 모바일 디바이스에 적응하기 위해 사용됩니다.
간단한 클래스 이름만 사용하면 jQuery Mobile이 화면 크기에 따라 페이지 콘텐츠를 자동으로 조정할 수 있습니다.
반응형 테이블을 사용하면 페이지 콘텐츠가 모바일 및 데스크톱 장치에 잘 적응할 수 있습니다.
반응형 테이블에는 리플로우와 열 전환이라는 두 가지 유형이 있습니다.
리플로우 형태
리플로우 모델 테이블은 화면 크기가 충분히 크면 가로로 표시되고, 화면 크기가 충분히 작으면 모든 데이터가 세로로 표시됩니다.
테이블을 만들고 <table> 요소에 data-role="table" 및 "ui-Response" 클래스를 추가합니다.
|
반응형 테이블의 경우 <thead> |
|---|
열 전환
열 전환 모델은 너비가 충분하지 않으면 데이터를 숨깁니다.
컬럼 전환을 위한 테이블 생성 방법은 다음과 같습니다.
으아악기본적으로 jQuery Mobile은 먼저 테이블 오른쪽에 있는 열을 숨깁니다. 그러나 테이블 헤더(<th>)에 data-priority 속성을 추가하여 숨겨진 열의 순서를 지정할 수 있습니다. data-priority 값은 1(가장 높은 우선순위)부터 6(가장 낮은 우선순위)까지일 수 있습니다.
으아악|
|
열에 대한 우선순위를 지정하지 않으면 해당 열은 항상 존재하며 숨겨지지 않습니다. |
|---|
위의 두 가지 코드를 결합하면 열 전환 기능이 있는 테이블을 만들 수 있으므로 사용자는 숨기려는 테이블 열을 사용자 정의할 수 있습니다.
data-column-btn-text 속성을 사용하여 전환 테이블의 텍스트를 수정할 수 있습니다.
테이블 스타일
테이블에 그림자를 추가하기 위해 "ui-shadow" 클래스를 사용합니다:
CSS를 사용하여 테이블 스타일을 추가로 지정합니다.
