class 가 toolbar이면 이미 세팅된 JQuery에 의해 toolbar의 디자인이 입혀진다.
head부분의 스크립트는 가져다 쓰면 되고, 이 부분만 있으면 기본은 해결 된다.
JQuery에서는 아이디 앞에 항상 #이 붙는다.
<a href=#아이디명.>으로 링크를 걸어주면
<div id='아이디명'>로 자동으로 화면 전환을 해준다.
class명에 button back로 설정해 놓으면 자동으로 back버튼이 생성되고, 링크는 #으로 한다.
class에 button flip은 좌우로 돌면서 화면이 전환된다.
li에 class ='arrow'를 주게 되면 오른쪽에 화살표가 붙는다.
<소스>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
<link type='text/css' rel='stylesheet' media='screen' href='../../senchalabs/jqtouch/jqtouch.css'>
<link type='text/css' rel='stylesheet' media='screen' href='../../senchalabs/themes/jqt/theme.css'>
<script type="text/javascript" src="../../senchalabs/jqtouch/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../senchalabs/jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch( {
icon: 'kilo.png',
statusBar : 'block'
});
$(function() {
// Custom Javascript(onReady)
});
</script>
</head>
<body>
<!-- 초기 화면 //-->
<div id='home'>
<div class='toolbar'>
<h1>다이어트 다이어리.</h1>
<a href='#setting' class='button flip'>Settings</a>
</div>
<ul class='rounded'>
<li><a href='#about'>About</a></li>
<li><a href=''>Date</a></li>
</ul>
</div>
<!-- 첫번째 클릭요서인 about 화면 //-->
<div id='about'>
<div class='toolbar'>
<h1>About</h1>
<a href='#' class='button back'>back</a>
</div>
<div>
<p>이앱은 식이요법과 체중관리를 위한...</p>
</div>
</div>
<!-- setting 화면 //-->
<div id='setting'>
<div class = 'toolbar'>
<h1>Settings</h1>
<a class='button cancel' href ='#'>Cancel</a>
</div>
</div>
</body>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------<실행화면>
'IT 관련 > Html5' 카테고리의 다른 글
| JQTouch 활용2 (0) | 2011.10.15 |
|---|---|
| JQTouch 활용 (0) | 2011.10.14 |
| JQuery에 대하여 (0) | 2011.10.13 |
| 아이폰 브라우저에 CSS적용해 보기 (0) | 2011.10.08 |
| CSS 적용 방법 (0) | 2011.10.08 |