jQuery를 모바일 그리드

jQuery를 모바일 그리드 레이아웃

jQuery를 모바일은 CSS 기반의 레이아웃에 대한 분석을 제공합니다. 그러나 휴대 전화의 화면 폭이 좁은 고려하여 모바일 장치에서, 일반적으로 우리는 분해 열 레이아웃의 사용을 권장하지 않습니다.

그러나 때때로 당신은 (예 : 버튼이나 탐색 탭과 같은) 작은 요소 테이블과 같이, 함께 나란히 배치되어있다 할 수 있습니다. 이 경우, 하위 열 레이아웃을 사용하도록 권장한다.

그리드 열은 동일한 폭 (총 100 %), 아니 테두리, 배경, 마진이나 패딩의이다.

네 개의 레이아웃 격자를 사용할 수있다 :

그리드 클래스	열	열 너비	통신	예
UI-그리드 솔로	(1)	100 %	▽를 블록-A	시험
UI 그리드-A	이	/ 50 % 50 %	▽를 블록-A \| B	시험
UI 그리드-B	3	/ 33 % / 33 % 33 %	▽를 블록-A \| B \| C	시험
UI 그리드-C	4	/ 25 % / 25 % / 25 % 25 %	▽를 블록-A \| B \| C \| D	시험
UI 그리드-D	(5)	/ 20 % / 20 % / 20 % / 20 % 20 %	▽를 블록-A \| B \| C \| D \| E	시험

	컬럼의 수에 따라 E \| B \| \| C \| D 열의 컨테이너 하위 요소는 사용자 인터페이스 블록-A와 같은 클래스를 갖는다. 옆에 행 측 부동. 예 1 : UI 그리드-A (두 개의 레이아웃)의 클래스, 당신은 UI를 블록-A를 지정해야하고, 두 개의 하위 요소의 UI 블록-B. 예 2 : UI 그리드-B (세 레이아웃)의 클래스, 당신은 추가해야합니다 UI를 블록-A, UI- 블록 B 와 세 개의 하위 요소의 UI 블록-C.

컬럼의 수에 따라 E | B | | C | D 열의 컨테이너 하위 요소는 사용자 인터페이스 블록-A와 같은 클래스를 갖는다. 옆에 행 측 부동.

예 1 : UI 그리드-A (두 개의 레이아웃)의 클래스, 당신은 UI를 블록-A를 지정해야하고, 두 개의 하위 요소의 UI 블록-B.

예 2 : UI 그리드-B (세 레이아웃)의 클래스, 당신은 추가해야합니다 UI를 블록-A, UI- 블록 B 와 세 개의 하위 요소의 UI 블록-C.

사용자 정의 그리드

CSS를 사용하면 열 블록을 사용자 정의 할 수 있습니다 :

예

<스타일>
.ui-블록 A, .ui-블록 B, .ui-블록 C {
배경 색상 : lightgray;
국경 : 1 픽셀 검은 색;
높이 : 100 픽셀;
글꼴 - 무게 : 굵게;
텍스트 정렬 : 센터;
패딩 : 30 픽셀;
}
</ 스타일>

»시도

또한 인라인 스타일 블록을 사용하여 사용자 정의 할 수 있습니다 :

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

멀티 라인

열, 당신은 또한 여러 라인을 가질 수 있습니다.

참고 : UI 블록 - 한 - 클래스는 항상 새로운 라인을 만들 :

예

<사업부 클래스 = "UI 그리드-B">
<사업부 클래스 = "UI 블록-A"> <SPAN> 텍스트 </ SPAN> </ DIV>
<사업부 클래스 = "UI 블록-B"> <SPAN> 텍스트 </ SPAN> </ DIV>
<사업부 클래스 = "UI 블록-C"> <SPAN> 텍스트 </ SPAN> </ DIV>
<사업부 클래스 = "UI 블록-A"> <SPAN> 텍스트 </ SPAN> </ DIV>
<사업부 클래스 = "UI 블록-B"> <SPAN> 텍스트 </ SPAN> </ DIV>
<사업부 클래스 = "UI 블록-A"> <SPAN> 텍스트 </ SPAN> </ DIV>
</ DIV>

»시도