[jQTouch] Demos 훓어보기

Posted in 모바일/Javascript // Posted at 2010. 10. 28. 15:10
728x90
이전 글([jQTouch] Extensions (확장기능))에 이어 이번에는 jQTouch가 제공하는 Demo를 살펴보자
역시 데모를 따라 제작하기 보다는 데모에서 사용된 코드와 흐름을 간략히 분석하는 것으로 훓어보자.

총 두개의 데모가 제공되는데, Clock app 과 To-Do app 이다. 이 두 데모는 각각 세계시간과 할일 목록을 관리하는 앱이다. 데모에서는 jQTouch 기반으로 작성되었으며 jQuey를 이용해 로직을 정의하였다

무엇보다 데모의 유용성은 jQTouch기반 웹앱의 아이디어를 보여준다는데 있다.
즉 코드의 구성보다는 웹앱에 걸맞는 jQTouch 앱의 사례를 보여준다는데 의미가 더 크다.

jQTouch가 모바일 웹앱에 초점을 맞춘 만큼 이 두 데모도 데스크탑보다는 스마트폰에서의 활용도가 높은 특징을 보여준다. 모쪼록 jQTouch를 이용하는 개발자들도 이 데모로 출발하여 가치있는 웹앱에 도전해 보기 바란다.

Clock app
GMT를 기준으로 세계시간을 표시하는 시계앱이다. 참고로 GMT는 영국의 그리니치 천문대를 중심으로 한 시간대로 그리니치 평균시라하며 대한민국의 경우 그리니치 평균시 보다 9시가 빠른 GMT+9 시간대에 속한다.

먼저 UI 구성을 살펴보면,
아래와 같이 시계 표현을 위한 각각의 이미지들이 존재하며 clock.css에서 div요소와 이미지를 매칭시키고 있다.


최초 시계구성은 addClock 함수에서 div 요소를 생성하는 것으로 처리하며 시간이 흘러가는 것은 updateClocks 함수가 1초마다 반복실행되면서 처리하도록 한다. 이때 시계의 분침,시침,초침등의 움직임은 CSS3의 transform 기능으로 정의하였다
...
$('.sec', $el).css('-webkit-transform', 'rotate(' + ( second * 6 ) + 'deg)');

앱이 처음 실행될 때 기본값으로 두 개의(필라델피아,로스앤젤레스) 시계가 표시되며 setInterval() 을 통해 매 1초마다 시계를 갱신시킨다
addClock('Philadelphia', -5.0);      //필라델피아 시계 초기화
addClock('Los Angeles', -8.0);     //로스앤젤레스 시계 초기화
updateClocks();                          //시계 업데이트
setInterval(updateClocks, 1000);  //매 1초마다 갱신

그리고 시계를 추가하기 위해 폼(form)을 이용하는데, 이전 글([jQTouch] GET, POST 전송) 의 POST로 submit 하는것이 아니라 자체 스크립트 호출로 처리하고 있다
<form id="time"> ..... </form>

$('#time').submit(function(){
                    addClock($('#label').val(), Number($('#timezone').val())); //시계추가
                    $('input').blur();                                                            //포커스 제거
                    $('#add .cancel').click();                                                 //cancel 클릭
                    this.reset();                                                                  //폼리셋
                    return false;
                });

아래 화면은 데모를 실행한 화면이며 각각 처음화면, 시계추가, 추가된 화면이다
 
 


소스가 비교적 어렵지 않으니 직접 살펴보고 음미(?)해 보기 바란다


To-Do app
두번째 데모는 '할일 목록'을 관리하는 앱이다.
우선 데모 실행화면부터 보자.아래 실행화면을 보면 지금까지 스타일로 사뭇 달라 보인다.


