안녕하세요!!
이번 포스팅은 지난 포스팅에 이어서 jQuery Mobile 툴바에 대해서 설명하겠습니다.
오늘 설명드릴 내용은 툴바에 대한 스크롤 입니다. 스크롤은 마우스에 달려있는 위, 아래 내리고 올리는 기능을 하는 역할이죠. 그런데 jQuery Mobile의 스크롤은 모바일에서 하는 것이기 때문에 손가락을 이용해서 한다고 보시면 되겠습니다.
스크롤은 총 3가지 방법으로 할 수 있습니다.
inline : 기본적으로 헤더와 푸터 내용이 함께 스크롤 됩니다.
fixed : 헤더와 푸터 내용은 고정된체 그 안의 내용만 스크롤 됩니다.
fullscreen : 내용을 클릭하면 헤더와 푸터는 나타났다 사라졌다를 반복합니다. 내용만 보고 싶을 경우 한번 클릭하면 헤더와 푸터의 내용은 사라지며 내용만 스크롤을 하면 됩니다. 그리고 다시 헤더와 푸터의 내용을 보고자 할 경우 다시한번 클릭하면 헤더와 푸터의 내용이 나타나게 됩니다.
그럼 소스를 통해서 자세히 알아보겠습니다.
<!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" data-position="inline">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..이곳에 내용을 입력하세요..</p>
</div>
<div data-role="footer" data-position="inline">
<h1>Copyright by makand123. All Rights Reserved</h1>
</div>
</div>
</body>
</html>
// 우선 윈도우 화면에서 먼저 테스트 해보시기 바랍니다. 화면의 크기를 줄여가며 스크롤이 어떻게 작동되는지 살펴보시기 바랍니다. 위의 소소는 inline 이므로 헤더와 푸터의 내용이 같이 스크롤 되는것을 알 수 있습니다.
그리고 위의 소스에서 붉은색으로 표기된 data-position="inline" 이부분을 data-position="fixed" 로 변경후 소스를 테스트 해보면 헤더와 푸터가 고정되어있고 내용만 스크롤 되는것을 확인 할 수 있습니다.
그리고 마지막으로 fullscreen의 경우는 위의 소스에서 <div data-role="header" data-position="inline">
부분을 <div data-role="header" data-position="fixed" data-fullscreen="true"> 처럼 변경 후 실행을 해보면 아래와 같이 나오는 것을 확인할 수 있습니다. 즉 마우스 또는 손가락을 한번 클릭하면 헤더와 푸터의 내용이 나왔다가 또 한번 클릭하면 헤더와 푸터의 내용이 사라짐을 알 수 있습니다.
직접 테스트 해보면 "아~ 이거 신기한데..." 라고 생각하지 않을까 합니다.
지금까지 jQuery Mobile 툴바에 대해서 설명드렸습니다. 크게 어려운점은 없을거라 생각합니다. 혹시라도 궁금한점 있으면 쪽지, 댓글 보내주세요!! 그럼 남은 오후 즐거운 시간 보내시고 즐거운 프로그래밍 되시기 바랍니다.
'jQuery Mobile > JM Tutorial' 카테고리의 다른 글
| jQuery Mobile Collapsible(접고 펴는 기능) (0) | 2013.11.20 |
|---|---|
| jQuery Mobile 네비게이션 바(Navigation Bars) (0) | 2013.11.15 |
| jQuery Mobile 툴바(toolbars) (0) | 2013.11.11 |
| jQuery Mobile 버튼 (0) | 2013.10.31 |
| jQuery Mobile 페이지2 (2) | 2013.10.28 |
