본문 바로가기

web/JQTouch

jqtouch -_-신기한 UI세계로~ 설정부터~

오......그냥 앱웹을 검색하다가 결국 jqtouch 까지 오게되었다. 
스크립트도 사용할줄 모르는 놈에게 jquery 라니...-0- 험난한 길이 뻔히 보인다.

먼저 설정부터 시작!
1. css,js 파일이 있는 패키지를 다운 받는다!

2. 압축을 풀면 폴더가 생기는데 그 폴더안에 필요한 파일이 다 들어가 있다.
우선 폴더 이름을 깔끔하게 jqtouch 로 하고 해당하는 이클립스에 복사해 두었다.
(폴더 jqtouch 가 보인다!)

3. 이제 스크립트 소스 링크만 해주면 맘껏 사용해줄수 있다.
<%@page contentType="text/html" pageEncoding="euc-kr"%>
<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
        <title>jQTouchTest</title>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js"></script>
        <style type="text/css">
            @import "jqtouch/jqtouch/jqtouch.min.css";
        </style>
        <style type="text/css">
            @import "jqtouch/themes/jqt/theme.min.css";
        </style>
        <script>
            $.jQTouch();
        </script>
    </head>
    <body>  
        <div id="home">
            <div class="toolbar"><h1>jQTouchTest</h1></div>
            <ul class="rounded">                                
                <li><a href="#samsung">삼성</a></li>
                <li><a href="#apple">애플</a></li>
                <li><a href="#chick">닭공장</a></li>
                <li><a href="#google">구글</a></li>
            </ul>
        </div>       
    </body>
</html>


(혹시 폴더 이름이 다르게 되어 있다면 src 부분을 고쳐서 쓰면 된다.)

4. 마지막! 실행화면! 링크 : http://www.testiphone.com/ 여기에 자신이 만든 주소만 넣어주면 실제 화면처럼 나온다.(뭐 화면만 줄여서 출력하는 정도이지만 우리가 원하는건 UI 이기 때문에 이것만으로도 만족한다.)

데모 싸이트가 있기 때문에 쉽게 따라할수 있을거 같다.(나는 동적인것을 사용하는게 아닌-영상이나,다이렉티브한것말고 UI를 사용할려고 한것이기 때문에 데모만으로도 충분할꺼 같다.)

'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 화면전환 애니메이션.  (0) 2010.11.30