이 데모에서는 기본 jQTouch 화면과 다른 스타일을 위해 css에 많은 할애을 하고 있는 것이 특징이다. 
특히 타이틀바와 중간영역에 있는 짙은 밤색 처리는 백그라운드 이미지로 처리하였는데 이미지파일이 아닌 이미지 데이터 문자열로 처리하고 있다.
toolbar { background: url(https://t1.daumcdn.net/cfile/tistory/256CA34056E6D64F1D"FONT-FAMILY: Tahoma">  }

나머지는 일반적인 CSS 스타일 지정이며, 이와 같이 얼마든지 앱스타일을 변경할 수 있다는 것을 느끼면 되겠다

할일 목록을 추가하는 것은 submitForm 함수에서 처리하는데, incomplete 라는 ul 요소에 li를 새로 추가하는 로직이다. 앞의 체크박스도 같이!
function submitForm(){
        $el = $('#add form');
        if ($('#todo', $el).val().length > 1) {
            var itemid = $('#home ul li').length + 1;
            $('#home .incomplete').append($('<li><input type="checkbox" /> <span>' + $('#todo', $el).val() + '</span></li>'));
         }
          jQT.goBack();
          $el.get(0).reset();
          return false;
}

할일 앞의 체크박스를 클릭하면 to do 와 completed 사이를 오가는데 다음과 같은 코드로 처리한다
$('input[type="checkbox"]').live('change', function(){
          var $el = $(this);
          if ($el.attr('checked')) {
              $el.parent().prependTo('.complete');
          } else {
              $el.parent().appendTo('.incomplete');
          }
});

참고로 Completed 하위 목록은 가운데 줄이 그어져 있는데 다음의 css로 처리된 것이다
.complete span { text-decoration: line-through; }

다음은 할일 추가와 일부 제거한 모습이다.
 



마치며...
데모를 살펴 보면서 느낄 수 있겠지만, jQTouch를 이용한 웹앱 역시 자바스크립트, jQuery 와 같은 기본적인 웹 클라이언트 기술에 능숙한 것을 요구한다. jQTouch 가 아이폰 앱에 걸맞는 UI 구성은 도와주지만 앱의 로직 부분까지 담당하지는 않기 때문이다.
저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

자주 쓰는 jQuery 기능 - 이벤트 편  (0) 2011.08.04
자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편  (2) 2011.08.03
[jQTouch] Extensions (확장기능)  (0) 2010.10.28
[jQTouch] GET, POST 전송  (0) 2010.10.27
[jQTouch] 페이지 전환 이벤트  (0) 2010.10.27

[jQTouch] Extensions (확장기능)

Posted in 모바일/Javascript // Posted at 2010. 10. 28. 11:08
728x90
지금까지 총 여섯번에 걸쳐 jQTouch의 기본적인 내용을 살펴 보았다.
jQTouch 에서 제공하는 데모를 기준으로 빠르게 훓어보았지만 기본적인 사용법은 거의 다룬셈이다

지금까지 살펴본 내용은 UserInterface, Animations, AJAX, Callback Events 정도인데 이 이상의 내용은 jQTouch 기본 사용법과 더불어 일반 웹 개발 스킬과 아이디어가 접목되어야 그럴싸한 웹앱이 탄생할 것이다

jQTouch 데모를 기준으로 남은 것은 Extensions 와 Demo 부분인데, 먼저 Extensions 를 살펴보자
Extensions 은 말그대로 일종의 jQTouch 확장 기능인데 이 글에서는 데모 코드를 따라 작성하기 보다는 jQTouch 기본 데모를 소개하는 수준에서 글을 마칠까 한다.

jQTouch 는 기본적인 라이브러리 기능에 추가해서 덧 붙일 수 있는 확장 기능을 정의할 수 있도록 구조화되어 있는데, 마치 플러그인과 유사한 느낌이다. jQTouch 객체에 addExtension 함수를 통해 확장 함수를 등록할 수 있으며  이 함수가 정의된 js 파일은 떼었다 붙일 수 있도록 별도의 파일로 정의하기를 권장한다.

ver1 beta2 에서는 총 4개의 확장 기능을 제공하며 extensions 폴더에 각각 독립된 js파일로 구성되어 있다
jQTouch 가 제공하는 4개의 확장 기능을 간략히 살펴보자

Auto Titles
먼저 자동 타이틀이다. 말 그대로 타이틀을 자동으로 구성해 주는 확장기능인데 링크로 페이지 이동시 링크 제목을 타이틀 내용으로 사용한다. 아래 화면처럼 Oranges링크를 클릭하면 타이틀의 내용이 자동으로 Oranges가 된다.
 


Auto Titles 확장 기능을 정의한 파일은 jqt.autotitles.js 파일인데 div 요소가 교체될 때 발생하는 pageAnimationStart 이벤트를 통해 해당 기능을 구현하고 있다


Floaty Bar
페이지에 둥둥 떠서 스크롤에 따라 자동으로 이동하는 보조 바(bar)인 플로티 바를 제공한다.
아래 화면처럼 플로티바가 페이지 위에 나타나며 스크롤 이동에 자동으로 반응한다. 그리고 Bar를 숨기거나 토글시킬 수 있다. jqt.floaty.js 파일에 로직이 정의되어 있으며 플로티 바로 사용할 div 요소에 makeFloaty, scrollFloaty, toggleFloaty, hideFloaty 등의 함수를 구성해 준다



GeoLocation
현재 위치를 위도와 경로로 반환하는 확장 기능인데 내부적으로 HTML5의 Geolocation 스펙을 이용하고 있다
참고: [HTML5] Geolocation

단말기가 Geolocation 기능을 지원해야 하며 사용자가 위치정보 제공에 동의해야 사용이 가능하다.
아래 화면은 크롬 브라우저에서 실행한 결과이다. jqt.location.js 파일에 로직이 정의되어 있다



Offline
인터넷 연결이 끊긴 오프라인 상태에서도 웹앱을 이용할 수 있도록 지원하는 확장기능인데 내부적으로 HTML5 의 Application Cache 스펙을 이용하고 있다
참고: [HTML5] 오프라인 웹 어플리케이션

서버에 캐시될 파일을 정의한 메니페스트파일(.manifest) 파일이 존재해야 하며 MIME타입이 설정되어 있어야 한다.
jQTouch 에서는 이 모든 파일을 제공해 주므로 서버설정만 맞춰주면 된다. 그리고 자동으로 캐시 업데이트 및 캐시 관리를 수행해 주기 때문에 오프라인 환경을 쉽게 개발할 수 있다.

아래는 데모 화면인데 페이지의 모든 리소스를 로컬에 저장했으며 오프라인 상태에서도 실행할 수 있다는 안내이다



이것으로 jQTouch 가 제공하는 4가지 확장 기능에 대해 간략히 살펴 보았다.
참고로 이 확장기능도 좋지만 더 유용한 기능이 있다면 얼마든지 커스텀하게 확장할 수 있을 것이다.
jQTouch 는 기능을 쉽게 확장할 수 있도록 구조화되어 있으며 아이디어만 있으면(그리고 자바스크립트, jQuery 에 대한 지식) 개발자 개개인이 참신한 확장기능을 구현하여 널리 사용자를 이롭게(?) 할 수 있을 것이다

저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편  (2) 2011.08.03
[jQTouch] Demos 훓어보기  (0) 2010.10.28
[jQTouch] GET, POST 전송  (0) 2010.10.27
[jQTouch] 페이지 전환 이벤트  (0) 2010.10.27
[jQTouch] 페이지 전환 효과 (에니메이션 효과)  (0) 2010.10.26

[jQTouch] GET, POST 전송

Posted in 모바일/Javascript // Posted at 2010. 10. 27. 17:09
728x90
jQTouch 의 GET, POST 전송을 대략 살펴 보니 참.. 재미있는 구조다!

POST 전송부터 살펴보자.
POST 전송은 웹 페이지의 폼(form) 양식을 서버로 전송하는 규칙인데, jQTouch 에서는 POST전송을 내부적으로 Ajax 호출로 처리한다. 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성, id를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다. 이 결과 처리 부분이 참으로 독특하다

우선 데모를 보자. 아래는 POST 전송을 위한 클라이언트 측 코드이며 폼양식이 정의되어 있다
코드에서는 전형적인 웹 페이지의 폼 요소 정의를 볼 수 있으며 일부 jQTouch용 class 속성이 이용되었다
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>POST Demo</h1>
  </div>       
  <ul class="rounded">
    <li><a href="#form1">Form</a></li>   
  </ul>  
</div>  
<form id="form1" action="server.asp" method="POST" class="form">
    <div class="toolbar">
        <h1>Post Demo</h1>
        <a class="back" href="#">Back</a>
    </div>
    <ul class="rounded">
        <li><input type="text" name="param" value="" placeholder="Typed Post Message" /></li>
    </ul>
    <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
</form>
</body>
</html>

폼을 전송할 대상은 server.asp 이다.
server.asp 는 폼 데이터를 전송받아 처리하는 서버측 파일로 php, jsp, asp, aspx 등 어떤 것을 사용해도 무방하다. 여기서는 폼 데이터를 전달받아서 출력하는 매우 단순한 코드를 정의하였다
<%
  param = request.form("param") 
  Response.Write param
%>
<div>
    <div class="toolbar">
        <h1>Server</h1>
        <a class="back" href="#">Back</a>
    </div>
    <ul class="rounded">
      <li href="#"><%=param %></li>
    </ul>
</div>

참고로 jQTouch가 제공하는 데모에서는 서버코드로 php를 이용하였다.
이 코드 역시 매우 단순한 형태로 전달받은 데이터를 출력하고 일부 목록을 생성하여 출력하는 형태이다
서버측코드를 해석하기 위한 웹서버가 존재해야 하며 필자의 경우 IIS 기반이라 asp 를 이용하였다


다음은 데모를 실행한 화면이다. 텍스트상자에 글을 입력하고 전송하면 결과를 출력한다
 


신기한것은 server.asp 의 결과화면이다
server.asp 코드 그 어디에도 jQTouch 관련 설정이 없다. 그런데도 결과화면은 보는 바와 같이 jQTouch 화면으로 나오고 있다. 그래서 내부 구조를 좀 확인하고자 jQTouch 핵심 엔진인 jqtouch.js 파일을 들여다 봤다.

아니나 다를까 결과 화면은 jQTouch 로직에 의해 자동으로 생성되는 것을 확인할 수 있었다
그리고 호출은 jQuery 용 Ajax 가 이용되었고 결과화면 링크는 page-1, page-1... 형태로 자동 부여 된다

jqtouch.js 파일을 보면 POST 전송의 시작은 submitForm() 함수이며 showPageByHref() 함수를 거쳐
$.ajax({ ... }); 로 전송이 이루어지며 결과화면의 자동 생성을 위해 insertPages() 함수로 이어진다
insertPages() 함수에서 페이지 요소를 생성하고 자동 증가 id를 부여하고 결과화면으로 구성한다

따라서 결과화면의 요청 URL을 보면 아래와 같이 자동으로 부여된 id page-(number++)형태가 된다
http://yourdomain/jQTouch/demos/test/formNpost.html#page-1

참. 재미있는 구조다.

GET 요청도 거의 유사한 매커니즘이다.
jQTouch 는 <a href="targetPage.asp"> 와 같은 기본 링크는 모두 Ajax 호출로 처리하고 결과 화면을 자동으로 구성해 준다. 이전에 jQTouch 페이지 전환에 대한 내용을 다룬적이 있는데 그 글에서는 완전한 외부링크를 다루었었다. 즉 target 설정으로 '_blank' , '_webapp' 혹은 rel='external' 속성을 줘서 jQTouch 에서 완전히 분리된 외부링크를 호출하는 것이다 => [jQTouch] 페이지 전환

반면 Ajax를 통한 GET 요청은 jQTouch 의 내부 알고리즘에 의해 Ajax호출로의 변환, 결과화면 자동구성이 지원되는 것이다. 사실 jQTouch 에서 외부링크로 호출하는 경우는 많지 않을 것으로 보인다.

코드는 거의 유사하여 일부 코드 조각만 제시한다. a 태그에 target, rel 속성이 없다는 것을 확인하자
<ul class="rounded">
   <li><a href="serverGet.asp?param=Hello! GET Request~">GET Request</a></li>
 </ul>

서버측 코드는 GET 요청이므로, requery.form 대신 request.querystring로 전달받는다.
실행화면은 다음과 같다
 



저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

[jQTouch] Demos 훓어보기  (0) 2010.10.28
[jQTouch] Extensions (확장기능)  (0) 2010.10.28
[jQTouch] 페이지 전환 이벤트  (0) 2010.10.27
[jQTouch] 페이지 전환 효과 (에니메이션 효과)  (0) 2010.10.26
[jQTouch] 페이지 전환  (0) 2010.10.26

[jQTouch] 페이지 전환 이벤트

Posted in 모바일/Javascript // Posted at 2010. 10. 27. 13:48
728x90
jQTouch 환경에서의 페이지 전환은 일반적인 웹페이지의 링크 개념보다는 뷰의 교체에 가깝다고 했었다
: [jQTouch] 페이지 전환

보통 웹 페이지는 자신이 처음 로드될 때 그리고 페이지를 빠져나갈 때 각각 이벤트를 걸 수 있다
즉 페이지가 처음 표시될 때 load 이벤트, 페이지를 이탈할 때 unload 이벤트가 발생하여 원하는 작업을 처리할 수 있다.

jQTouch 에서 일반적으로 사용하는 페이지 전환은 뷰의 교체 즉 페이지내 div 요소로의 이동이다.
즉 하나의 페이지에 정의된 div의 교체이기 때문에 위와 같은 한 페이지 기반의 로드,언로드 이벤트 처리가 적합하지 않다. 따라서 div 가 교체될 때 그리고 div 를 이탈할 때 발생하는 이벤트가 따로 존재해야 한다

jQTouch 는 이와같은 당연한 논리구조를 알고 있으며 적절한 이벤트를 제공해 주고 있다
바로 pageAnimationStart, pageAnimationEnd 이벤트가 그것이다

페이지 전환 즉 div 의 교체는 slide, slideup 과 같은 에니매이션효과로 전환되며 이 에니매이션 효과에 대해 이벤트를 추가하는 방식이다

페이지 전환, 이탈 두 시점에 pageAnimationStart, pageAnimationEnd 모두 발생하며 각각 전환 에니매이션의 시작과 끝을 알린다. 또한 이벤트 함수로 전달되는 매개변수의 direction 속성을 통해 페이지의 전환, 이탈을 구분할 수 있다.  (direction가 in 인 경우: 페이지 전환 , out 인 경우: 페이지 이탈)

아래 화면은 차례대로 페이지를 처음 이동한 것과 뒤로갔다가 다시 돌아왔을대의 결과 화면이다
첫 이동 시 에니매이션 시작과 끝을 알리는 두 이벤트가 모두 발생하였고 Back 했을 때 역시 두 이벤트가 발생하였다. 다만 direction 속성이 in 과 out 으로 페이지의 전환,이탈을 구분하고 있다. 이로써 일반적인 웹페이지 링크 모델에서의 페이지 로딩,언로딩 이벤트 효과를 jQTouch div 교체 모델에서도 적용할 수 있는 것이다.

 
 


코드는 jQTouch가 제공하는 데모코드와 동일하며 jQuery 문법이 사용 되었음을 알 수 있다
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
    });       
    $(function(){
      // Page animation callback events
      $('#pageevents').
          bind('pageAnimationStart', function(e, info){
              $(this).find('.info').append('Started animating ' + info.direction + '&hellip; ');
          }).
          bind('pageAnimationEnd', function(e, info){
              $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
          });          
    });     
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>Page Switch Event</h1>
  </div>       
  <ul class="rounded">
    <li><a href="#pageevents">Page Switch Event</a></li>   
  </ul>  
