■ jQuery Mobile 툴바
01. jQuery Mobile에서는 헤더와 푸터 부분을 합쳐서 툴바라고 한다.
헤더와 푸터에는 data-position 속성을 입력할 수 있는데 data-position 속성은 툴바의 위치와 형태를 지정한다.
data-position 속성은 inline이나 fixed를 입력한다.
data_position.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" data-position="fixed">
<h1>Mobile</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. data-positinon속성을 fixed로 설정을 하면 헤더와 푸터 툴바의 위치가 화면 상단과 하단에 고정된다.
03. 아래 이미지는 data-position속성을 inline으로 지정하거나 혹은 data-position속성을 적용하지 않았을 경우이다.
기본적으로 data-position 속성은 inline으로 지정되므로 따로 입력할 필요가 없다.
■ 헤더에 버튼 생성하기.
01. jQuery Mobile은 헤더에 기본적으로 2개의 버튼을 놓을 수 있다.
a태그를 이용하면 아래와 같이 자동으로 버튼이 만들어 진다.
data_position_icon.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" data-position="fixed>
<a href="javascript:" data-icon="home" class="ui-btn-left">홈</a>
<h1>Mobile</h1>
<a href="javascript:" data-icon="gear" class="ui-btn-right">설정</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed>
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 실행하면 아래 그림처럼 헤더에 버튼이 생성된다.
■ 푸터에 버튼 생성하기.
01. 헤더와는 다르게 푸터에는 버튼을 원하는 만큼 생성할 수 있다.
하지만, 화면의 너비를 벗어나면 좋지 않으므로 3개에서 4개까지가 가장 적당하다.
푸터에 버튼을 만드는 것도 간단히 a태그를 입력하면 된다.
data_footer_icon.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" data-position="fixed">
<a href="javascript:" data-icon="home" class="ui-btn-left">홈</a>
<h1>Mobile</h1>
<a href="javascript:" data-icon="gear" class="ui-btn-right">설정</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<a href="javascript:" data-icon="plus">추가</a>
<a href="javascript:" data-icon="delete">삭제</a>
<a href="javascript:" data-icon="refresh">새로고침</a>
</div>
</div>
</body>
</html>
|
02. 아래와 같이 푸터에 버튼이 생성된 모습을 확인 할 수 있다.
