jQuery Mobile테이블

❮ 이전 다음 장 ❯

응답 테이블

사용자가 사용자 디바이스에 대응하는 모바일 웹 페이지의 콘텐츠를 원하는 경우에는 반응 형 디자인의 화면 크기와 방향로서 유용하다.

간단한 클래스 이름으로, jQuery를 모바일 사용자의 사용 가능한 화면 크기를 인식하고 자동으로 특정 사용자에 대한 관련 내용을 표시하기 위해 자체 크기를 조정합니다.

응답 테이블은 우리가 모바일과 데스크톱 모두 매력적인 모양 테이블 데이터의 큰 세트를 표시 할 수 있습니다.

리플 로우 및 컬럼 전환 : 응답 테이블의 두 가지 유형이 있습니다.

리플 로우 표

그 다음에 모든 행 수직 그룹화 최소 크기에 도달 할 때까지 리플 로우 모드는 가로 테이블 데이터를 위치.

데이터-역할 = "테이블"과의 클래스를 테이블 만들기 추가 "ui-responsive" 온 <table> 요소 :

예

»그것을 자신을 시도

반응 형 테이블이 제대로 작동하려면, 당신은 포함해야합니다 <thead> 와 <tbody> 요소를.
ROWSPAN 또는 열 병합 속성을 사용하지 마십시오 그들은 응답 테이블에서 지원되지 않습니다.

열 전환 표

데이터를 표시하기에 충분한 폭이 없을 때 '열 토글 "모드 항목을 숨길.

열 전환 테이블을 만들려면 상기에 다음을 추가 <table> 요소를 :

기본적으로 jQuery를 모바일 테이블의 오른쪽에서 열을 숨 깁니다. 그러나, 당신은 숨겨진 또는 특정 순서로 표시되어야하는 열을 지정할 수 있습니다. 테이블의 헤더에 데이터 우선 순위 속성을 추가 (<th>) 과 1 (가장 높은 우선 순위) (낮은 우선 순위) 6 사이의 숫자를 지정합니다 :

<th>I will never be hidden</th>
<th data-priority="1" >I am very important - I will probably not be hidden</th>
<th data-priority="3" >I am less important - I could be hidden</th>
<th data-priority="5" >I am not that important - there is a good chance that I will be hidden</th>

당신이 컬럼에 대해 우선 순위를 지정하지 않으면 열은 지속적이고 숨어 사용할 수 없습니다 수 있습니다.

모두 함께 넣고 당신은 열 토글 테이블을 만들었습니다! 프레임 워크가 자동으로 테이블의 오른쪽 상단에 버튼을 추가하는 것을 알 수 있습니다. 이 테이블에 표시되는 컬럼 선택 할 수 :

예

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable" >
<thead>
    <tr>
      <th data-priority="6" >CustomerID</th>
      <th>CustomerName</th>
      <th data-priority="1" >ContactName</th>
      <th data-priority="2" >Address</th>
      <th data-priority="3" >City</th>
      <th data-priority="4" >PostalCode</th>
      <th data-priority="5" >Country</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Obere Str. 57</td>
      <td>Berlin</td>
      <td>12209</td>
      <td>Germany</td>
    </tr>
</tbody>
</table>

»그것을 자신을 시도

토글 테이블 단추 텍스트를 변경하려면 데이터 열 btn을 텍스트 속성을 사용 :