</div>  
<div id="pageevents">
  <div class="toolbar">
   <h1>Page Switch Event</h1>
   <a class="back" href="#">Back</a>
  </div> 
   <div class="info" style="font-weight: normal;">
</div> 
</body>
</html>


저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

[jQTouch] Extensions (확장기능)  (0) 2010.10.28
[jQTouch] GET, POST 전송  (0) 2010.10.27
[jQTouch] 페이지 전환 효과 (에니메이션 효과)  (0) 2010.10.26
[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25

[jQTouch] 페이지 전환 효과 (에니메이션 효과)

Posted in 모바일/Javascript // Posted at 2010. 10. 26. 15:41
728x90
jQTouch 에서는 페이지를 전환시킬 때 다양한 시각적 효과를 지원한다. 그것도 매우 간단히!
링크 태그인 a 태그에 class 속성의 설정으로 뷰 전환 효과를 지정할 수 있는데 슬라이드 효과에서 부터 페이드효과 그리고 큐브 형태의 에니메이션 효과까지 다양하게 지원된다

마치 파워포인트의 각 슬라이드가 넘어갈 때 줄 수 있는 효과와 유사하다
매우 간단한 사용법이라 블로깅 하기가 민망한 수준이다. 단지 class 속성 정의 뿐이니...

뷰 전환의 기본값은 'slide' 이다.
slide는 왼쪽으로 미끄러지듯 페이지가 전환되는 효과이다.

그리고 누구나 흥미를 가질만한 효과는 flip, swap, cube 정도라 생각된다
이 세 효과는 시각적으로 매우 동적인 전환 효과를 보여준다

아래 화면은 차례대로 flip, swap, cube 효과로 뷰를 전환시키는 모습이다
flip 는 화면을 뒤집는듯한 효과, swap 은 두 화면이 시각적으로 교체되는 효과, cube는 입방체모양희 전환효과를 보여주고 있다. 이런 화려한 효과가 단지 몇자만으로 가능하다니, 다시한번 jQTouch에게 고마울 따름이다
 
 



기타 다른 전환 효과도 앞선 예 보다는 정적이지만 보편적인 전환 효과로써 가치가 있을 것이다
slide : 기본값. 오른쪽에서 왼쪽으로 미끄러지 듯 전환
slideup: slide와 유사. 단 방향은 아래에서 윗쪽으로 미끄러지 듯 전환
dissolve: 점차 밝아지는 효과
fade: 점차 뚜렷해지는 효과. dissolve와 시각적으로 유사
pop: 팝업처럼 쏟아 오르는 효과

간단하기 때문에 일부 코드 조각만 제시한다
<ul class="rounded">
    <li><a href="#animdemo">slid(default)</a></li>
    <li><a href="#animdemo" class="slideup">slideup</a></li>
    <li><a href="#animdemo" class="dissolve">dissolve</a></li>
    <li><a href="#animdemo" class="fade">fade</a></li>
    <li><a href="#animdemo" class="flip">flip</a></li>
    <li><a href="#animdemo" class="pop">pop</a></li>
    <li><a href="#animdemo" class="swap">swap</a></li>
    <li><a href="#animdemo" class="cube">cube</a></li>   
  </ul>

저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

[jQTouch] GET, POST 전송  (0) 2010.10.27
[jQTouch] 페이지 전환 이벤트  (0) 2010.10.27
[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25
[jQTouch] jQTouch - 기본 환경 설정  (0) 2010.10.25

[jQTouch] 페이지 전환

Posted in 모바일/Javascript // Posted at 2010. 10. 26. 12:38
728x90
프로그래밍 학습 방식은 상향식과 하향식이 있다
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다

이를테면 OS원리와 메모리구조, 알고리즘과 같은 하부구조나 원리를 먼저 학습하고 C언어, 닷넷을 공부하는 방식을 상향식이라 할 수 있는데 대체로 정석 공부법으로 통하며 프로그램을 제대로 시작하고 싶은 시간많고 의지충만한 이들에게 권하는 방법이다. 반면 언어의 문법을 빠르게 학습하고 웹 사이트나 응용프로그램을 개발하면서 부딪히는 이슈를 해결하면서 부족분을 채워나가는 방식을 하향식이라 할 수 있는데 대체로 많은, 비 전공이면서 빠르게 개발을 하고 싶은 이들에게 권장하는 방식이다

물론 이 분류는 순수히 개인적인 구분이다. 그러나 대체로 개발자라면 무슨 말인지 이해가 될 것이다.
수 많은 개발자들이 하향식으로 접근하고 있으며 안타깝게도 하향식에서 머물러 있기도 한다

대체로 상향식이 정도로 통하며 막 시작하는 입문자에게 권장하기도 한다
심지어 경력이 꽤 쌓인 개발자들도 자조 섞인 목소리로 하향식에 머문 자신과 다른 개발자들을 비판하곤 한다
물론 그런 비판 속에 필자 역시 100% 떳떳할 수 없다고 고백한다

이 글에서 이런 말을 언급하는 이유는, 개발자의 학습 형태나 자질은 논하고자 하는 것은 아니다
원론적인 측면에서 비판받고 있는 하향식 학습이, 경우에 따라선 의미 있기도 하다는 것을 말하려 한다

지금 빠르게 학습 중인 jQTouch 가 그에 해당한다. 일주일에 어느정도 끝을 보려 하는 이 공부는 사용법에 초점을 맞추고 있다. 내부적으로 jQTouch 가 어떤 코드로 돌아가는지 (매우 궁금하지만) 당장 필요하지는 않다.
특히 jQTouch와 같은 원천기술을 몇 단계 랩핑한 라이브러리는 그 원리의 이해가 꼭 필요하지도 않다.
따지자면 브라우저, 자바스크립트, jQuery, jQTouch 로 이어진 원리와 그 사용법의 학습으로 이어질 수 있는데 jQTouch 를 이용하는 목적에 비해 너무 많은 노력을 할애해야 한다는 것이다. 

그리고 또, 흔히 비판받는 코딩 기법인 'Code and Fix' 형태의 학습방식도 취하고 있다
Code and Fix는 일단 코드부터 짜 보고 고친다는 뜻인데, 제대로 설계하지 않고 무작정 코드부터 짜고 적당히 버그를 고치면서 일하는 방식을 말한다. 대단히 비판받는 업무 방식으로 제대로된 설계와 잘 짜여진 코드의 중요성을 강조할 때 언급된다. 그러나 이 방식 역시 간단한 테스트나 프로토타입 수준의 학습에는 일면 효율적이기도 하다

뭐, 잡설이 길었지만 핵심은 한가지 이다
현재 개인적으로 빠르게 진행중인 jQTouch 학습은 다분히 하향식 그리고 Code and Fix 형태로 진행하고 있지만 주제와 학습 목적에 비추어 보면 나름 적절하다는 것이다
(물론 그 어떤 좋은 포장이라도, 개발이 매우 생소한 입문자라면 정도를 따르는 것이 좋다)

이제 주제로 들어가자. jQTouch 를 통한 페이지 전환이다
대부분 웹 개발자들은 '페이지 이동' 개념이 명확하다. A페이지 -> B페이지로의 이동은 링크로 통한다
웹의 하이퍼텍스트, 하이퍼링크 구조에 기반한 명백한 개념이지만 이 개념이 다른 환경에서는 걸림돌이 되기도 한다. 간혹 웹 개발자가 윈도우응용개발을 할 때 혼란을 느끼는 부분이기도 하다.

jQTouch는 다분히 웹앱에 초점이 맞춰진 개발 플랫폼이며 페이지라는 개념보다 뷰(View) 라는 개념이 더 어울린다. 즉 순수 웹 환경에서의 화면은 페이지인 경우가 많으며 화면의 전환은 곧 페이지의 이동을 의미하는 반면 웹앱에서의 화면은 뷰라 할 수 있으며 화면 전환은 뷰의 교체를 의미한다고 할 수 있다. 다시말해 뷰의 활성화(Show) 그리고 비활성화(Hide)의 개념이라 할 수 있겠다. 물론 jQTouch 에서도 링크를 통한 페이지 이동이 지원된다. 다만 기본적으로는 뷰의 전환이라는 개념이 사용된다.

내부 div 의 전환
jQTouch 가 지원하는 페이지 이동의 개념은 기본적으로 div 요소의 전환을 의미한다. 즉 다음과 같이 A라는 div 에서 B라는 div 로의 링크가 곧 화면의 전환이다. 이런 형태가 jQTouch 에서 매우 보편적인 화면 전환방법이다.
즉 jQTouch 기반 웹앱은 이런 형태의 화면 전환 처리를 권장한다.
<div id="A">
  <a href="#B">Div Switch</a> <!-- A 화면에서 B화면으로의 이동 -->
</div>
...
<div id="B"> ... </div>


외부 링크
내부 div 전환이외에도 일반적인 페이지 링크가 지원된다. 외부 링크를 사용할 땐 target 을 명시하여 이동대상을 지정할 수 있다. 다음 코드는 새창으로 새 페이지를 연다는 의미이다
<a href="SecondPage.html" target="_blank">Page Transfer(_blank)</a>

만일 새창을 열고 싶지 않다면 target="_webapp" 을 설정하면 된다. 또 다른 방법으로는 rel 속성을 지정할 수 있다. 다음코드와 같이 링크태그에 rel 속성을 지정하면 페이지 이동이 가능하다
<a href="SecondPage.html" rel="external">


Back 버턴
jQTouch 에서는 div 로 화면을 전환했을 때 '뒤로가기' 기능을 자동으로 지원한다. 다음과 같이 a 태그 class 속성에 "back" 을 지정하면 이동 전 div로 다시 돌아간다
<a class="back" href="#">Back</a>

이때 사용되는 이미지는 jQTouch 객체 생성때 지정한 다음의 이미지가 이용된다
preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                      ......................................
                    ]


마지막으로 여기서 설명한 내용을 포함하는 데모이다. 차례대로 첫페이지와 div 전환, 페이지 이동을 캡쳐한 것이다
 
 



<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>First Page</h1>
  </div>       
  <ul class="rounded">
    <li class="arrow"><a href="#secondDiv">Div Switch</a></li>
    <li class="forward"><a href="SecondPage.html" target="_blank">Page Transfer(target="_blank")</a></li>
    <li class="forward"><a href="SecondPage.html" target="_webapp">Page Transfer(target="_webapp")</a></li>
    <li class="forward"><a href="SecondPage.html" rel="external">Page Transfer(rel="external")</a></li>
  </ul>  
</div>  
<div id="secondDiv">
  <div class="toolbar">
    <h1>Second Page</h1>
    <a class="back" href="#">Back</a>
  </div>
  <ul class="rounded">
    <li class="arrow"><a href="#home">Back</a></li>
  </ul>  
</div>    
</body>
</html>

저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

[jQTouch] 페이지 전환 이벤트  (0) 2010.10.27
[jQTouch] 페이지 전환 효과 (에니메이션 효과)  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25
[jQTouch] jQTouch - 기본 환경 설정  (0) 2010.10.25
페이지 요소(Element) 탐색  (0) 2010.10.12

[jQTouch] 목록 스타일

Posted in 모바일/Javascript // Posted at 2010. 10. 25. 16:59
728x90

아이폰과 같은 스마트폰의 가장 기본적인 UI 구성은, 박스가 세로로 나열된 목록형태를 많이 띄고 있다
게임과 같은 엔터테인먼트 어플은 컨텐트의 특성상 독창적인 UI구성을 가지지만 설정화면과 같은 정적인 화면 구성은 대부분 아래와 같이 목록 형식으로 구성된다



따라서 목록형식은 가장 흔하게 사용되는 UI 구성이라 할 수 있으며 jQTouch 에서도 이를 지원하고 있다
기존 HTML 태그 중  '순서없는 목록'에 해당하는 ul 그리고 li 목록을 이용하여 아이폰 스타일의 UI를 손쉽게 구현할 수 있다. 

기본 목록
아무런 치장없이 ul 태그와 li 태그만 간단히 정의해도 jQTouch에 의해 자동으로 아이폰 스타일의 변환된다
다음의 코드를 생각해 보자. HTML 태그로 순서 없는 목록을 정의하는 것이다
<ul><li>AAA</li><li>BBB</li><li>CCC</li></ul> 

이 코드는 jQTouch 에 의해 아이폰 스타일로 자동 변환된다.
아래 화면은 일반 웹 화면과 jQTouch 결과 화면을 비교한 것이다
 


단지 목록만 정의했을 뿐인데, 이처럼 아이폰 스러운 화면을 만날 수 있다니, 매우 고마운 일이 아닐 수 없다


추가 목록
기본 목록을 그대로 사용해도 되지만 좀더 아이폰스럽고 미려한 UI를 위해 몇 가지 방법이 제공된다
jQTouch 에서는 ul 태그에 class 속성을 정의하도록 하여 목록의 스타일을 변화시키게 한다.
class 속성에 rounded, form , metal, individual, plastic, edgetoedge 등 5가지 서로 다른 스타일을 적용할 수 있다. 아래 화면은 'ul 의 class 속성'에 차례로 rounded, form, metal, individual 을 적용한 결과이다

rounded 는 둥근 모서리형태의 목록, form은 각지고 높이가 좀더 작은 목록, metal 은 메탈스러운 목록 마지막으로 individual 가로로 나열된 모습이다.
 
 
 


그리고 edgetoedge 각이 없는 딱딱한 사각형 모양의 스타일이며 하위 li 태그에 sep 속성을 부여해 다음과 같이 일종의 목록 그룹 효과를 줄 수 있다

  
목록 치장하기
목록의 전체 스타일이외에도 각각의 목록에 추가 스타일을 지정할 수 있다. 'li의 class 속성'으로 이를 지정할 수 있는데 아래 화면은 li의 class 속성에 arrow, forward를 각각 적용한 결과이다. 이 효과는 목록을 터치하면 추가 컨텐트가 존재함을 의미할 때 주로 사용된다


 그리고 li 태그 안에 small 태그의 의 class 속성에 counter 를 부여하면 목록에 숫자를 추가할 수 있다
또한 목록 링크 이후 정의된 텍스트는 아래와 같이 밑글자로 처리된다. 아래 화면을 참조하자



마지막으로 글에서 설명된 목록 스타일을 한 페이지에 모두 적용해 보자
아래 화면은 코드를 실행한 결과화면이며 화면 이후 전체 코드를 제시한다



<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>jQTouch List Demo</h1>
  </div>     
  <ul class="rounded">
    <li class="arrow"><a href="#">AAA</a><small class="counter">5</small></li>
    <li class="forward"><a href="#">BBB</a><em>bbb</em></li>  
  </ul> 
  <ul class="metal">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="arrow"><a href="#">BBB</a></li>  
  </ul> 
  <ul class="form">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="forward"><a href="#">BBB</a></li>
  </ul>
  <ul class="plastic">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="forward"><a href="#">BBB</a></li>
  </ul>
  <ul class="individual">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="forward"><a href="#">BBB</a></li>
  </ul> 
</div>
</body>
</html>

저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

[jQTouch] 페이지 전환 효과 (에니메이션 효과)  (0) 2010.10.26
[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] jQTouch - 기본 환경 설정  (0) 2010.10.25
페이지 요소(Element) 탐색  (0) 2010.10.12
자바스크립트 메뉴를 추가하며...  (2) 2010.10.07

[jQTouch] jQTouch - 기본 환경 설정

Posted in 모바일/Javascript // Posted at 2010. 10. 25. 15:04
728x90

일전에 jQTouch 를 간단히 언급했었다 => [JQTouch] 모바일 웹 UI 라이브러리

이번주에 jQTouch 를 조금 살펴 볼 예정인데, 그 첫글로 기본적인 사용 환경 설정을 다루고자 한다.
웹 개발 환경은 다른 응용개발 환경보다 훨씬 심플하다는 것이 매력적이다

다른 응용 환경 구성과 같은 구구절절한 개발툴과 Add-In 형태의 프로그램, 까탈스러운 구성파일의 설정 과정이 없어 쉽게 시작할 수 있고 개발모델 역시 심플하여 접근하기 매우 용이하다. 맘에 든다 ㅎㅎ

jQTouch 역시 심플한 웹 개발모델을 제시하며, 결국에는 자바스크립트, CSS, HTML 과 같은 기본적인 웹 개발 요소들이 사용될 뿐이다. 물론 jQTouch 라이브러리를 참조해야 하지만 이것 역시 자바스크립트의 범주이다

1. jQTouch 라이브러리 다운로드
흔히 jQTouch 를 플러그인이라 표현 하지만 라이브러리라 표현해도 무방할 것이다
가장 먼저 시작할 것은 이 라이브러리를 개발 PC에 다운로드 하는 것이다. 아래의 링크에서 최신버전의 jQTouch 라이브러리를 다운받는다. 현재시점(2010.10.25) 기준 1.0 beta 2 버전을 다운받는다
: http://www.jqtouch.com/

다운받은 파일의 구성은 jQTouch 라이브러리 파일, 테마 스타일 파일, 확장팩 파일, 데모파일 등이다
여기서 데모를 확인해 보면 참으로, 아이폰 앱 스타일에 적합하다는 것을 느낄 것이다


2. 테마 선택(적용)하기
jQTocuh 는 jQuery 기반의 UI 라이브러리이다. 따라서 스크립트파일과 더불어 스타일을 정의한 CSS파일도 포함되어 있다. 스타일은 총 두개로 나누어져 있는데 jQTouch 테마와 Apple 테마가 그것이다
jQTouch 고유 테마는 검정색 바탕에 회색톤과 하얀 글자가 특징이다. 반면 Apple 테마는 아이폰 UI와 유사하게 청색 계열의 느낌과 흰 바탕 그리고 검정색 글자로 구성된다. 아래 두 화면에서 그 차이를 느낄 수 있다



두 테마 중 하나를 선택할 수 있는데 다운로드 받은 파일 중 theme 폴더에 각각 다음처럼 정의되어 있다
Apple 테마    : themes > apple > theme.css
jQTouch 테마: themes >   jqt   > theme.css 

jQTouch 를 적용하는 우리의 웹 페이지에 (경로를 맞춰) 다음과 같이 스타일을 정의하면 된다

<style type="text/css" media="screen">@import "./theme.min.css";</style>

그리고 기본적인 jQTouch 스타일을 정의한 파일은 jQTouch 폴더에 있는 jqtouch.css 파일이다
이 파일 역시 웹 페이지에 스타일로 정의해 둔다


3. jQTouch 라이브러리 참조하기
일종의 핵심 엔진을 참조하는 것으로 jQTouch 스크립트 라이브러리에 대한 참조이다
jQTouch 폴더의 jqtouch.js 파일이 그것이다. 또한 jQTouch 가 jQuery 기반으로 작성되었기 때문에 jQuery 라이브러리의 참조도 필수이다. jQTouch 를 다운받은 폴더에는 친절하게도 jQuery 라이브러리가 포함되어 있다. 현재 jQTouch 버전은 jQuery 1.3.2 버전을 사용하고 있다. 아래와 같이 스크립트를 참조한다

<script src="./jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>


4. jQTouch 객체 생성으로 시작하기
각종 기본 설정을 정의하는 일종의 초기화 과정을 객체 생성 코드로 정의할 수 있다
이 초기화 객체에 사용되는 매개변수를 보면 jQTouch 가 하이브리드 형태의 웹앱에 초점이 맞춰진 라이브러리라는 것을 간접적으로 알 수 있다. 예를 들어, 아이폰 바로가기 아이콘이라던지 로딩 화면등 웹앱의 구성요소 정의가 그것이다. 

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
            './jqtImg/back_button.png',
            './jqtImg/back_button_clicked.png',
            './jqtImg/button_clicked.png',
            './jqtImg/grayButton.png',
            './jqtImg/whiteButton.png',
            './jqtImg/loading.gif'
            ]
    });       
