01. jQuery Mobile ?

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Index

1. jQuery Mobile ?

jQuery Mobile은 jQuery 진영에서 개발한 모바일 웹앱프레임워크다. jQuery Mobile은 HTML5와 CSS3 기반의 사용자 인터페이스와 터치 이벤트 처리, 페이지 이동 애니메이션, Ajax통신 등의 모바일용 기능을 제공한다.

다음 URL http://www.jqmgallery.com 로 접근하면 jQuery Mobile로 개발된 웹앱들을 볼 수 있다. 단, 크롬으로 접근해야 정확한 결과를 볼 수 있다.

jQuery Mobile의 주요 특징

jQuery 기반
기존에 익숙한 HTML 태그를 이용해서 개발
HTML5, CSS3 기반
다양한 기기 지원(iOS, android, BlackBerry, bada, Windows Phone, palm webOS, symbian, MeeGo)
경량의 라이브러리
다양한 테마(Swatch개념을 이용해서 웹앱 전체와 부분 테마를 분리해서 적용, Theme Roller를 이용해서 새로운 테마를 빠르게 개발)

jQuery Mobile 설치

jQuery Mobile을 이용한 웹페이지를 제작하기 위해서는 jQuery 라이브러리와 jQuery Mobile 라이브러리가 필요하다. 페이지에 해당 라이브러리를 포함시키는 방법은 CDN을 이용하는 방법, 라이브러리 파일 직접 포함하는 방법이 있다

라이브러리 파일을를 웹페이지가 있는 사이트 내에 위치시키는 것이 아니고 브라우저에 의해서 페이지가 로딩될때 code.jquery.com 사이트에서 참조한다.

아래 보라색 코드를 <head> 태그 사이에 포함 시킨다.

<head>

</head>

jQuery 라이브러리는 http://www.jquery.com/download 에서 다운로드 받는다.

jQuery Mobile 라이브러리는 http://jquerymobile.com/download/ 에서 zip 파일 다운로드해서 로컬에 압축해제한다.

압축해제된 jquery.mobile-x.x.x.min.css, jquery-x.x.x.min.js, jquery.mobile-x.x.x.min.js 파일을 사이트 내의 적당한 폴더에 넣는다.(여기서는 루트 밑에 js 폴더 밑에 넣는 것으로 한다)

HTML 페이지의 <head></head> 태그 사이에 다음 소스를 입력한다. 버전 번호는 내려 받은 라이브러리 버전에 따라 달라질 수 있다.

<head>

</head>

사용자 정의 속성 data-*

HTML5는 User가 정의한 data-* 속성을 태그에 추가할 수 있도록 허용한다. jQuery Mobile은 javascript 가 실행되면서 사용할 목적으로 data-role 이라는 사용자 정의 속성을 추가했다.

사용자 정의 속성은 data-접두어로 해서 키와 값을 기술한다.

06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 (0)	2013.12.01
05. jQuery Mobile 의 단일 HTML 모델에 대한 이해 (0)	2013.11.30
04. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 (2)	2013.11.29
03. jQuery Mobile 페이지를 구성하는 4가지 영역 (0)	2013.11.28
02. jQuery Mobile 웹앱 파일의 기본 구조 (0)	2013.11.27

삶의 조각들