2011년 8월 12일 금요일

jQuery Mobile - Navigation Bars


Navigation Bars

<div data-role="page" id="page1">
<div data-role="header">
<h1>Notification Detail</h1>
<nav data-role="navbar">
<a href="#" class="ui-btn-active">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
<a href="#">Fourth</a>
<a href="#">Fifth</a>
</nav>
</div>
<div data-role="content">
<h3>Nested List Example</h3>

</div>
<div data-role="footer">
<h1>O'Relly</h1>
</div>
</div>

<ul> 태그를 폭을 정당히 분할 하여 보다 깔금하게 보이게 할수 있다.
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
</ul>
</nav>


Positioning the Header and Footer
Header와 Footer 위치를 지정하는 3가지 방법이 있다.
  • Standard: 디폴트
  • Fixed: Scroll이 될 때도 Header와Footer는 항상 보인다.
  • Fullscreen: Standard와 차이점을 잘 모르겠다.


<div data-role="header" data-position="fullscreen">
<div data-role="footer"  data-position="fixed">

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...