</script>


5. 설정 끝, 지금부터는 div 엘리멘트와 id, class 속성들과의 잔치?이다
jQTouch 의 적용을 위한 기본 설정은 이것으로 끝이다. 이제부터는 Div 엘리멘트의 정의와 각종 HTML 요소 그리고 id, class 속성을 통한 형식 지정, 스타일 정의로 화면을 jQTouch 답게 구성할 수 있다. 지금부터가 jQTouch 라이브러리의 구체적 사용법을 알고 진행해야 하는 과정이다.

위 설정들을 포함한 가장 기본적인 jQTouch 기반 웹 페이지의 구성은 아래와 같다

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />

<style type="text/css" media="screen">@import "./jqtLib/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "./jqtLib/theme.min.css";</style>

<script src="./jqtLib/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtLib/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'red',
        preloadImages: [
            './jqtImg/back_button.png',
            './jqtImg/back_button_clicked.png',
            './jqtImgg/button_clicked.png',
            './jqtImg/grayButton.png',
            './jqtImg/whiteButton.png',
            './jqtImg/loading.gif'
            ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   First jQTouch Demo
  </div> 
  <div>
    Hello World!!!
  </div> 
</div>
</body>
</html>

실행 화면




참고> jQTouch 관련 파일 경로에 대하여..
일부 웹 개발자들은 jQTouch 를 자신의 웹 프로젝트에 적용하고자 할 때 디렉터리와 파일 경로를 자신의 입맛대로 구성하고 싶어한다. 나 역시 마찬가지로...

그러나 jQTouch 는 테마를 정의한 스타일시트 파일에 이미지 경로가 포함되어 있어 주의를 요한다
ex) background: url(img/toolbar.png) #000000 repeat-x;
위 코드는 theme.css 파일에 정의된 이미지 경로를 보여준다. 하위 img 폴더를 기준으로 하고 있다

