jQuery 모바일
jQuery Mobile | |
| 개발자 | jQuery 팀 |
|---|---|
| 초기 릴리즈 | 2010년 10월 16일 ([1] |
| 안정적 해제 | 1.4.5 / 2014년 10월 31일 ( |
| 릴리스 미리 보기 | 1.5.0-rc1 / 2018년 9월 10일 |
| 리포지토리 | |
| 기록 위치 | 자바스크립트 |
| 플랫폼 | 모바일 브라우저 지원 참조 |
| 크기 | 351KB / 142KB(최소화) / 40KB(최소화, 압축) |
| 유형 | 모바일 애플리케이션 프레임워크 |
| 면허증 | MIT[2] |
| 웹사이트 | jquerymobile |
jQuery Mobile은 터치 최적화 웹 프레임워크(모바일 프레임워크라고도 함)로, 특히 jQuery 프로젝트 팀이 개발한 자바스크립트 라이브러리다.이 개발은 성장하지만 이기종인 태블릿과 스마트폰 시장이 필요로 하는 많은 스마트폰과 태블릿 컴퓨터와 호환되는 프레임워크를 만드는 데 초점을 맞추고 있다.[3][4]jQuery Mobile 프레임워크는 PhoneGap, Worklight [6]등과 같은 다른 모바일 앱 프레임워크[5] 및 플랫폼과 일치한다.
특징들
- Android, iOS, Windows Phone, Blackberry, WebOS, Symbian을 포함한 모든 주요 모바일 플랫폼뿐만 아니라 모든 주요 데스크톱 브라우저와 호환 가능.
- jQuery core 위에 구축되어 이미 jQuery 구문에 익숙한 사람들을 위한 최소한의 학습 곡선을 가지고 있다.
- 사용자 정의 테마를 만들 수 있는 테마 지정 프레임워크.
- 속도 최적화를 위한 제한적 의존성 및 경량화
- 동일한 기본 코드베이스가 어떤 화면에도 자동으로 스케일링된다.
- 최소한의 스크립팅으로 페이지를 배치하기 위한 HTML5 기반 구성
- PushState를 통해 의미 URL을 만들 수 있는 애니메이션 페이지 전환 기능을 갖춘 AJAX 기반 탐색.
- 터치 최적화 및 플랫폼에 구애받지 않는 UI 위젯.
(출처: jQuery Mobile 웹사이트에서)[3]
사용 예
$('div').에 관하여('탕', 기능을 하다(사건){ 빈틈이 없는('tapped '); }); $(문서화하다).준비가 되어 있는(기능을 하다(){ $('.myList li').에 관하여('클릭 터치 스타트', 기능을 하다() { $('.myDiv').슬라이드다운('500'); }); }); 기본적인 예
다음은 HTML5 의미 요소를 활용한 기본 jQuery Mobile 프로젝트다.jQuery 및 jQuery Mobile JavaScript 라이브러리와 스타일시트(파일을 로컬로 다운로드하여 호스팅할 수 있지만 jQuery CDN에 호스팅된 파일에 연결하는 것이 좋다)에 연결하는 것이 중요하다.
프로젝트의 화면은 다음과 같이 정의된다.sectionHTML5 요소 및data-role의page. 참고하십시오.data-roleHTML5의 예임data속성, 이 경우 jQuery Mobile에 의해 정의된다.페이지에는 다음이 있을 수 있다.header그리고footer와의 관계.data-role의header그리고footer각각,그 사이에, 어쩌면...article요소, a와 함께role의main그리고 aclass의ui-content. 마지막으로 anav요소, 포함data-role의navbar있을 수 있다
두 개 이상의 HTML 문서를 포함할 수 있음section요소, 즉 두 개 이상의 화면 내용.이렇게 하면 컨텐츠의 여러 페이지를 포함하는 하나의 파일만 로드하면 된다.한 페이지는 페이지의 id 속성(예:)을 참조하여 동일한 파일 내의 다른 페이지로 링크할 수 있다.href="#second").
아래 예에서는 두 가지 다른 데이터 속성이 사용된다.그data-theme속성은 어떤 테마를 렌더링할지 브라우저에 알려준다.그data-add-back-btn특성은 다음과 같이 설정된 경우 페이지에 뒤로 단추를 추가함true.
마지막으로 아이콘을 사용하여 요소에 추가할 수 있다.data-icon기여하다jQuery Mobile에는 일반적으로 사용되는 50개의 아이콘이 내장되어 있다.
이 예에서 사용된 데이터 속성에 대한 간략한 설명:
데이터 역할 – 헤더, 내용, 바닥글 등 요소의 역할을 지정한다.
data-theme – 컨테이너 내의 요소에 사용할 설계 테마를 지정한다.a 또는 b로 설정할 수 있다.
데이터 위치 – 요소를 고정해야 하는지 여부를 지정하며, 이 경우 요소가 상단(헤더의 경우) 또는 하단(바닥글의 경우)에 렌더링된다.
데이터 변환 – 새 페이지를 로드할 때 사용할 10개의 기본 제공 애니메이션 중 하나를 지정하십시오.
데이터 아이콘 – 요소에 추가할 수 있는 50개의 기본 제공 아이콘 중 하나를 지정하십시오.
<!독타입 html> <html> <머리> <변형시키다차르셋="utf-8"> <<>>j모바일 예 쿼리 <변형시키다이름을 붙이다="뷰포트"내용물="dv-scale=1, user-cale=no, width=device-width"> <연결하다다시 하다="스타일시트"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> </머리> <보디> <단면자료를 수집하다="페이지"id="첫 번째"자료를 수집하다="a"> <머리글자료를 수집하다="header"자료의 위치="고정"> <h1>1페이지 머리글 </머리글> <기사역할="메인"계급="ui-content"> <h2>여보세요, 세상!</h2> <아흐ref="#second"data-role="button"data-inline="true"data-transition="flow"data-iconpos="right")2페이지로 이동하십시오. </기사> <발을 동동 구르다자료를 수집하다="발바닥"자료의 위치="고정"> <h4>페이지 1면 바닥글 </발을 동동 구르다> </단면> <단면자료를 수집하다="페이지"id="두 번째"자료를 수집하다="b"> <머리글자료를 수집하다="header"자료의 위치="고정"데이터 애드백 btn="진짜"> <h1>2페이지 머리글 </머리글> <기사역할="메인"계급="ui-content"> <h2>예시 페이지[/h2] </기사> <발을 동동 구르다자료를 수집하다="발바닥"자료의 위치="고정"> <h4>2페이지 바닥글 </발을 동동 구르다> </단면> <각본을 뜨다src="https://code.jquery.com/jquery-1.11.1.min.js"></각본을 뜨다> <각본을 뜨다src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></각본을 뜨다> </보디> </html> 테마링
jQuery Mobile은 개발자가 UI 기능의 색상표와 특정 CSS 측면을 사용자 정의할 수 있는 테마 프레임워크를 제공한다.개발자는 jQuery Mobile TeemeRoller[7] 애플리케이션을 사용하여 이러한 외모를 사용자 정의하고 브랜드 경험을 만들 수 있다.테마롤러 애플리케이션에서 테마를 개발한 후 프로그래머는 사용자 정의 CSS 파일을 다운로드하여 프로젝트에 포함시켜 사용자 정의 테마를 사용할 수 있다.[8]
각 테마는 최대 26개의 고유한 색상 "스왑"을 포함할 수 있으며, 각 색상은 헤더 바, 내용 본문, 단추 상태로 구성되어 있다.서로 다른 스와치를 결합하면 개발자들이 테마당 단 한 번의 스와치로 보다 더 광범위한 시각 효과를 창출할 수 있다.테마 내에서 서로 다른 스왓치 간의 전환은 HTML 요소에 "data-theme"라는 속성을 추가하는 것만큼 간단하다.
기본 jQuery Mobile 테마는 "a"와 "b"라는 두 가지 다른 색상 견본과 함께 제공된다.다음은 "b" 스왓치를 사용하여 도구 모음을 만드는 방법의 예:
<div data-role="header" data-theme="b"><h1> 페이지 제목 </h1> </div>(출처: jQuery Mobile 웹사이트에서)[3]
이미 제3자 기관이 개발하고 지원하는 오픈소스 스타일의 테마가 소수에 달한다.그러한 오픈 소스 스타일의 테마 중 하나는 마이크로소프트 오픈 테크놀로지스 주식회사가 개발하여 출시한 메트로 스타일 테마다.[9]메트로 스타일 테마는 마이크로소프트가 모바일 운영 체제에서 사용하는 메트로(디자인 언어)의 UI를 모방하기 위한 것이다.
모바일 브라우저 지원
| 플랫폼 | 버전 | 네이티브 | 전화 갭 | 오페라 모바일 | 오페라 미니 | 페넥 | 오존 | 네트 프런트 | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0.9 | 8.5, 8.65 | 9.5 | 10 | 4.0 | 5.0 | 1.0 | 1.1* | 0.9 | 4.0 | |||
| iOS | v2.2.1 | A | A | |||||||||
| v3.1.3, v3.2 | A | A | A | |||||||||
| v4-7.0 | A | A | A | |||||||||
| 심비언 S60 | v3.1, v3.2 | A | A | A | A | A | C | C | ||||
| v5.0 | C | C | C | A | C | A | ||||||
| 심비언 UIQ | v3.0, v3.1 | C 8.65 | C | |||||||||
| v3.2 | C | C | ||||||||||
| 심비언 플랫폼 | v.3.0 | A | ||||||||||
| BlackBerry OS | v4.5 | C | C | C | ||||||||
| v4.6, v4.7 | C | C | C | B | ||||||||
| v5.0 | B | A | C | A | ||||||||
| v6.0 | A | A | A | |||||||||
| 안드로이드 | v1.5, v1.6 | A | A | |||||||||
| v2.1 | A | A | ||||||||||
| v2.2 | A | A | A* | C* | A* | |||||||
| 윈도 모바일 | v6.1 | C | C | C | C | B | C | B | C | |||
| v6.5.1 | C | C | C | A | A | C | A | |||||
| v7.0 | A | A | C | A | ||||||||
| 웹OS | 1.4.1 | A | A | |||||||||
| 바다 | 1.0 | A | ||||||||||
| 마에모 | 5.0 | B | B | C | B* | |||||||
| 미고 | 1.1* | A* | A* | A* | ||||||||
키:
- A - 고품질.최소한 미디어 쿼리를 활용할 수 있는 브라우저(jQuery Mobile의 요구 사항)이 브라우저들은 적극적으로 테스트될 것이지만, jQuery Mobile의 모든 기능을 받지 못할 수도 있다.
- B - 중간 품질.일상적인 테스트를 보장하기에 충분한 시장 점유율을 가지고 있지 않은 유능한 브라우저.버그 수정은 이러한 브라우저들을 돕기 위해 여전히 적용될 것이다.
- C - 낮은 품질.미디어 쿼리를 사용할 수 없는 브라우저.그것들은 어떤 jQuery Mobile 스크립팅이나 CSS (일반 HTML과 단순 CSS로 되돌아감)도 제공되지 않을 것이다.
- * - 예정된 브라우저.이 브라우저는 아직 출시되지 않았지만 알파/베타 테스트 중이다.
(출처: jQuery Mobile 웹사이트에서)[3]
발매이력
| 출시일자 | 버전 번호 |
|---|---|
| 2010년 10월 16일 | 1.0.0 알파 1 |
| 2010년 11월 12일 | 1.0.0 알파 2 |
| 2011년 2월 4일 | 1.0.0 알파 3 |
| 2011년 3월 31일 | 1.0.0 알파 4 |
| 2011년 4월 7일 | 1.0.0 알파 4.1 |
| 2011년 6월 20일 | 1.0.0 베타 1 |
| 2011년 8월 3일 | 1.0.0 베타 2 |
| 2011년 9월 8일 | 1.0.0 베타 3 |
| 2011년 9월 29일 | 1.0.0 RC1 |
| 2011년 10월 19일 | 1.0.0 RC2 |
| 2011년 11월 13일 | 1.0.0 RC3 |
| 2011년 11월 16일 | 1.0.0 |
| 2012년 1월 26일 | 1.0.1 |
| 2012년 2월 28일 | 1.1.0 RC1 |
| 2012년 4월 6일 | 1.1.0 RC2 |
| 2012년 4월 13일 | 1.1.0 |
| 2012년 6월 28일 | 1.1.1 RC1 |
| 2012년 7월 12일 | 1.1.1 |
| 2012년 8월 1일 | 1.2.0 알파 |
| 2012년 9월 5일 | 1.2.0 베타 |
| 2012년 9월 14일 | 1.2.0 RC1 |
| 2012년 9월 21일 | 1.2.0 RC2 |
| 2012년 10월 2일 | 1.2.0 |
| 2013년 1월 14일 | 1.3.0 베타 |
| 2013년 2월 4일 | 1.3.0 RC1 |
| 2013년 2월 20일 | 1.3.0 |
| 2013년 3월 19일 | 1.1.2 |
| 2013년 3월 22일 | 1.2.1 |
| 2013년 4월 10일 | 1.3.1 |
| 2013년 7월 19일 | 1.3.2 |
| 2013년 7월 25일 | 1.4.0 알파 1 |
| 2013년 8월 15일 | 1.4.0 알파 2 |
| 2013년 9월 24일 | 1.4.0 베타 1 |
| 2013년 10월 24일 | 1.4.0 RC 1 |
| 2013년 12월 23일 | 1.4.0 |
| 2014년 2월 12일 | 1.4.1 |
| 2014년 2월 28일 | 1.4.2 |
| 2014년 7월 1일 | 1.4.3 |
| 2014년 9월 12일 | 1.4.4 |
| 2014년 10월 31일 | 1.4.5(최신 안정화 버전) |
| 2017년 1월 3일 | 1.5.0-162.1 |
참고 항목
참조
- ^ jQuery Foundation - jquerymobile.com (2010-10-16). "jQuery Mobile Alpha 1 Released". blog.jquerymobile.com. Retrieved 2014-05-22.
- ^ jQuery Foundation - jquery.org (2012-09-10). "jQuery Licensing Changes". Blog.jquery.com. Retrieved 2013-10-09.
- ^ a b c d "Mobile Graded Browser Support".
- ^ "The Global Rise of the Smartphone".
- ^ "Resons why jQuery Mobile Is Suitable For Mobile Web App Development".
- ^ "IBM Worklight - United States". Worklight.com. Retrieved 2013-10-09.
- ^ "ThemeRoller".
- ^ "JQuery Mobile Theming Overview".
- ^ "More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile". Archived from the original on 2014-08-16.
추가 읽기
- Doyle, Matt (March 18, 2014). Master Mobile Web Apps with jQuery Mobile (4th ed.). Elated Books. p. 567. ISBN 978-0-9873115-3-5.
- Pelletier, Jeff (April 25, 2013). Mobile App Manual: The Blueprint (1st ed.). Withinsight Publishing. p. 96. ISBN 978-0989072106.
- Bai, Giulio (June 23, 2011). jQuery Mobile First Look (1st ed.). Packt Publishing. p. 216. ISBN 1-84951-590-5.
- Reid, Jon (July 7, 2011). jQuery Mobile (1st ed.). O'Reilly Media. p. 130. ISBN 1-4493-0668-3.
- David, Matthew (September 21, 2011). HTML5 Mobile Websites: Turbocharging HTML5 with jQuery Mobile, Sencha Touch, and Other Frameworks (1st ed.). Focal Press. p. 250. ISBN 0-240-81813-X.
- Broulik, Brad (November 30, 2011). Pro jQuery Mobile (1st ed.). Apress. p. 350. ISBN 1-4302-3966-2.
- Holzner, Steven E. (January 2, 2012). Sams Teach Yourself jQuery Mobile in 10 Minutes (1st ed.). Sams. p. 240. ISBN 0-672-33557-3.
- Firtman, Maximiliano (January 31, 2012). jQuery Mobile: Up and Running (1st ed.). O'Reilly Media. p. 250. ISBN 1-4493-9765-4.
- Dutson, Phil (July 13, 2012). Sams Teach Yourself jQuery Mobile in 24 Hours (1st ed.). Sams. p. 475. ISBN 0-672-33594-8.
- de Jonge, Adriaan, Dutson, Phillip (November 2, 2012). jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples (1st ed.). Addison-Wesley Professional. p. 400. ISBN 978-0-321-82208-6.
