jQuery를 모바일 그리드
jQuery Mobile 그리드 레이아웃
jQuery Mobile은 CSS 기반 열 레이아웃 세트를 제공합니다. 그러나 모바일 장치에서는 휴대폰의 화면 너비가 좁기 때문에 일반적으로 열 레이아웃을 사용하지 않는 것이 좋습니다.
하지만 때로는 버튼이나 탐색 라벨과 같은 작은 요소를 표처럼 나란히 정렬하고 싶을 때가 있습니다. 이 경우 열 레이아웃을 사용하는 것이 좋습니다.
그리드의 열은 너비가 동일하며(총 100%) 테두리, 배경, 여백 또는 안쪽 여백이 없습니다.
4가지 레이아웃 그리드를 사용할 수 있습니다:
| grid class | column | column width | corresponding | instance |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-블록 -a | 사용해 보세요 |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | 사용해 보세요 |
| ui-grid -b | 3 | 33% / 33% / 33% | ui-block-a|b|c | 해 보세요 |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | 사용해 보세요 |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui -block-a|b|c|d|e | 해 보세요 |
 | 열 컨테이너에서 하위 요소가 소유한 클래스는 ui-block-a|b|c입니다. |d|e는 열 수에 따라 달라집니다. 열이 나란히 떠 있습니다.
예 1: 클래스는 ui-grid-a(2열 레이아웃)이므로 ui-block-a와 ui-block-b의 두 하위 요소를 지정해야 합니다. 예 2: 클래스가 ui-grid-b(3열 레이아웃)인 경우 ui-block-a, ui-block-b 및 ui-block-c의 세 가지 하위 요소를 추가해야 합니다. |
|---|
사용자 정의 그리드
CSS를 사용하면 열 블록을 사용자 정의할 수 있습니다.
Instances
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>自定义列</h1>
</div>
<div data-role="main" class="ui-content">
<p>三列样式布局：</p>
<div class="ui-grid-b">
<div class="ui-block-a"><span>第一个列</span></div>
<div class="ui-block-b"><span>第二个列</span></div>
<div class="ui-block-c"><span>第三个列</span></div>
</div>
</div>
</div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
사용자 정의도 가능합니다 인라인 스타일을 사용하여 차단:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
다중 행
한 열 내에 여러 행을 가질 수도 있습니다.
참고: ui-block-a-class는 항상 새 줄을 만듭니다:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>多行</h1> </div> <div data-role="main" class="ui-content"> <p>三列布局:</p> <div class="ui-grid-b"> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div> </div> <p>多行的三列布局:</p> <div class="ui-grid-b"> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div> <div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div> </div> </div> </div> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
반응형 그리드
작은 화면에서는 한 행에 너무 많은 버튼을 나란히 배치하는 것은 권장하지 않습니다(텍스트가 짧아집니다).
우리는 반응형 그리드를 생성하기 위해 컨테이너의 UI 반응 클래스를 사용합니다:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>响应式布局</h1> </div> <div data-role="main" class="ui-content"> <h3>慢慢重置窗口大小。布局会根据浏览器的宽度变化自适应大小。</h3> <div class="ui-grid-b ui-responsive"> <div class="ui-block-a"> <a href="#" class="ui-btn ui-corner-all ui-shadow">第一列按钮</a><br> <span>第一列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span> </div> <div class="ui-block-b"> <a href="#" class="ui-btn ui-corner-all ui-shadow">第二列按钮</a><br> <span>第二列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span> </div> <div class="ui-block-c"> <a href="#" class="ui-btn ui-corner-all ui-shadow">第三列按钮</a><br> <span>第三列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span> </div> </div> </div> </div> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
