jQuery를 이동할 수있는 형태

이전 : jQuery를 모바일 패널

다음 : jQuery를 모바일 필터

응답 테이블

반응 형 디자인은 일반적으로 사용자에게 다양한 모바일 장치에 적응하기 위해 사용된다.

우리는 단지 단순한 클래스 이름을 사용해야 jQuery를 모바일 자동 화면의 크기에 따라 상기 페이지의 콘텐츠를 조절한다.

모바일 및 데스크톱 기기에서 페이지의 콘텐츠에 응답 형태는 좋은 적응을 종료합니다.

리플 로우 (환류) 및 열 전환 : 응답 표는 두 가지 유형이 있습니다.

역류 양식

환류 모델 형태는 충분히 큰 화면 크기가 화면의 크기가 충분히 작은 상태에서, 모든 데이터는 수직으로 될 것이다 수평으로 표시한다.

데이터 역할 = "표"와 "UI 응답"카테고리를 추가 할 수있는 <표> 요소에서 테이블을 만들기 :

예

<표 데이터 역할 = "테이블 "클래스 = "UI 응답">

»시도

	반응 형 형태를 들어, <THEAD>와 <TBODY> 요소를 포함해야합니다. ROWSPAN 또는 열 병합 속성을 사용하지 마십시오 응답 테이블은 이러한 두 가지 속성을 지원하지 않습니다.

열 전환

데이터 폭이 충분하지 않을 때 열 교환 모델은 숨겨 질 것이다.

다음 테이블 컬럼 모드 스위치가 생성 :

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

기본적으로 jQuery를 모바일 먼저 테이블의 오른쪽에있는 열을 숨 깁니다. 그러나 테이블 헤드 (<일을>) 데이터 우선 순위 속성을 추가하여 숨겨진 열의 순서를 지정할 수 있습니다, 데이터 우선 순위 값은 6 (가장 낮은 우선 순위) 1 (가장 높은 우선 순위)에서 할 수 있습니다 :

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>

	당신이 우선 순위 목록에없는 지정하지 않으면 열은 항상 존재하고 숨길 수 없습니다.

사용자가 테이블을 숨기려는 열을 사용자 정의 할 수 있도록 코드의 위의 두 조각의 조합은 함께 열 스위칭 테이블을 생성합니다 :

예

<표 데이터 역할 = "테이블 "데이터 모드 = "columntoggle"클래스 = "UI 응답"ID = "myTable에">
<THEAD>
<TR>
<데이터 우선 순위 일 = "6 "> CustomerID를 </ 일>
<목> CUSTOMERNAME </ 일>
<데이터 우선 번째 = "1 "> 연락처 이름 </ 일>
<데이터 우선 번째 = "2 "> 주소 </ 일>
<데이터 우선 순위 = "3 번째 도시"> </ 일>
<데이터 우선 번째 = "4 ">을 PostalCode </ 일>
<데이터 우선 순위 = "5 번째 나라"> </ 일>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 1 </ TD>
<TD>이 Alfreds Futterkiste </ TD>
<TD> 마리아 앤더스 </ TD>
<TD> Obere str을. 57 </ TD>
<TD> 베를린 </ TD>
<TD> 12209 </ TD>
<TD> 독일 </ TD>
</ TR>
</ TBODY>
</ 테이블>

»시도

우리는 스위치 테이블의 텍스트를 수정하는 데이터 열 btn을 텍스트 속성을 사용할 수 있습니다 :