[jQuery]검색결과, 13건
- 자주 쓰는 jQuery 기능 - 이벤트 편 2011.08.04
- 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 2011.08.03 (2)
- [jQTouch] Demos 훓어보기 2010.10.28
- [jQTouch] Extensions (확장기능) 2010.10.28
- [jQTouch] GET, POST 전송 2010.10.27
- [jQTouch] 페이지 전환 이벤트 2010.10.27
- [jQTouch] 페이지 전환 효과 (에니메이션 효과) 2010.10.26
- [jQTouch] 페이지 전환 2010.10.26
- [jQTouch] 목록 스타일 2010.10.25 (1)
- [jQTouch] jQTouch - 기본 환경 설정 2010.10.25
다른 프로그래밍 언어와 마찬가지로 스크립트 환경에서도 이벤트 처리가 많은 부분을 차지하게 된다.
기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자.
기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.
.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다
다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.
bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 '기본 이벤트 처리'는 이것의 단축 표현이다.
.bind('이벤트명', 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.
이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다
여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.
이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)
이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.
여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.
이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.
만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.
live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다
.live('이벤트명', 이벤트처리기 함수)
아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 '아이템추가' 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)
이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.
live()로 등록한 이벤트는 die() 함수로 제거할 수 있다
delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.
.delegate('선택자', '이벤트명', 이벤트처리기 함수)
delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.
참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/
http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2
기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자.
기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.
.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다
다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.
$(function(){
$('div').click(function(event){
alert(event.target.innerText);
});
$('div').hover(function(event){
alert(event.type);
});
});
$('div').click(function(event){
alert(event.target.innerText);
});
$('div').hover(function(event){
alert(event.type);
});
});
bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 '기본 이벤트 처리'는 이것의 단축 표현이다.
.bind('이벤트명', 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.
이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다
$(function(){
$('div').bind('click' ,function(event){
alert(event.target.innerText);
});
});
$('div').bind('click' ,function(event){
alert(event.target.innerText);
});
});
여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.
$(function(){
$('div').bind('click mouseenter' ,function(event){
alert(event.type);
});
});
$('div').bind('click mouseenter' ,function(event){
alert(event.type);
});
});
이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)
$(function(){
$('div').bind(
{
click: function(evnet){ alert(event.type); }
},
{
mouseenter: function(evnet){ alert(event.type); }
}
});
});
$('div').bind(
{
click: function(evnet){ alert(event.type); }
},
{
mouseenter: function(evnet){ alert(event.type); }
}
});
});
이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.
$(function(){
$('div').bind('click', {key1:'value1', key2:'value2'} ,function(event){
alert(event.data.key1 + '/' + event.data.key2);
});
});
$('div').bind('click', {key1:'value1', key2:'value2'} ,function(event){
alert(event.data.key1 + '/' + event.data.key2);
});
});
여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.
$(function(){
$('div').bind('click' ,function(event, data1, data2){
alert(data1 + '/' + data2);
});
//이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
$('div').trigger('click',['value1','value2']);
});
$('div').bind('click' ,function(event, data1, data2){
alert(data1 + '/' + data2);
});
//이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
$('div').trigger('click',['value1','value2']);
});
이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.
$('div').unbind();
만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.
$('div').unbind('click');
live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다
.live('이벤트명', 이벤트처리기 함수)
아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 '아이템추가' 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)
이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.
- Html
<ul id="list">
<li>Item1</li>
<li>Item2</li>
</ul>
<button id="btnAdd">아이템추가</button>
- Script
//모든 <li> element에 click 이벤트 등록
$(function(){
$('li').live('click' ,function(event){
alert(event.target.innerText);
});
//'아이템추가'버튼에 클릭 이벤트 등록
$('#btnAdd').bind('click' ,function(event){
$('#list').append('<li>new Item</li>');
});
});
<ul id="list">
<li>Item1</li>
<li>Item2</li>
</ul>
<button id="btnAdd">아이템추가</button>
- Script
//모든 <li> element에 click 이벤트 등록
$(function(){
$('li').live('click' ,function(event){
alert(event.target.innerText);
});
//'아이템추가'버튼에 클릭 이벤트 등록
$('#btnAdd').bind('click' ,function(event){
$('#list').append('<li>new Item</li>');
});
});
live()로 등록한 이벤트는 die() 함수로 제거할 수 있다
$('li').die();
delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.
.delegate('선택자', '이벤트명', 이벤트처리기 함수)
$(function(){
$('ul').delegate('li','click' ,function(event){
alert(event.target.innerText);
});
$('ul').delegate('li','click' ,function(event){
alert(event.target.innerText);
});
delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.
$('ul').undelegate('li');
참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/
http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2
'모바일 > Javascript' 카테고리의 다른 글
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
|---|---|
| 평점에서 별표 마킹 (0) | 2012.11.16 |
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
0 Comments
증말이지... 나이가 들수록 점점 기억력이 감소하고 디지털 기기의 발전은 이를 더 부추긴다.
너무 많은 라이브러리와 프레임워크의 등장으로 함수 하나하나도 쉬이 기억나지 않음이야...
동일한 기능의 함수명과 사용법도 각 프로그래밍 언어별로 조금씩 달라 기억 창고에 두고 바로 사용할 수 없는 지경이다. 그래서 정리한다. jQuery의 자주 쓰는 기능편!!!
이것은 노하우보다는 노웨어(Know Where)를 위한 글이라 할 수 있다.
기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.
$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택
순서 기반 셀렉터
기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.
$('선택자:even')
선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.
$('선택자:odd')
선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.
$('선택자:eq(인덱스)')
선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.
$('선택자:first') , $('선택자:last')
선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다
$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')
선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다
관계 기반 셀렉터
부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.
$('선택자').children() : 선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.
$('선택자').parent() : 선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.
$('선택자').next() , $('선택자').nextAll()
선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.
$('선택자').prev() , $('선택자').prevAll()
선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.
이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다
조건 기반 셀렉터
특정 내용이 포함된 element, 특정 규칙에 맞는 element 즉 조건에 의해 선택하는 방법을 안내한다. 따지고 보면 모든 셀렉터가 조건 기반 셀렉터이다. 다만 단락 구분과 실제 규칙을 명시하는 범주를 여기서 다룬다.
$('선택자').filter('조건선택자')
앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.
$('선택자').find('조건선택자')
앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.
filter() vs find()
여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.
filter() : 현재 선택된 집합을 대상으로 검색함
find() : 현재 선택된 집합의 자식 요소를 대상으로 검색함
filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.
두 경우 모두 처음에는 모든 <div>를 선택하고, 이후 filter와 find를 같은 조건(class 명이 'tempClass' 인 것)으로 검색한다. 결과는 다음과 같다.
- filter()로 검색한 결과: 첫 번째와 세 번째 <div> 요소 반환
- find()로 검색한 결과: 두 번째 요소의 자식 요소인 <span> 요소 반환
이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!
$('선택자:contains("searchText")')
앞의 '선택자'에 의해 선택된 element(s)의 콘텐트에서 "searchText"가 포함된 element만을 다시 선택한다.
다음 코드는 모든 <div>요소의 내용에서 'mkex'가 포함된 요소만을 선택하는 코드이다. 참고로 contains로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자
$('선택자:not(조건선택자)')
앞의 '선택자'에서 선택된 모든 elements에서 '조건선택자'에 해당하는 요소를 제거한다.
참고로 not 조건에 셀렉터를 중첩해서 사용 가능하다. 다음과 같이...
$('div:not(.divClass , #divID)');
위 코드는 모든 <div> 요소에서 class로 'divClass'가 지정되거나 id로 'divID'로 지정된 요소를 제거한다.
즉 조건식을 or 조합으로 만들 수 있다.
선택자 중첩
지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다.
기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.
$('선택자 선택자 선택자 ...')
총 3개의 선택자를 지정한다. 셀렉터를 중첩해도 동일한 효과를 줄 수 있지만 여기서는 선택자를 중첩 지정하여 탐색의 깊이를 점점 좁혀가고 있다.
예를 하나 보자. 다음 코드는 ID가 'divID'인 요소 안에 있는 <span> 내의 모든 <a> 요소를 반환하는 코드다.
지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.
jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.
너무 많은 라이브러리와 프레임워크의 등장으로 함수 하나하나도 쉬이 기억나지 않음이야...
동일한 기능의 함수명과 사용법도 각 프로그래밍 언어별로 조금씩 달라 기억 창고에 두고 바로 사용할 수 없는 지경이다. 그래서 정리한다. jQuery의 자주 쓰는 기능편!!!
이것은 노하우보다는 노웨어(Know Where)를 위한 글이라 할 수 있다.
기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.
$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택
- HTML
<p>Paragraph Element</p>
<div id="divID">Division Element</div>
<div class="className">Division Element</div>
- Script
$(function(){
var element = $('p'); alert(element.html());
element = $('#divID'); alert(element.html());
element = $('.className'); alert(element.html());
});
<p>Paragraph Element</p>
<div id="divID">Division Element</div>
<div class="className">Division Element</div>
- Script
$(function(){
var element = $('p'); alert(element.html());
element = $('#divID'); alert(element.html());
element = $('.className'); alert(element.html());
});
순서 기반 셀렉터
기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.
$('선택자:even')
선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.
$('선택자:odd')
선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.
$('선택자:eq(인덱스)')
선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.
$('선택자:first') , $('선택자:last')
선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다
$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')
선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다
- HTML
<p>Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p>Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p:odd');
elements.each(function(){ alert($(this).html())});
elements = $('p:even');
elements.each(function(){ alert($(this).html())});
elements = $('p:eq(3)'); alert(elements.html())
elements = $('p:first'); alert(elements.html());
elements = $('p:last'); alert(elements.html());
elements = $('p:gt(1)');
elements.each(function(){ alert($(this).html())});
elements = $('p:lt(2)');
elements.each(function(){ alert($(this).html())});
});
<p>Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p>Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p:odd');
elements.each(function(){ alert($(this).html())});
elements = $('p:even');
elements.each(function(){ alert($(this).html())});
elements = $('p:eq(3)'); alert(elements.html())
elements = $('p:first'); alert(elements.html());
elements = $('p:last'); alert(elements.html());
elements = $('p:gt(1)');
elements.each(function(){ alert($(this).html())});
elements = $('p:lt(2)');
elements.each(function(){ alert($(this).html())});
});
관계 기반 셀렉터
부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.
$('선택자').children() : 선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.
$('선택자').parent() : 선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.
$('선택자').next() , $('선택자').nextAll()
선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.
$('선택자').prev() , $('선택자').prevAll()
선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.
이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다
- HTML
<div id="root">
<p>Paragraph Element</p>
<div id="1deptCh">Division Element <div id="2deptCh">Sub Division Element</div></div>
</div>
- Script
$(function(){
var elements = $('#root').children();
elements.each(function(){ alert($(this).html())});
elements = $('#2deptCh').parent();
alert(elements.html());
});
<div id="root">
<p>Paragraph Element</p>
<div id="1deptCh">Division Element <div id="2deptCh">Sub Division Element</div></div>
</div>
- Script
$(function(){
var elements = $('#root').children();
elements.each(function(){ alert($(this).html())});
elements = $('#2deptCh').parent();
alert(elements.html());
});
조건 기반 셀렉터
특정 내용이 포함된 element, 특정 규칙에 맞는 element 즉 조건에 의해 선택하는 방법을 안내한다. 따지고 보면 모든 셀렉터가 조건 기반 셀렉터이다. 다만 단락 구분과 실제 규칙을 명시하는 범주를 여기서 다룬다.
$('선택자').filter('조건선택자')
앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.
- HTML
<p class="filterName">Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p class="filterName">Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p').filter('.filterName');
elements.each(function(){ alert($(this).html())});
})
<p class="filterName">Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p class="filterName">Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p').filter('.filterName');
elements.each(function(){ alert($(this).html())});
})
$('선택자').find('조건선택자')
앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.
- HTML
<div>Division Element 0</div>
<div>Division Element 1<span> Span Element 1</span></div>
<div>Division Element 2<span> Span Element 2</span></div>
- Script
$(function(){
var elements = $('div').find('span');
elements.each(function(){ alert($(this).html())});
});
<div>Division Element 0</div>
<div>Division Element 1<span> Span Element 1</span></div>
<div>Division Element 2<span> Span Element 2</span></div>
- Script
$(function(){
var elements = $('div').find('span');
elements.each(function(){ alert($(this).html())});
});
filter() vs find()
여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.
filter() : 현재 선택된 집합을 대상으로 검색함
find() : 현재 선택된 집합의 자식 요소를 대상으로 검색함
filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.
- HTML
<div class="tempClass">Division Element 0</div>
<div>Division Element 1<span class="tempClass"> Span Element 1-1</span></div>
<div class="tempClass">Division Element 2<span> Span Element 2-1</span></div>
- Script
$(function(){
elements = $('div').filter('.tempClass');
elements.each(function(){ alert('filter() :' + $(this).html())});
var elements = $('div').find('.tempClass');
elements.each(function(){ alert('find() :' + $(this).html())});
});
<div class="tempClass">Division Element 0</div>
<div>Division Element 1<span class="tempClass"> Span Element 1-1</span></div>
<div class="tempClass">Division Element 2<span> Span Element 2-1</span></div>
- Script
$(function(){
elements = $('div').filter('.tempClass');
elements.each(function(){ alert('filter() :' + $(this).html())});
var elements = $('div').find('.tempClass');
elements.each(function(){ alert('find() :' + $(this).html())});
});
두 경우 모두 처음에는 모든 <div>를 선택하고, 이후 filter와 find를 같은 조건(class 명이 'tempClass' 인 것)으로 검색한다. 결과는 다음과 같다.
- filter()로 검색한 결과: 첫 번째와 세 번째 <div> 요소 반환
- find()로 검색한 결과: 두 번째 요소의 자식 요소인 <span> 요소 반환
이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!
$('선택자:contains("searchText")')
앞의 '선택자'에 의해 선택된 element(s)의 콘텐트에서 "searchText"가 포함된 element만을 다시 선택한다.
다음 코드는 모든 <div>요소의 내용에서 'mkex'가 포함된 요소만을 선택하는 코드이다. 참고로 contains로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자
- HTML
<div>Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div>Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:contains("mkex")');
elements.each(function(){ alert($(this).text())});
});
<div>Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div>Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:contains("mkex")');
elements.each(function(){ alert($(this).text())});
});
$('선택자:not(조건선택자)')
앞의 '선택자'에서 선택된 모든 elements에서 '조건선택자'에 해당하는 요소를 제거한다.
- HTML
<div class="divClass">Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div class="divClass">Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:not(.divClass)');
elements.each(function(){ alert($(this).text())});
});
<div class="divClass">Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div class="divClass">Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:not(.divClass)');
elements.each(function(){ alert($(this).text())});
});
참고로 not 조건에 셀렉터를 중첩해서 사용 가능하다. 다음과 같이...
$('div:not(.divClass , #divID)');
위 코드는 모든 <div> 요소에서 class로 'divClass'가 지정되거나 id로 'divID'로 지정된 요소를 제거한다.
즉 조건식을 or 조합으로 만들 수 있다.
선택자 중첩
지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다.
기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.
$('선택자 선택자 선택자 ...')
총 3개의 선택자를 지정한다. 셀렉터를 중첩해도 동일한 효과를 줄 수 있지만 여기서는 선택자를 중첩 지정하여 탐색의 깊이를 점점 좁혀가고 있다.
예를 하나 보자. 다음 코드는 ID가 'divID'인 요소 안에 있는 <span> 내의 모든 <a> 요소를 반환하는 코드다.
- HTML
<div id="divID"><span><a href="#">Go!!</a></span></div>
- Script
$(function(){
var element = $('#divID span a');
alert(element.text());
});
<div id="divID"><span><a href="#">Go!!</a></span></div>
- Script
$(function(){
var element = $('#divID span a');
alert(element.text());
});
지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.
jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.
'모바일 > Javascript' 카테고리의 다른 글
| 평점에서 별표 마킹 (0) | 2012.11.16 |
|---|---|
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
이전 글([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 기능으로 정의하였다
앱이 처음 실행될 때 기본값으로 두 개의(필라델피아,로스앤젤레스) 시계가 표시되며 setInterval() 을 통해 매 1초마다 시계를 갱신시킨다
그리고 시계를 추가하기 위해 폼(form)을 이용하는데, 이전 글([jQTouch] GET, POST 전송) 의 POST로 submit 하는것이 아니라 자체 스크립트 호출로 처리하고 있다
아래 화면은 데모를 실행한 화면이며 각각 처음화면, 시계추가, 추가된 화면이다
소스가 비교적 어렵지 않으니 직접 살펴보고 음미(?)해 보기 바란다
To-Do app
두번째 데모는 '할일 목록'을 관리하는 앱이다.
우선 데모 실행화면부터 보자.아래 실행화면을 보면 지금까지 스타일로 사뭇 달라 보인다.
이 데모에서는 기본 jQTouch 화면과 다른 스타일을 위해 css에 많은 할애을 하고 있는 것이 특징이다.
특히 타이틀바와 중간영역에 있는 짙은 밤색 처리는 백그라운드 이미지로 처리하였는데 이미지파일이 아닌 이미지 데이터 문자열로 처리하고 있다.
나머지는 일반적인 CSS 스타일 지정이며, 이와 같이 얼마든지 앱스타일을 변경할 수 있다는 것을 느끼면 되겠다
할일 목록을 추가하는 것은 submitForm 함수에서 처리하는데, incomplete 라는 ul 요소에 li를 새로 추가하는 로직이다. 앞의 체크박스도 같이!
할일 앞의 체크박스를 클릭하면 to do 와 completed 사이를 오가는데 다음과 같은 코드로 처리한다
참고로 Completed 하위 목록은 가운데 줄이 그어져 있는데 다음의 css로 처리된 것이다
다음은 할일 추가와 일부 제거한 모습이다.
마치며...
데모를 살펴 보면서 느낄 수 있겠지만, jQTouch를 이용한 웹앱 역시 자바스크립트, jQuery 와 같은 기본적인 웹 클라이언트 기술에 능숙한 것을 요구한다. jQTouch 가 아이폰 앱에 걸맞는 UI 구성은 도와주지만 앱의 로직 부분까지 담당하지는 않기 때문이다.
역시 데모를 따라 제작하기 보다는 데모에서 사용된 코드와 흐름을 간략히 분석하는 것으로 훓어보자.
총 두개의 데모가 제공되는데, 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)');
$('.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초마다 갱신
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;
});
$('#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;
}
$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');
}
});
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] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
지금까지 총 여섯번에 걸쳐 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 에 대한 지식) 개발자 개개인이 참신한 확장기능을 구현하여 널리 사용자를 이롭게(?) 할 수 있을 것이다
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] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
jQTouch 의 GET, POST 전송을 대략 살펴 보니 참.. 재미있는 구조다!
POST 전송부터 살펴보자.
POST 전송은 웹 페이지의 폼(form) 양식을 서버로 전송하는 규칙인데, jQTouch 에서는 POST전송을 내부적으로 Ajax 호출로 처리한다. 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성, id를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다. 이 결과 처리 부분이 참으로 독특하다
우선 데모를 보자. 아래는 POST 전송을 위한 클라이언트 측 코드이며 폼양식이 정의되어 있다
코드에서는 전형적인 웹 페이지의 폼 요소 정의를 볼 수 있으며 일부 jQTouch용 class 속성이 이용되었다
폼을 전송할 대상은 server.asp 이다.
server.asp 는 폼 데이터를 전송받아 처리하는 서버측 파일로 php, jsp, asp, aspx 등 어떤 것을 사용해도 무방하다. 여기서는 폼 데이터를 전달받아서 출력하는 매우 단순한 코드를 정의하였다
다음은 데모를 실행한 화면이다. 텍스트상자에 글을 입력하고 전송하면 결과를 출력한다
신기한것은 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 속성이 없다는 것을 확인하자
서버측 코드는 GET 요청이므로, requery.form 대신 request.querystring로 전달받는다.
실행화면은 다음과 같다
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>
<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>
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 를 이용하였다
이 코드 역시 매우 단순한 형태로 전달받은 데이터를 출력하고 일부 목록을 생성하여 출력하는 형태이다
서버측코드를 해석하기 위한 웹서버가 존재해야 하며 필자의 경우 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>
<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] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
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 문법이 사용 되었음을 알 수 있다
: [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 + '… ');
}).
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>
<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 + '… ');
}).
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.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
jQTouch 에서는 페이지를 전환시킬 때 다양한 시각적 효과를 지원한다. 그것도 매우 간단히!
링크 태그인 a 태그에 class 속성의 설정으로 뷰 전환 효과를 지정할 수 있는데 슬라이드 효과에서 부터 페이드효과 그리고 큐브 형태의 에니메이션 효과까지 다양하게 지원된다
마치 파워포인트의 각 슬라이드가 넘어갈 때 줄 수 있는 효과와 유사하다
매우 간단한 사용법이라 블로깅 하기가 민망한 수준이다. 단지 class 속성 정의 뿐이니...
뷰 전환의 기본값은 'slide' 이다.
slide는 왼쪽으로 미끄러지듯 페이지가 전환되는 효과이다.
그리고 누구나 흥미를 가질만한 효과는 flip, swap, cube 정도라 생각된다
이 세 효과는 시각적으로 매우 동적인 전환 효과를 보여준다
아래 화면은 차례대로 flip, swap, cube 효과로 뷰를 전환시키는 모습이다
flip 는 화면을 뒤집는듯한 효과, swap 은 두 화면이 시각적으로 교체되는 효과, cube는 입방체모양희 전환효과를 보여주고 있다. 이런 화려한 효과가 단지 몇자만으로 가능하다니, 다시한번 jQTouch에게 고마울 따름이다
기타 다른 전환 효과도 앞선 예 보다는 정적이지만 보편적인 전환 효과로써 가치가 있을 것이다
slide : 기본값. 오른쪽에서 왼쪽으로 미끄러지 듯 전환
slideup: slide와 유사. 단 방향은 아래에서 윗쪽으로 미끄러지 듯 전환
dissolve: 점차 밝아지는 효과
fade: 점차 뚜렷해지는 효과. dissolve와 시각적으로 유사
pop: 팝업처럼 쏟아 오르는 효과
간단하기 때문에 일부 코드 조각만 제시한다
링크 태그인 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>
<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] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
프로그래밍 학습 방식은 상향식과 하향식이 있다
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다
이를테면 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 전환이외에도 일반적인 페이지 링크가 지원된다. 외부 링크를 사용할 땐 target 을 명시하여 이동대상을 지정할 수 있다. 다음 코드는 새창으로 새 페이지를 연다는 의미이다
만일 새창을 열고 싶지 않다면 target="_webapp" 을 설정하면 된다. 또 다른 방법으로는 rel 속성을 지정할 수 있다. 다음코드와 같이 링크태그에 rel 속성을 지정하면 페이지 이동이 가능하다
Back 버턴
jQTouch 에서는 div 로 화면을 전환했을 때 '뒤로가기' 기능을 자동으로 지원한다. 다음과 같이 a 태그 class 속성에 "back" 을 지정하면 이동 전 div로 다시 돌아간다
이때 사용되는 이미지는 jQTouch 객체 생성때 지정한 다음의 이미지가 이용된다
마지막으로 여기서 설명한 내용을 포함하는 데모이다. 차례대로 첫페이지와 div 전환, 페이지 이동을 캡쳐한 것이다
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다
이를테면 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>
<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',
......................................
]
'../../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>
<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] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
아이폰과 같은 스마트폰의 가장 기본적인 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] 목록 스타일 (1) | 2010.10.25 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
| 자바스크립트 메뉴를 추가하며... (2) | 2010.10.07 |
-
yanyan
글 잘 보고 있습니다.
근데요 님께서 올린것과 제가 하는것이 일치하지 않아서요.
위 코드에서 다음 부부인데요..
<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>
...
<li>부분에 <a href="#">BBB</a>만 들어가면 원안의 arrow표시가 제대로 되는데 여기에 <em>bbb</em> 코드까지 들어가면 원과 arrow가 위아래로 분리되네요.
원인을 몰라 고심하고 있습니다.
좀 가르쳐 주세요.
일전에 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>
<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>
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>
<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 의 폴더,파일 구조를 그대로 사용하는 것이다
일부 웹 개발자들은 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 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
| 자바스크립트 메뉴를 추가하며... (2) | 2010.10.07 |
| JSON (JavaScript Object Notation) (0) | 2010.10.06 |