이 코드는 기본적으로 다운로드 한 jQTouch의 경로로써, 만일 개발자에 의해 이 경로가 해석되지 않는다면 의도하지 않는 결과를 보여줄 수 있다.  따라서 자신만의 경로를 정의할 때 이 부분을 감안해야 할 것이다. 제일 편한 것은 처음 다운로드 받은 jQTouch 의 폴더,파일 구조를 그대로 사용하는 것이다


저작자표시 비영리 변경금지

'모바일 > Javascript' 카테고리의 다른 글

[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25
페이지 요소(Element) 탐색  (0) 2010.10.12
자바스크립트 메뉴를 추가하며...  (2) 2010.10.07
JSON (JavaScript Object Notation)  (0) 2010.10.06

[JQTouch] 모바일 웹 UI 라이브러리

Posted in 모바일/Javascript // Posted at 2010. 8. 4. 14:58
728x90
스마트폰의 모바일 웹을 위한 UI 단 라이브러리이다
JQuery 의 UI 라이브러리에 해당하며 JQuery 플러그인이라고 한다

http://www.jqtouch.com/
현재 1.0 베타 2 버전이 배포되고 있다

사파리와 같은 웹킷(WebKit) 기반의 브라우저에서 UI 개발을 마치 전용 앱(App)의 느낌과 사용성으로
제작할 수 있는 라이브러리이다

http://www.jqtouch.com/preview/demos/main/ 에서 몇 가지 데모를 확인할 수 있다

아래 그림은 http://www.testiphone.com/ 에서 아이폰 에뮬레이터로 실행해 본 모습니다

데스크탑 웹과는 그 표현면에서 많은 차이가 있으며,
모바일 기기에 적합한 레이아웃과 느낌 등 사용성을 최적화 할 수 있다는 장점이 있다



'모바일 > Javascript' 카테고리의 다른 글

Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사  (0) 2010.09.06
[JQuery] JQuery 사용 환경 설정  (0) 2010.08.04
아놔.. JQTouch, iUI 도 있구먼..  (0) 2010.07.13
[Book] JQuery 책 구매  (0) 2010.07.12
다음(Daum), Sparrow framework  (0) 2010.07.08

티스토리툴바