· jQuery Mobile을 사용하면 쉽게 레이아웃을 구성할 수 있다. · div 태그의 class 속성에 uigrid를 입력해 레이아웃을 구성한다. · ui-grida-a부터 ui-grida-d까지 입력이 가능하다. |
■ ui-grid 클래스로 화면 나누기 ①
01. ui-grid-a를 사용해 레이아웃을 구성하면 내부 요소의 클래스에 ui-block-a와 ui-block-b를 입력해 위치를 지정한다.
ui_grid_one.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="javascript:" data-role="button">ui-block-a</a>
</div>
<div class="ui-block-b">
<a href="javascript:" data-role="button">ui-block-b</a>
</div>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 실행하면 이등분돼 div태그를출력하는데. ui-grid-a클래스는 화면을 이등분 한다는 의미이다.
ui-grid-b는 화면을 3등분하며, ui-grid-c는 화면을 4등분 한다는 의미이다.
■ ui-block 클래스로 여러 줄 구성하기
01. ui-block 클래스를 입력하면 여러 줄에 걸쳐 요소를 구성할 수 있다.
ui_grid_two.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="javascript:" data-role="button">ui-block-a</a>
</div>
<div class="ui-block-b">
<a href="javascript:" data-role="button">ui-block-b</a>
</div>
<div class="ui-block-a">
<a href="javascript:" data-role="button">ui-block-a</a>
</div>
<div class="ui-block-b">
<a href="javascript:" data-role="button">ui-block-b</a>
</div>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와 같다.
■ ui-grid 클래스로 화면 3등분 하기
01. ui-grid-b 클래스는 화면을 3등분 하므로 내부에 ui-block 클래스를 c까지 지정할 수 있다.
ui_grid_three.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="javascript:" data-role="button">ui-block-a</a>
</div>
<div class="ui-block-b">
<a href="javascript:" data-role="button">ui-block-b</a>
</div>
<div class="ui-block-c">
<a href="javascript:" data-role="button">ui-block-c</a>
</div>
<div class="ui-block-a">
<a href="javascript:" data-role="button">ui-block-a</a>
</div>
<div class="ui-block-b">
<a href="javascript:" data-role="button">ui-block-b</a>
</div>
<div class="ui-block-c">
<a href="javascript:" data-role="button">ui-block-c</a>
</div>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와 같다.
■ ui-grid 클래스를 사용하여 레이아웃 구성하기
01. 레이아웃을 구성할 때 ui-grid를 하나의 구성요소로 활용한다고 생각하면된다.
아래 코드는 원하는 곳에 버튼을 위치시키려고 ui-grid를 부분적으로 사용했다.
ui_grid_layout.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput">ID</label>
<input type="text" name="id_input" id="id_input"/>
</div>
<div data-role="fieldcontain">
<label for="textinput">Password</label>
<input type="text" name="password_input" id="password_input"/>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<input type="submit" value="Submit"/>
</div>
<div class="ui-block-b">
<input type="reset" value="Reset"/>
</div>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와 같다.
