사실 가장 필요한 기능이였는데..정말 쉽게 구현이 된다.
개념상으론 구조가 html5와 비슷하고, 태그만으로 애니메이션 효과를 연출하기 때문에 정말 초보자라도, jquery를 몰라도 구현이 가능하다.(실제로 내가 jquery를 모르기때문에 -0- )
내가 가장 필요로 했던 애니메이션효과인 Filp 효과와 Slide 효과만을 집어 넣어봤다.
전체 소스
<!doctype html>
<html>
<head>
<meta charset="EUC-KR" />
<title>test</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
<script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="euc-kr"></script>
<script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="euc-kr"></script>
<script type="text/javascript" charset="euc-kr">
$.jQTouch();
</script>
</head>
<body>
<div id="Menu">
<div class="toolbar">
<h1>View Change</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#secondPage">Slide</a></li>
<li class="arrow"><a class="flip" href="#secondPage">Flip</a></li>
</ul>
</div>
<div id="secondPage">
<div class="toolbar">
<h1>Second Page</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#Menu">Back</a></li>
</ul>
</div>
</body>
</html>
- 위의 소스대로 하면 당연히 않된다. 각자의 프로젝트에서 jqtouch의 라이블러리 경로가 다르기 때문인다.
script src="" , import 부분의 경로를 자신의 프로젝트에 맞게 고쳐서 쓰기 바란다.
'web > JQTouch' 카테고리의 다른 글
| jQTouch 페이지 전환 효과! (0) | 2010.12.07 |
|---|---|
| jQTouch viewport 에 대하여.. (0) | 2010.12.06 |
| jQTouch 혹시 한글이 안된다면! (2) | 2010.12.05 |
| jQTouch media Queries (0) | 2010.12.02 |
| jqtouch -_-신기한 UI세계로~ 설정부터~ (0) | 2010.11.27 |
