물론 그냥 공통 모듈 만들어서 include 형태로 html 로 간단히 구현할수도 있겠지만, 모바일이다 보니 해상도 처리도 그렇고 jQuery 로 처리하는 것이 여러모로 보기가 좋다.
<!DOCTYPE html>
<html>
<head>
<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>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
div.m_footer{position:fixed;z-index:100000;left:0;bottom:0;width:100%;height:50px;}
#m_footer_icon{width:520px;margin:0 auto 0;list-style:none;padding:0;}
#m_footer_icon li{height:53px;float:left;margin:0;padding:0;}
#m_footer_icon li a{display:block;}
</style>
</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">
<h1>본문</h1>
</div>
<div data-role="footer" data-position="fixed" class="m_footer">
<ul id="m_footer_icon">
<li style="position:relative"><a href="#" data-role="button" data-icon="plus">Home</a></li>
<li style="position:relative"><a href="#" data-role="button" data-icon="plus">Sub Menu01</a></li>
<li style="position:relative"><a href="#" data-role="button" data-icon="plus">Sub Menu02</a></li>
<li style="position:relative"><a href="#" data-role="button" data-icon="plus">Sub Menu03</a></li>
<li style="position:relative"><a href="#" data-role="button" data-icon="plus">Search</a></li>
</ul>
</div>
</div>
</body>
</html>
위의 코드를 사용하면 창의 크기가 변하더라도 항상 Footer 가 최 하단에 있게 된다.
중요 한 것은 [data-position="fixed"] 인데 이 옵션이 붙어 있으면 헤더와 풋터가 폼의 상/하단에 항상 고정되어 있게 된다.
(추가: 기본적으로 content 영역을 클릭시 헤더와 풋터가 사라지게 되어 있는데, data-tap-toggle="false" 를 덧붙여 놓으면 해당 기능이 작동하지 않는다.)
주의 해야 할것은 jQuery 첨부 순서도 위의 코드 순서로 해야지, 순서가 바뀌어도 적용이 안된다.
