jQuery 모바일 페이지 development_jquery에서 ui-grid 그리드 레이아웃 사용에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:27:391789검색
모바일 기기에서는 화면 너비가 좁아 다중 열 레이아웃이 일반적으로 사용되지 않지만 때로는 작은 요소(예: 버튼 또는 병렬 탐색 라벨)를 여러 열에 배열해야 할 수도 있습니다. . Jquery Mobile 프레임워크는 ui-grid
라는 CSS 기반 열 레이아웃을 구축하는 간단한 방법을 제공합니다.Jquery Mobile은 열이 필요한 모든 상황에서 사용할 수 있는 4가지 사전 설정 레이아웃을 제공합니다.
- 두 개의 열(ui-grid-a 클래스 사용)
- 세 개의 열(ui-grid-b 클래스 사용)
- 4개 열(ui-grid-c 클래스 사용)
- 5개 열(ui-grid-d 클래스 사용)
그리드는 너비가 100%이고 완전히 보이지 않으며(테두리나 배경 없음) 여백이나 패딩이 없으므로 그 안에 배치된 요소의 스타일을 방해하지 않습니다. 그리드 컨테이너에서 하위 요소는 ui-block-a / b / c / d 연속 방식으로 할당되어 각 "블록" 요소가 부동 및 병치되어 그리드를 형성합니다. ui-block-a 클래스는 기본적으로 부동 소수점을 지우고 새 행을 시작합니다(아래의 다중 행 그리드 참조).
ui-grid-a 2열 레이아웃
2열(50/50%) 레이아웃을 생성하고 첫 번째 레이어(상위 컨테이너)에 ui-grid-a 속성을 추가하고 두 번째 레이어(2개)에 ui-block-a 및 ui-block을 추가합니다. 하위 컨테이너). -b：
<div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> </div><!-- /grid-a -->
위 태그는 다음과 같은 콘텐츠 레이아웃을 생성합니다.
보시다시피 그리드에는 기본적으로 시각적 스타일이 없습니다. 단지 콘텐츠를 나란히 렌더링할 뿐입니다.
그리드 클래스는 모든 컨테이너에 적용될 수 있습니다. 다음 예에서는 ui-grid-a를 추가하고 ui-block을 적용하며 두 버튼 모두 화면 너비의 50%까지 확장됩니다
<fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div> </fieldset>
이 프레임워크는 그리드의 버튼에 왼쪽 및 오른쪽 여백을 추가한다는 점에 유의하세요. 단일 버튼의 경우 div에 대한 아래 예와 같이 클래스 ui-grid-solo 및 버튼 클래스 ui-block-a를 사용할 수 있습니다. 이러한 버튼은 동일한 여백을 갖습니다
<div class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div> <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div> </div> <div class="ui-grid-solo"> <div class="ui-block-a"><button type="v" data-theme="b">More</button></div> </div>
테마 시스템의 테마 클래스(데이터 테마 속성 없음)를 그리드를 포함한 요소에 추가할 수 있습니다. 다음 블록에서는 기본 막대를 추가하는 ui-bar와 "E" 도구 모음 테마 샘플에 배경 그라데이션 및 글꼴 스타일을 적용하는 ui-bar-e라는 두 가지 클래스를 추가했습니다. 설명을 위해 인라인 style="height:120px" 속성도 각 그리드에 추가되어 각 표준 높이를 설정합니다.
ui-block-b 3열 레이아웃
그리드 레이아웃 구성은 상위 및 3개의 하위 컨테이너 요소에 class=ui-grid-b를 사용하며 각각 해당 ui-block-a/a/c 클래스를 포함하여 1행 3열 레이아웃을 생성합니다(33/ 33 /33%). 참고: 이 블록은 코스와 동일한 스타일 테마를 공유하며 그리드 레이아웃이 명확하게 표시됩니다.
<div class="ui-grid-b"> <div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div> <div class="ui-block-c">Block C</div> </div><!-- /grid-b -->
이렇게 하면 콘텐츠의 33/33/33% 그리드 레이아웃이 생성됩니다.
ui-block-c 4열 레이아웃
4개 열의 행, 25/25/25/25% 그리드는 상위 컨테이너에 class=ui-grid-c를 지정하고 4분의 1 블록을 추가하여 달성됩니다. 참고: 이러한 블록은 동일한 스타일의 테마 코스를 가지며 그리드 레이아웃이 명확하게 표시됩니다.
ui-block-c 5열 레이아웃
1개의 행과 5개의 열, 20/20/20/20/20% 그리드는 상위 컨테이너에서 class= ui-grid-d
로 지정됩니다.
다중 행 및 다중 열 레이아웃
그리드 디자인은 항목을 여러 행으로 묶습니다. 예를 들어, 9개의 하위 블록이 있는 컨테이너에 3행 3열 그리드(ui-grid-b)를 지정하면 각각 3개 항목이 포함된 3행으로 교체됩니다. 부동 소수점에 대한 CSS 규칙을 명확하게 하고 class=ui-block-a일 때 새 줄을 시작하는 것은 할당된 블록(A,B,C,A,B,C 등)의 반복 시퀀스가 그리드 유형에 매핑되는지 확인하는 것입니다. . 부동 소수점을 지우려면 각 행의 첫 번째 컨테이너를 class=ui-block-a로 설정할 수 있으므로 9개 하위 컨테이너의 클래스는 다음과 같아야 합니다. class=ui-block-(a,b,c,a,b ,c,a,b,c).
<div id="grid" class="ui-grid-b"> <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div> <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div> <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div> </div>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>grid-layout demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- The script below can be omitted --> <script src="/resources/turnOffPushState.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Grid Layout Example</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div> </div><!-- /grid-a --> </div> </div> </body> </html>
