'jQuery' 태그의 글 목록

jQuery Mobile의 Auto-Initialization

정보기술(IT) 2013. 6. 21. 16:21

jQuery 의 Style 이나 javascript 가 해당 페이지의 DOM 요소를 로드하기 전에 수행되어 지는 이벤트가 있습니다.

즉 $(document).ready() 이벤트가 수행되기전에 자동적으로 적용됩니다.

만약에 초기구성을 바꿀필요가 있을때 해당이벤트에서 오버라이딩을 수행하면됩니다.

$(document).on("mobileinit", function() {

//apply override here

//기본적인 설정을 오버라이딩함

$.extend( $.mobile, {foo:bar} );

});

자바스크립트의 위치도 중요합니다.

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

바꿀수 있는 구성옵션

activeBtnClass string, default: "ui-btn-active"

activePageClass string, default: "ui-page-active"

ajaxEnabled boolean, default: true

allowCrossDomainPages boolean, default: false

autoInitializePage boolean, default: true

buttonMarkup.hoverDelay integer, default: 200

defaultDialogTransition string, default: 'pop'

defaultPageTransition string, default: 'fade'

getMaxScrollForTransition integer, default: 3

hashListeningEnabled boolean, default: true

ignoreContentEnabled boolean, default: false

linkBindingEnabled boolean, default: true

pageLoadErrorMessage string, default: "Error Loading Page"

pageLoadErrorMessageTheme string, default: "e"

phonegapNavigationEnabled boolean, default: false

희망잡이

,

Theme in jQuery Mobile

정보기술(IT) 2013. 6. 21. 14:28

Introducing jQuery Mobile ? Tool for HTML5 Mobile Platforms Development (One)

http://www.flash-to-html5.net/blog/introducing-jquery-mobile-tool-for-html5-mobile-platforms-development-one

jQuery Mobile 에서 스크립트 코드 해석이 안되어서 찾아 보았습니다.

기본적으로 제시되고 있는 테마가 a, b, c, d, e 다섯가지 입니다. 그리고 f 부터는 사용자가 커스터마이징해서 사용할수 있다고 하네요.

Theme Classes

jQuery mobile 에서 테마를 적용하기위한 방법에는 두가지가 있습니다.

data-theme= "a" 와 같이 속성을 사용하여 테마를 적용하는 방법

class 속성에 개별적으로 테마를 적용하는 방법

ui-bar-(a-z)

ui-body-(a-z)

ui-btn-up-(a-z)

Commonly used with the ui-btn-hover-(a-z) and ui-btn-down-(a-z), ui-btn-active

ui-corner-all

