툴바 customize 하기
이전 글에 있던 navigation bar 를 보죠. 우리는 단지 세개의 <li>
elements만 사용해서 그 navigation bar 를 display 했었습니다. 그러면 jQuery Mobile 에 의해서 생성된 HTML 코드는 어떤지 Firebug를 통해서 볼까요?
각 <li>
element이 정의된 테이블 안에 ui-navbar
class가 생겼습니다.
각 <li>
item에는 버튼에 해당하는 ui-btn
class 를 가지고 있는 <a>
link가 있구요. 이 링크는 클릭이 일어났을 때 ui-btn-active
CSS class 를 갖게 될 겁니다. 그리고 다른 링크가 클릭되면 그 클래스는 없어집니다.
이 navigation bar를 우리 마음대로 꾸미기 위해서 이 CSS 클래스들을 이용할 수 있습니다.
Styling navigation bars
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-navbar a.ui-btn{
font-size : 16px;
}
.ui-navbar a.ui-btn.ui-btn-active{
font-style : italic;
background : red;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header data-position=fixed>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
<div data-role=footer data-position=fixed>
<div data-role=navbar>
<ul>
<li><a href=#>Menu 1</a></li>
<li><a href=#>Menu 2</a></li>
<li><a href=#>Menu 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
|
tistory569_01.html
|
|