안녕하세요!!
이번 포스팅은 jQuery Mobile 의 툴바에 대해서 알아보겠습니다.
내용이 조금 많은듯 해서 다음 포스팅과 반반 나눠서 포스팅해야 할듯 합니다. ^^;
우선 오늘 포스팅은 헤더 바(hearder bars)와 푸터 바(footer bars)에 설명하겠습니다.
사실 헤더(hearder)는 일반적으로 페이지 제목, 로고, 그리고 버튼을 포함하는 내용을 많이 담고 있습니다.
지금 보여드릴 예제는 여러분들이 왼쪽과 오른쪽에 버튼을 추가하는 내용입니다.
예제를 보시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" data-role="button" data-icon="home">Home</a>
<h1>나의 모바일 홈페이지</h1>
<a href="#" data-role="button" data-icon="search">Search</a>
</div>
</div>
</body>
</html>
// 붉은 글씨로 표시된 부분을 보면 <a>태그 <h1> 태그 <a> 태그로 나오는 것을 볼 수 있고 data-icon 은 home 과 search 를 넣어서 해당하는 아이콘이 나오게 한것을 알 수 있습니다. 그리고 만약 <a> 태그중 search 부분을 없애면 자동으로 home 버튼이 좌측으로 배치되는것을 확인할 수 있으며, 버튼을 두 개를 넣을 경우 첫 번째 버튼이 좌측, 두 번째 버튼이 우측으로 가는것을 알 수 있습니다.
그리고 만약 버튼을 하나만 넣고 싶은데 우측에 넣고 싶을 경우 아래와 같이 코딩합니다.(기본적으로 좌측에 버튼이 생성됨)
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
<a href="#" data-role="button" class="ui-btn-right">Search</a>
</div>
붉은색으로 표시된 부분을 보면 class="ui-btn-right" 버튼을 우측에 배치시키라는 명령입니다. 그리고 만약 아이콘을 넣고 싶은 경우 그 옆에 data-icon="넣고싶은 아이콘" 이렇게 하시면 됩니다.
마찬가지로 하단바에도 버튼을 넣을 수 있습니다.
<div data-role="footer">
<a href="#" data-role="button">페이스북</a>
<a href="#" data-role="button">트위터</a>
<a href="#" data-role="button">인스타그램</a>
</div>
처럼 말이죠. 위 내용을 적용하려면 상단에 있는 헤더바의 소스중에서
<div data-role="header"></div>
...
<div data-role="footer"></div>
이렇게 하고 테스트를 해보면 됩니다. 그런데 그렇게 적용할 경우 헤더바, 하단바 이렇게 보기 안좋게 나오게 되는데 중간에
<div data-role="header"></div>
<div data-role="content">어쩌구 저쩌구 테스트 내용</div>
<div data-role="footer"></div>
이렇게 하면 중간 내용이 있어서 보기 좋게 나오겠죠.
그리고 위 하단바 처럼 버튼을 그냥 넣으면 좌측 정렬되어 나오게 됩니다. 이것을 중앙 정렬을 하려면
<div data-role="footer" class="ui-btn">
부분을 넣으면 중앙 정렬이 됩니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" data-role="button" data-icon="home">Home</a>
<h1>나의 모바일 홈페이지</h1>
<a href="#" data-role="button" data-icon="search">Search</a>
</div>
<div data-role="content">
<p>어쩌구 저쩌구 테스트 글!! 입니다.</p>
</div>
<div data-role="footer" class="ui-btn">
<a href="#" data-role="button" data-icon="plus">페이스북</a>
<a href="#" data-role="button" data-icon="plus">트위터</a>
<a href="#" data-role="button" data-icon="plus">인스타그램</a>
</div>
</div>
</body>
</html>
// 위의 내용을 모두 적용한 소스 입니다. 실행하면 아래화면 처럼 나오게 됩니다.
모바일 화면에서 테스트 해야 제대로 된 화면을 볼 수 있을텐데 시간상 익스플로러 화면에 이미지를 보여주는점 양해 바랍니다. ^^;
그럼 오늘 포스팅은 여기까지 마치고 다음 포스팅에 이어서 툴바에 대해서 설명하겠습니다. 읽어주셔서 감사하며, 궁금하거나 문의사항 있으면 쪽지 또는 댓글 바랍니다.
즐거운 저녁식사 되기 바라고 즐거운 프로그래밍 되세요!!!
'jQuery Mobile > JM Tutorial' 카테고리의 다른 글
| jQuery Mobile 네비게이션 바(Navigation Bars) (0) | 2013.11.15 |
|---|---|
| jQuery Mobile 툴바(Toolbars) (0) | 2013.11.13 |
| jQuery Mobile 버튼 (0) | 2013.10.31 |
| jQuery Mobile 페이지2 (2) | 2013.10.28 |
| jQuery Mobile 페이지 (0) | 2013.10.25 |
