JQTouch 활용

jqtouch/jqtouch.css를 보면 활용 가능한 목록을 볼 수 있다. 
사용시(body부분에서) 아이디가 jqt아래로 들어가야 된다. 
 <div id='jqt'>
   ...
</div>

jqtouch.js를 보면 사용 가능한 애니메이션을 볼 수 있다.  (selector로 된부분을)
html파일에서 class='cube'로 하여 사용할 수 있다. 


[자 그럼 이제 코딩을 해보자]
이건 그냥 복사해서 쓰자 
-----------------------------------------------<JQTouch를 사용하기 위한 스켈레톤 태그>-----------------------------------------------------------

<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: 'black'

});

$(function(){

    // Custom Javascript (onReady)

});

</script>

------------------------------------------------------------------------------------------------------------------------------------------------------------

<div id='jqt'>

<div id='animations'>

<div class='toolbar'>

<h1>Animations</h1>

</div>

<ul class='rounded'>

<li><a href='#anidemo'>Slide Left</a></li>

<li><a href='#anidemo' class='cube'>Cube Left</a></li>

<li><a href='#anidemo' class='fade'>fade</a></li>

<li><a href='#anidemo' class='swap'>swap</a></li>

<li><a href='#anidemo' class='pop'>pop</a></li>

<li><a href='#anidemo' class='slideup'>slide Up</a></li>

<li><a href='#anidemo' class='dissolve'>dissolve</a></li>

</ul>

</div>

<div id='anidemo'>

<div style='font-size:1.5em; text-align:center; margin 160px 0 90 px;'>
                   animation is OK?</div>

<a href='#' class='redButton goback'>go Back</a>

<!-- 버튼의 색은 redButton whiteButton 등으로 조절가능하다. //-->

</div>

</div>
------------------------------------------------------------------------------------------------------------------------------------------------------------ 

결과의 차이는 없으나
페이지 이동시 다양한 애니메이션 효과를 주며 이동을 한다.  

위에서 나온 빨간색 버튼은
 themes/jqt/themes.css 에 명시되어 있다.


자, 여기서
애니메이션 효과를 변경하려면 jqtouch.css를 수정하면 된다.

 여기 나온 값을 변경하면,  좀 더 색다른 효과를 줄 수 있다. (잘못주면 아주 이상하다)



화면을 입력하는 화면을 추가해 보자 (우측 상단에 + 버튼을 눌러 입력하는 화면을 띄운다)
------------------------------------------------------------------------------------------------------------------------------------------------------------ 

<div id='anidemo'>

<div class='toolbar'>

<h1>Ani Demo</h1>

<a class='button back' href='#'>Back</a>

<a class='button slideup' href='#addEntry'>+</a>

</div>

<div style='font-size:1.5em; text-align:center; margin 160px 0 90 px;'>animation is OK?</div>

<a href='#' class='redButton goback'>go Back</a>

</div>

<div id='addEntry'>

<div class='toolbar'><h1>AddEntry</h1>

<a class='button cancel' href='#'>Cancel</a>

</div>

<form action='' method='post'>

<ul>

<li><input type='text' /></li>

<li><input type='submit' class='submit' name='action' value='AddEntry'></li>

</ul>

</form>

</div> 
------------------------------------------------------------------------------------------------------------------------------------------------------------  

<실행결과> - 쉽다 - 결코 어렵지 않다