ui-corner-tl (top left only), -top (both top corners), -left (both left corners, .ui-btn-corner-all.

ui-shadow

ui-disabledui-bar-(a-z)

ui-body-(a-z)

ui-btn-up-(a-z)

Commonly used with the ui-btn-hover-(a-z) and ui-btn-down-(a-z), ui-btn-active

ui-corner-all

ui-corner-tl (top left only), -top (both top corners), -left (both left corners, .ui-btn-corner-all.

ui-shadow

ui-disabled

희망잡이

,

jQuery에서 DOM Element 추가하기

정보기술(IT) 2013. 6. 13. 17:00

jQuery에서 DOM Element를 추가할수 있도록 메소드를 지원하고 있습니다.

.append, .appendTo, .insertAfter, .after, insertBefore, .before, .prepend, .prependTo

이 메소드를 사용해서 엘리먼트를 DOM에 추가할때 잊기 쉬운 성능상의 주의점이 있습니다.

DOM 에 반복적으로 ELEMENT를 추가해야 하는 경우에 매번 메소드를 호출하면 엄청한 성능상의 댓가를 지불해야 합니다.

그래서 같은 컨테이너에 추가해 할 경우에는 한 문장으로 만들어서 한번만 메소드를 호출하도록 알고리즘을 만들 필요가 있습니다.

아래는 배열을 사용하여 한 문장으로 만들어서 호출하는 예제입니다.

The syntax for adding new elements to the page is easy, so it's tempting to forget that there's a huge performance cost for adding to the DOM repeatedly. If you're adding many elements to the same container, you'll want to concatenate all the HTML into a single string, and then append that string to the container instead of appending the elements one at a time. Use an array to gather all the pieces together, then join them into a single string for appending:

var myItems = [];

var $myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {

myItems.push( "<li>item " + i + "</li>" );

}

$myList.append( myItems.join( "" ) );

희망잡이

,

How jQuery Works

정보기술(IT) 2013. 6. 5. 14:29

참고사이트 : http://learn.jquery.com/about-jquery/how-jquery-works/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DHow_jQuery_Works%26redirect%3Dno

웹브라우저가 웹페이지( Document )를 다운로드해서 화면에 보여주는 과정이 있습니다.

onload 이벤트가 되었을때 사용자가 다음 작업을 진행할겁니다.

여기서 이 이벤트의 문제점은 모든 그림파일( 광고그림 포함 ) 을 모두 다운로드해서 발생된다는 문제가 있습니다.

jQuery 는 ready 이벤트를 사용해서 작동이 가능한 상태 - DOM이 완전히 올라온 상태 - 가 되었다는 이벤트를 보내줍니다.

$( Document ).ready ( function() {

$("a").click( function() {

alert("welcome");

});

Callbacks and Functions

많은 프로그램 언어들과 달리 자바스크립트는 나중에 실행될수 있도록 함수를 자유롭게 전달할수 있습니다.

콜백(Callback)은 다른함수의 인자로서 전달되어져서 자신의 부모함수가 완전히 수행된 후에 실행되어지는 함수를 말합니다.

콜백은 자신의 부모함수가 끝날때 까지 인내심을 가지고 실행되기를 기다리기 때문에 특별합니다. 반면에 웹브라우저는 다른 함수나 다른 작업을 수행합니다.

콜백을 사용하기 위해서는 자신을 부모함수에게 인자로서 전달하는 방법을 아는 것이 중요합니다.

인자가 없는 콜백함수

$.get("myhtmlpage.html", mycallback);

$.get 이 myhtmlpage.html 페이지를 가져오는것은 끝낸후에 mycallback 함수를 실행합니다.

인자가 있는 콜백함수

인자를 가지고 있는 콜백함수를 실행하는 것은 까다롭습니다.

잘못된 표현

$.get( "myhtmlpage.html", mycallback( param1, param2 ) );

이게 실패하는 이유는 이 코드는 mycallback( param1, param2 ) 함수를 즉시 실행한 후에 mycallback 함수의 반환값을 $.get 함수의 인자로 넘겨주기 때문입니다.

그러면 어떻게 mycallback 함수를 인자로 넘겨줄수 있을까요?

올바른 표현

$.get( "myhtmlpage.html", function() {

mycallback(param1, param2);

});

$.get 함수가 myhtmlpage.html 페이지를 가져오는 것을 완료한 다음에 Anonymous function 을 실행합니다. 이 Anonymous function 은 mycallback 함수를 실행합니다.

희망잡이

,

jQuery Mobile 개발을 위한 기본 사항

정보기술(IT) 2013. 6. 4. 18:58

출처 : http://mylko72.maru.net/jquerylab/mobile/jquery.mobile.1.1.html?hn=6&sn=1

jQuery Mobile 개발을 위한 기본 사항

jQuery Mobile 라이브러리 참조

모든 jQuery Mobile 애플리케이션은 두개의 핵심 라이브러리와 jQuery 라이브러리를 참조해야 한다. 아래는 CDN 서비스를 이용해 자바스크립트 파일과 CSS 파일, jQuery 라이브러리를 참조하고 있다.

HTML5의 data-* 속성

jQuery Mobile은 페이지의 각 요소가 어떤 역할을 하게 될지 결정하기 위해 data-* 속성을 활용한다. data-* 속성은 HTML5에 새로 추가된 것으로 로컬에 임의의 사용자정의 데이터를 저장하기 위한 표준 스펙이며 HTML 요소에 직접 데이터를 정의할 수 있어 태그와 데이터의 연관성을 주기 편리하다. 키/값 형태로 데이터를 정의할 수 있으며 다음과 같이 'data-' 접두어로 시작해서 키와 값을 이어서 지정한다.

data-keyname="value"

예를 들어 다음과 같이 사용자정의 데이터를 정의하고,

<li data-version="alpha3" data-url="http://jquerymobile.com">jQuery Mobile</li>

스크립트 영역에서 dataset 속성을 이용해 데이터에 접근할 수 있다.

var framework = document.getElementsByTagName('li')[0];

framework.dataset["version"] //alpha3

framework.dataset["url"] //jquerymobile.com

</script>

jQuery Mobile은 UI의 영역과 역할을 data-role 속성으로 정의한다.

jQuery Mobile 페이지의 기본 레이아웃

page

모바일 브라우저에 표시되는 하나의 페이지(page)를 정의한다. jQuery Mobile 에서는 data-role="page"가 지정된 영역을 하나의 페이지로 간주한다. 즉, 이 page 영역 단위로 모바일 브라우저에 표시된다.

header

페이지의 Header 영역을 정의한다. 페이지 상단에 툴바 형태로 표현되며, 보통 헤더(<h1>)태그와 함께 사용한다. 역시 <div> 태그에 data-role="header" 속성을 지정한다.

content

실제 페이지의 콘텐츠를 기술하는 영역이다. <div> 태그에 data-role="content" 속성을 지정한다.

footer

페이지의 footer 영역을 지정한다. 페이지 하단에 툴바 형태로 표현되며 <div> 태그에 data-role="footer" 속성을 지정한다.

jQuery Mobile 사용자 인터페이스

툴바

Header bar : <div data-role="header">

Footer bar : <div data-role="footer">

Nav bar :

Nav bar는 두개 이상의 버튼을 수평으로 나열해서 하나의 탭 바를 형성하는 UI 컨트롤로 내비게이션바를 구현할 때 사용한다. 보통 Header나 Footer 영역에 위치하며 최대 5개의 버튼을 나열할 수 있다.

<div> 태그에 data-role="navbar" 속성을 지정해서 Nav bar를 표현할 수 있으며 class="ui-btn-active"로 특정 메뉴를 활성상태로 만들수 있다.

<h1 class="ui-title" role="heading" aria-level="1">Toolbar</h1>

</div>

<p>Header, Footer and Nav bar</p>

</div>

<li class="ui-block-c"><a href="#" data-icon="star" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true"class="ui-btn ui-btn-up-a ui-btn-inline ui-btn-icon-top"><span class="ui-btn-inner"><span class="ui-btn-text">Three</span><span class="ui-icon ui-icon-star ui-icon-shadow"> </span></span></a></li>

</ul>

</div>

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default" style="top: 440.5px;"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div>

Fixed Mode

콘텐츠의 내용이 길어서 페이지를 위아래로 스크롤하면 Header와 Footer bar가 시야에서 사라진다. 그러나 이것들을 Fixed Mode로 지정하면 자동으로 스크롤을 따라 다니게 만들 수 있다.

Fullscreen Mode

Header나 Footer bar가 Fixed Mode로 설정된 상태에서 Page 영역을 Fullscreen Mode로 설정하면 스크롤의 상태와 상관없이 사용자의 터치에 의해 숨기고 나타나기를 반복하게 할 수 있다. 다음과 같이 Page 영역에 data-fullscreen="true" 속성을 추가로 지정하고 Header 혹은 Footer bar에 data-position="fixed"를 지정한다.

Fullscreen Mode : <div data-role="page" data-fullscreen="true">

Fixed Mode : <div data-role="header" data-position="fixed">

아이콘

data-icon 속성을 이용해 특정 아이콘을 지정할 수 있다.

Icon : <a href="#" data-role="button" data-icon="arrow-l">button</a>

- 아이콘 위치 - jQuery Mobile 표준아이콘 종류

arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, home, search

위치를 변경하고 싶다면 data-iconpos 속성을 지정한다 : left, right, top, bottom

data-iconpos 적용 예 : <a href="#" data-role="button" data-icon="info" data-iconpos="top">button</a>

data-iconpos 속성을 'notext'로 지정하면 (텍스트 없는) 아이콘 버튼을 만들 수 있다.

icon button : <a href="#" data-role="button" data-icon="info" data-iconpos="notext">button</a>

- 사용자 정의 아이콘

먼저 새로운 아이콘을 위한 18x18 픽셀 이미지를 생성한다. 파일명 : myNewIcon.png

새 아이콘을 위한 Css코드 추가

.ui-icon-my-new-icon {

background-image:url('images/myNewIcon.png');

}

새 아이콘의 사용예

<a href="#" data-role="button" data-icon="my-new-icon">button</a>

버튼

- 기본버튼

버튼 : <a href="#" data-role="button">button</a>

이렇게 생성된 버튼은 모바일 브라우저의 가로크기를 꽉 채우게 된다. 그러나 data-inline="true" 속성을 추가하면 버튼의 크기를 텍스트에 맞춰 줄일수 있다.

인라인 버튼 : <a href="#" data-role="button" data-inline="true">button</a>

- 폼버튼

<button>태그, input type="button", input type="submit", input type="reset", input type="image" 등은 data-role="button" 속성을 지정하지 않아도 자동으로 버튼으로 표현된다.

<button>button element</button>

- 버튼그룹

여러개의 버튼을 묶어서 하나의 그룹을 형성하려면 버튼을 감싸고 있는 컨테니너 태그에 data-role="controlgroup"속성을 지정하면 된다. 그리고 버튼이 그룹화되는 방향을 지정할 수 있다. data-type="horizontal"은 수평으로 그룹화되고 data-type="vertical"은 수직으로 그룹화되며 지정하지 않으면 기본값은 수직정렬이다.

<a href="#" data-role="button" data-icon="back">Button1</a>

<a href="#" data-role="button" data-icon="forward">Button2</a>

</div>

<a href="#" data-role="button" data-icon="back">Button1</a>

<a href="#" data-role="button" data-icon="forward">Button2</a>

</div>

리스트

jQuery Mobile은 기존 HTML 목록태그에 data-role="listview" 속성을 지정해 모바일 친화적인 리스트를 만든다.

- 기본리스트

</ul>

- Inset리스트

Inset 리스트는 상,하,좌,우 여백과 라운드 모서리 효과를 줘서 다른 컨트롤과 조화되게 한다. 다음과 같이 data-inset="true" 속성을 추가로 지정해 Inset 리스트를 만들 수 있다.

</ul>

- 리스트 Divider

리스트 Divider는 리스트 항목들을 분할하여 구분하는 것으로 일종의 리스트 그룹 효과를 줄 수 있다.

<li> 태그에 data-role="list-divider" 속성을 지정한다.

<li data-role="list-divider">Divider 1</li>

<li data-role="list-divider">Divider 2</li>

</ul>

- 리스트 검색

jQuery Mobile은 리스트 항목을 검색할 수 있도록 지원한다. data-filter="true" 속성을 추가하면 된다.

</ul>

- Split button 리스트

Split button 리스트는 리스트의 각 항목을 좌우 두 구간으로 나눠서 왼쪽에는 일반적인 항목을 표현하고 오른쪽에는 아이콘 버튼을 둬서 별도의 링크를 가능하게 한다.

<li>

<a href="#">Split Icon Description</a>

</li>

<li>

<a href="#">Split Icon Description</a>

</li>

<li>

<a href="#">Split Icon Description</a>

</li>

</ul>

- 아이콘 리스트와 썸네일 리스트

리스트 항목에 아이콘을 표시하려면 <img>태그에 class="ui-li-icon" 속성을 지정한다. 이때 아이콘의 크기는 16x16픽셀을 권장한다.

<li><img src="images/gf.png" class="ui-li-icon"><a href="#">France</a></li>

<li><img src="images/de.png" class="ui-li-icon"><a href="#">Germany</a></li>

<li><img src="images/gb.png" class="ui-li-icon"><a href="#">Great Britain</a></li>

<li><img src="images/fi.png" class="ui-li-icon"><a href="#">Japan</a></li>

</ul>

아이콘이 아닌 썸네일 이미지를 표현하고 싶다면 <img> 태그에 지정했던 class="ui-li-icon" 속성을 제거하면 된다. 이때 이미지 크기가 클경우 자동으로 80픽셀로 조정한다.

</ul>

- 중첩 리스트

중첩(Nested) 리스트는 리스트 내에 하위 리스트가 존재하는 중첩된 구조의 리스트를 말한다. 중첩 리스트는 모바일 애플리케이션에서 자주 활용되는 UI구조로서, 대분류, 소분류와 같은 계층 구조의 데이터 집합을 표현할 때 유용하게 사용할 수 있다.

<li>Parent Item 1

<ul>

</ul>

</li>

<li>Parent Item 2

<ul>

</ul>

</li>

<li>Parent Item 3

<ul>

</ul>

</li>

</ul>

애플리케이션 실행중 이미 생성된 리스트에 새로운 항목을 동적으로 추가할 경우 다음과 같이 jQuery Mobile에 업데이트 되었음을 명시적으로 알려야 한다.

$('ul').append('<li><a href="#">New Item</a></li>');

$('ul').listview("refresh");

폼

- Field Container

폼 양식을 정의할 때 각 양식의 간격을 적절하게 유지해서 서로 구분하기 쉽게 하고 양식과 label의 조화를 위해 각 양식을 감싸는 태그, 즉 <div> or <fieldset>에 data-role="fieldcontain" 속성의 지정을 권장한다.

다음은 입력양식의 예이다.

<label for="name">Text Input:</label>

</div>

<label for="password">Password Input:</label>

</div>

<label for="textarea">Textarea:</label>

</div>

- HTML5의 향상된 입력양식

<label for="number">Number:</label>

</div>

<label for="email">Email:</label>

</div>

</div>

</div>

- 슬라이더

슬라이더는 라디오 볼륨 조절 장치처럼 상하좌우로 조절할 수 있는 UI 컨트롤로서 range 타입으로 구현한다. 슬라이더바와 텍스트 입력창과 min,max로 범위의 최소, 최대값을 지정하고 value로 현재 값을 지정한다.

<label for="slider1">Input slider:</label>

</div>

- 플립 토글

플립 토글은 on/off와 같이 두 가지중 하나를 선택하도록 하는 토글 버튼을 표현한다. <select>태그에 data-role="slider" 속성을 지정해 플립 토글 버튼을 만든다.

<label for="slider">Select slider:</label>

</select>

</div>

- Select 메뉴

옵션의 수가 적은 Select 메뉴는 오버레이 형식으로 메뉴창이 나타나지만 옵션이 너무 많으면 자동으로 Dialog Page에 메뉴창이 나타난다.

<label for="selectMenu">Select Menu:</label>

<option value="optoin1">Option1</option>

<option value="optoin2">Option2</option>

<option value="optoin3" selected="">Option3</option>

<option value="optoin4">Option4</option>

</select>

</div>

- 체크박스와 라디오버튼

체크박스와 라디오버튼을 정의할 때는 <fieldset> 태그로 이들을 감싸고 여기에 data-role="controlgroup" 속성을 지정해 이들을 그룹화한다.

<legend>CheckBox:</legend>

<label for="checkbox1">Check1</label>

<label for="checkbox2">Check2</label>

<label for="checkbox3">Check3</label>

</fieldset>

</div>

<legend>Radio Button:</legend>

<label for="radio1">Radio1</label>

<label for="radio2">Radio2</label>

<label for="radio3">Radio3</label>

</fieldset>

</div>

참고로 <fieldset>태그에 data-type="horizontal" 속성을 지정하면 수평 정렬된 형태로 표현할 수 있다.

Collapsible 블록

Collapsible 블록은 콘텐츠 영역을 접었다 펼 수 있는 컨트롤이며 콘텐츠를 감싸고 있는 <div>태그에 data-role="collapsible" 속성을 지정하면 된다. 이때 data-collapsed="true" 속성을 지정하면 접힌 형태로 나타난다.

<h3>Collapsible 1</h3>

<p>Collapsible Content Block 1</p>

</div>

<h3>Collapsible 2</h3>

<p>Collapsible Content Block 2</p>

</div>

<h3>Collapsible 3</h3>

<p>Collapsible Content Block 3</p>

</div>

또한 여러개의 Collapsible 블럭을 하나의 그룹으로 구성하고 싶다면 이것들을 감싸고 있는 <div>태그에 data-role="collapsible-set" 속성을 지정한다.

jQuery Mobile 페이지 이동과 효과

내부 링크 페이지 이동

jQuery Mobile은 한페이지에 정의된 여러 화면(Page 영역)을 대상으로 내부적으로 이동할 수 있게 내부 링크를 지원한다. 이때 이동할 Page 영역을 식별하기 위해 <div>태그에 ID값을 부여하고 이 값으로 링크를 연결한다.

</div>

<h1>First Page</h1>

<a href="#secondPage">Go To Second Page</a>

</div>

</div>

<h1>Second Page</h1>

</div>

내부 링크 페이지 이동 원리

이동원리를 보면 각 Page 영역에 지정된 ID 값이 data-url 속성값으로 자동 생성되며 ui-page-active라는 CSS 클래스가 추가로 지정되어 여러 Page 영역 가운데 실제 모바일 브라우저에 표시할 페이지를 결정한다. 또한 Page2으로 이동하면 코드에서 정의하지 않았던 '뒤로 가기' 버튼(Back 버튼)이 자동 생성된다.

외부 링크 페이지 이동

jQuery Mobile의 외부 링크 페이지 이동은 자동으로 Ajax통신으로 처리되며 내부 링크 페이지 이동과 유사하게 동작한다.

다음은 Page1.html에서 Page2.html로의 외부 링크 페이지 이동을 보여준다.

</div>

<h1>First Page</h1>

<a href="Page2.html">Go To Page2.html (using Ajax)</a>

</div>

</div>

</div>

외부 사이트 이동 및 링크 옵션

jQuery Mobile은 기존의 표준 HTML 링크 타입을 모두 지원한다. 또한 자동 Ajax 처리가 마음에 들지 않는다면 링크의 타깃 정보를 명시적으로 지정하거나 rel="external", data-ajax="false" 등의 속성을 지정해서 전통방식의 페이지 이동을 처리할 수 있다. (전통 방식의 페이지 이동은 새로고침 방식을 말한다.)

<p><a href="http://jquerymobile.com">Go To External Site </a></p>

<p><a href="Page2.html" rel="external">Go To Page2.html (rel="external")</a></p>

<p><a href="Page2.html" data-ajax="false">Go To Page2.html (data-ajax="false")</a></p>

<p><a href="Page2.html" target="_blank">Go To Page2.html (target="_blank")</a></p>

Back 버튼과 대화창

페이지 이동시 만일 Back버튼이 자동으로 만들어지지 않게 하려면 다음과 같이 Header bar에 data-backbtn="false" 속성을 지정한다.

Back버튼을 Header bar가 아닌 콘텐츠 영역에 명시적으로 생성하고 싶다면 앵커 태그에 data-rel="back" 속성을 지정하면 된다. 그리고 페이지를 대화(Dialog)창 형태의 새창으로 띄우고 싶을 경우 data-rel="dialog" 속성을 지정한다.

</div>

<a href="#secondPage" data-rel="dialog" data-transition="pop">Pop up Dialog</a>

</div>

<h1>Dialog</h1>

</div>

<h1>Dialog Page</h1>

<a href="#" data-role="button" data-rel="back">Close</a>

</div>

페이지 이동 API

스크립트 영역에서 페이지 이동을 처리하고 싶다면 jQuery Mobile에서 제공하는 mobile 객체의 changePage() 메서드를 이용하면 된다. changePage() 메서드의 매개변수에는 차례대로 이동할 페이지, Transition, Transition 방향을 지정한다.

내부 링크 페이지 이동 $.mobile.changePage('#secondPage','slide','reverse');

외부 링크 레이지 이동 $.mobile.changePage('Page2.html','slide','reverse');

페이지 이동 애니메이션 효과

페이지 링크를 정의하는 앵커 태그에 data-transition 속성을 지정해서 다음과 같은 6가지 효과를 구현할 수 있다.

- slide : 페이지가 왼쪽으로 미끄러지듯 이동한다.

- slideup : 페이지가 위쪽으로 미끄러지듯 이동한다.

- slidedown : 페이지가 아래쪽으로 미끄러지듯 이동한다.

- pop : 새 페이지가 팝업 형태로 올라온다.

- fade : 기존 페이지가 희미해지면서 새 페이지가 나타난다.

- flip : 새 페이지가 회전하면서 나타난다.

<h1>Transition</h1>

</div>

<h1>Page Animation</h1>

<p><a href="#secondPage" data-transition="slide">Slide</a></p>

<p><a href="#secondPage" data-transition="slideup">Slide Up</a></p>

<p><a href="#secondPage" data-transition="slidedown">Slide Down</a></p>

<p><a href="#secondPage" data-transition="slide" data-direction="reverse">Slide Reverse</a></p>

</div>

</div>

<h1>Second Page</h1>

</div>

jQuery Mobile Ajax 상호작용

기본적으로 jQuery Mobile은 서버 통신이 필요한 모든 요청을 Ajax로 처리한다.

GET 요청

다음과 같은 일반적인 링크는 jQuery Mobile이 알아서 Ajax 통신을 수행한다.

jQuery Mobile의 GET 요청 메커니즘

jQuery Mobile은 기본 링크로 페이지를 이동할 때(예를 들어, Page1.html 에서 Page2.html로 이동) 내부적으로 Ajax 통신을 이용해 GET 요청을 처리하고 응답받은 결과 데이터를 기존페이지에 통합해서 애니메이션 효과와 함께 Page 영역을 전환한다.

하지만 Back버튼으로 원래 Page영역으로 돌아온 뒤(Page1.html) 다시 동일한 페이지 이동(Page2.html)을 시도하면 더는 GET 요청이 아니라 '내부 링크 페이지 이동'과 같은 시나리오가 된다. 다시 말해 이미 기존 페이지에 통합됐기 때문에 이후 동일 자원에 대한 재요처은 서버와 통신이 아닌 내부 Page 영역간의 교체로 처리된다는 것이다.

Get 요청 처리 순서

Ajax GET 요청 -> 응답 -> 기존 페이지에 결과 데이터 통합 -> 자동 페이지 전환

동일 자원에 대한 두번째 GET 요청

자동 페이지 전환(애니메이션 효과 및 화면 전환)

Page2.html로 GET 요청을 한 뒤 변경되는 URL은 다음과 같다.

http://yourdomain/Page1.html#Page2.html

동일 자원에 대한 서로 다른 URL 매개변수 요청

jQuery Mobile은 동일한 자원에 대한 재요청이라도 전달하는 URL 매개변수가 다르면 이를 서로 다른 URL로 인식해서 다시 서버로 요청을 하도록 설계돼 있다. 결국 매개변수 정보까지 모두 포함하는 전체 URL을 기준으로 동일한 자원인지 판단한다.

POST 요청

폼 데이터를 실어 나를 때 사용하는 POST 요청 역시 jQuery Mobile에 의해 자동으로 Ajax Form 전송으로 처리된다. 다만 GET 요청의 경우 동일 자원에 대한 두 번 이상의 요청은 서버 통신이 생략되지만 POST 요청은 매번 서버로 통신을 하게 된다는 점이 다르다. 이렇게 매번 새로운 결과 값을 기존 페이지에 통합하기 때문에 이전에 통합된 데이터는 자동으로 제거된다.

FORM 전송(POST) 처리순서

Ajax POST 요청 -> 응답 -> 기존 페이지에 결과 데이터 통합 -> 자동 페이지 전환

동일 자원에 대한 두번째 FORM 전송

Ajax POST 요청 -> 응답 -> 기존 페이지에 결과 데이터 통합 -> 기존에 통합된 결과 데이터 제거 -> 자동 페이지 전환

jQuery Mobile 이벤트

mobileinit 이벤트와 기본 설정 변경

mobileinit 이벤트

mobileinit은 jQuery Mobile이 시작되자마자 발생하는 이벤트로서 최상단 초기화 작업이나 jQuery Mobile의 기본 설정값을 변경하기에 적합한 곳이다. 이 이벤트는 실행즉시 발생하므로 jQuery Mobile의 스크립트 라이브러리(jquery.mobile-1.1.0.min.js)가 로드되기 전에 바인딩되어야 한다.

가령 mobileinit 이벤트를 구현한 스크립트 파일이 'customScript.js'라고 한다면 다음과 같은 순서로 스크립트를 참조해야 한다.

//customScript.js

$(document).bind('mobileinit', function(){

...

});

초기화 설정 변경

mobileinit 이벤트를 이용해 jQuery Mobile의 기본 설정을 변경하려면 $.mobile 객체를 이용해 개별 설정을 변경하거나 $.extend 메서드를 사용하여 여러 속성을 한번에 변경할 수 있다.

- defaultTransition

페이지 이동 간 발생하는 기본 애니메이션 효과(Transition)를 설정한다.

설정값 유형 : 문자열, 기본값 : slide

- loadingMessage

시간이 소요되는 페이지를 불러올 때 나타나는 로딩 메시지를 설정한다.

설정값 유형 : 문자열, 기본값 : loading

- ajaxEnabled

Ajax가 아니라 전통적인 방식으로 페이지 이동을 처리하고 싶다면 이 값을 false로 지정한다.

설정값 유형 : true/false, 기본값 : true

- autoInitialize

jQuery Mobile은 페이지의 DOM이 준비되면 곧 바로 모바일 최적화를 위한 각종 초기화 작업을 수행한다. 이 값을 false로 지정하면 $.mobile.initializePage() 메서드가 호출되기 전까지는 초기화 작업을 미룰 수 있다. 이는 뭔가 다른 처리를 한 후 애플리케이션이 나타나는 시나리오에서 사용하면 좋다.

설정값 유형 : true/false, 기본값 : true

- metaViewportContent

뷰포트 설정을 위한 메타 태그를 지정한다. 이 값을 false로 지정하면 메타 태그가 생성되지 않는다. 혹은 다른 뷰포트 설정값으로 변경할 수 있다.

설정값 유형 : 문자열, 기본값 : width=device-width, minimum-scale=1, maximum-scale=1

아래는 실제 기본 설정을 변경하는 예제이다.

$(document).bind("mobileinit", function(){

$.extend($.mobile , {

defaultTransition : 'flip'

,loadingMessage : 'Now Loding...'

//,ajaxEnabled : false

//,autoInitialize : false,

//,metaViewportContent : 'width=device-width, minimum-scale=0.5, maximum-scale=0.5'

});

페이지 이벤트

jQuery Mobile은 애플리케이션이 시작되어 페이지가 로딩될 때와 페이지가 이동해서 새 페이지가 나타나거나 사라질 때 페이지 관련 이벤트를 발생시킨다.

- pagebeforecreate

페이지가 로딩될 때 제일 처음 발생하는 이벤트로서 페이지가 초기화되기 직전에 발생한다. 페이지가 생성되어 한 번 발생하고 나면 (페이지 이동 등에 의해) 더는 발생하지 않는다.

- pagecreate

페이지 초기화가 완료되면 발생한다. 역시 페이지가 생성된 후 한 번만 발생한다.

- pagebeforeshow

페이지가 보여지기 전에 발생한다. 페이지가 이동할 때는 Transition이 시작되기 전에 발생한다. 페이지가 보여지는 상황이 될 때마다 이벤트가 매번 발생한다.

- pageshow

페이지가 다 보여지면 발생한다. 페이지가 이동할 때는 Transition이 돤료되면 발생한다. 역시 페이지가 보여질 때마다 발생한다.

- pagebeforehide

페이지가 사라지기 전에 발생한다. 페이지 이동에 의해 사라질 경우 Transition이 시작되기 전에 발생한다. 역시 매번 발생한다.

- pagehide

페이지가 모두 사라지고 난 후 발생한다. 페이지 이동에 의해 사라질 경우 Transition이 완료되면 발생한다. 역시 매번 발생한다.

페이지 로딩 시 발생하는 이벤트

애플리케이션이 시작되어 특정 페이지가 처음 로딩되면 페이지 초기화 이벤트인 pagebeforecreate와 pagecreate 이벤트가 먼저 발생하고, 이어서 pageboforeshow, pageshow 이벤트가 순차적으로 발생한다. 한 번 생성된 페이지가 페이지 이동 등으로 다시 나타날 경우 pagebeforecreate와 pagecreate 이벤트는 더는 발생하지 않고 pagebeforeshow와 pageshow 이벤트만 다시 발생한다.

? 페이지가 처음 로딩될 때 발생하는 이벤트 순서

pagebeforecreate → pagecreate → pagebeforeshow → pageshow

페이지 이동 시 발생하는 이벤트

다음은 Page1에서 Page2로 처음 이동할 때 발생하는 이벤트 순서이다.

? Page1에서 Page2로 처음 이동할 때 발생하는 이벤트 순서

(Page2)pagebeforecreate → (Page2)pagecreate → (Page1)pagebeforehide → (Page2)pagebeforeshow → (Page1)pagehide → (Page2)pageshow

? Page2에서 Back버튼을 통해 다시 Page1으로 이동할 경우 이벤트 순서

(Page2)pagebeforehide → (Page1)pagebeforeshow → (Page2)pagehide → (Page1)pageshow

터치 이벤트

jQuery Mobile은 모바일 기기에서 유용하게 사용할 만한 몇 가지 터치 이벤트를 지원한다.

- tap

터기 기반 모바일 기기에서 가장 흔하게 발생하는 이벤트다. 클릭이벤트와 유사하며, 특정영역을 손가락으로 툭 치면 즉시 발생한다.

- taphold

일정 시간 이상 탭(tap)하고 있을 때 발생하는 이벤트다. 특정영역 복사와 같은 시나리오에 자주 사용된다.

- swipe

화면을 손가락으로 살짝 밀면 발생하는 이벤트다. 화면 전환이나 리스트와 같은 UI 컨트롤에서 특정 항목에 대한 삭제 버튼을 활성화할 때 자주 사용한다.

- swipeleft

왼쪽 방향으로 swipe할 때 발생하는 이벤트다.

- swiperight

오른쪽 방향으로 swipe할 때 발생하는 이벤트다.

스크롤 & 화면 방향 전환 이벤트

Scroll 이벤트와 모바일 기기의 가로/세로 방향이 바뀔때 발생하는 Orientation Change 이벤트이다.

- scrollstart

스크롤이 시작되면 발생하는 이벤트다.

- scrollstop

스크롤이 완료되면 발생하는 이벤트다.

- orientationchange

모바일 기기의 가로/세로 방향이 바뀔 때마다 발생하는 이벤트다.

희망잡이

,

PhoneGap & jQM 으로 스마트폰 앱만들기

정보기술(IT) 2013. 5. 24. 09:38

node.js로 웹어플리케이션의 프레임워크에 대해서 자료를 찾아보다가 스마트폰앱을 개발하기위한 새로운 방법을 알게되어서 여기에 적어봅니다.

일반적으로 스마트폰의 기종 즉 OS에 따라서 iOS, Android 로 크게 나누어 집니다. 여기 OS에 따라서 개발언어가 다릅니다.

그런데 최근에 jQuery Mobile(jQM) 이라는 자바스크립트 모듈이라는게 있습니다. 앱의 UI를 쉽게 생성할수 있는것 같습니다.

스마트폰이 가지고 있는 기능에 접근하기 위한 자바스크립트 모듈도 있습니다. 그것이 PhoneGap 입니다.

스마트기종별로 템플릿을 만들어서 지원하고 있습니다.

안드로이드로 프로그램을 만들어 보았습니다.

PhoneGap 개발도구 적용하기

1. 개발도구는 이클립스로 정하고 안드로이드 개발환경을 구축합니다.

2. PhoneGap 의 최신버전을 다운로드 받습니다.

3. 안드로이드 신규 앱 프로젝트를 이클립스에서 생성합니다.

4. 생성된 프로젝트에서 PhoneGap 의 템플릿을 파일을 필요한 폴더에 이동시킵니다.

5. assets 폴더안에 www 폴더를 생성하고 안드로이드용 샘플파일을 복사해서 붙여놓습니다.

6. libs 폴더안에 cordova-2.7.0.jar 파일을 붙여놓습니다.

7. res 폴더안에 phonegap-2.7.0\lib\android\xml 폴더을 복사해서 붙여 놓습니다.

8. AndroidManifest.xml 파일에 필요한 내용을 추가합니다.

9. AndroidManifest.xml 파일에서 Activity 에 속성을 추가합니다.

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

10.Activity 소스를 수정합니다.

extends DroidGap 상속받는것으로 바꿉니다.

그리고 index.html 을 로드할수 있도록 지정합니다.

super.loadUrl(Config.getStartUrl());

//super.loadUrl("file:///android_asset/www/index.html")

jquery mobile 개발도구 적용하기

1. www 폴더안에 css 폴더와 js 폴더에 필요한 파일을 이동 시면서 됩니다.

css 폴더

jquery.mobile-1.2.1.min.css

js 폴더

jquery.js <= jquery 기본 소스

jquery.mobile-1.2.1.min.js <= 모바일용 인터페이스 소스

2. index.html에서 css, js 파일을 가져옵니다.

희망잡이

,

'jQuery'에 해당되는 글 6건

jQuery Mobile의 Auto-Initialization

Theme in jQuery Mobile

jQuery에서 DOM Element 추가하기

How jQuery Works

jQuery Mobile 개발을 위한 기본 사항

PhoneGap & jQM 으로 스마트폰 앱만들기

공지사항

카테고리

태그목록

글 보관함

달력

링크

희망잡이

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30