3. 사용 예

jQuery Mobile은 HTML, CSS, JavaScript에 대한 깊은 지식 없이도, 간단한 코드 몇 줄만으로 모바일 웹 페이지에 동적인 기능을 쉽게 추가할 수 있도록 설계되었다. 예를 들어, 특정 요소를 탭했을 때 알림창을 띄우거나, 리스트 항목을 클릭했을 때 특정 영역을 부드럽게 나타나게 하는 등의 상호작용을 구현할 수 있다.

자세한 JavaScript 코드 예제와 HTML5 기반의 기본 페이지 구조 예제는 아래 하위 섹션에서 확인할 수 있다.

3. 1. JavaScript 코드 예

3. 2. 기본 예제 (HTML)

4. 테마

jQuery Mobile은 개발자가 사용자 인터페이스(UI) 요소의 색상 구성표와 특정 CSS 측면을 사용자 정의할 수 있도록 지원하는 테마 프레임워크를 제공한다. 이를 위해 jQuery Mobile ThemeRoller^[8] 애플리케이션을 이용하면 UI 디자인을 쉽게 맞춤 설정하고 브랜드에 맞는 경험을 구현할 수 있다. 개발된 테마는 사용자 정의 CSS 파일로 내려받아 프로젝트에 적용할 수 있다.^[9]

각 테마는 여러 개의 고유한 색상 "견본(swatch)"으로 구성될 수 있으며, 이를 조합하여 다양한 시각 효과를 만들 수 있다. 기본 테마 외에도 마이크로소프트 등 타사에서 개발한 오픈 소스 테마도 존재한다.^[10]

4. 1. 테마 사용 예 (HTML)

5. 모바일 브라우저 지원

스마트폰(아이폰, 안드로이드, 윈도우 폰 등)과 태블릿 PC가 급속도로 시장 점유율을 확대함에 따라, 다양한 모바일 환경을 지원하기 위해 jQuery Mobile이 개발되었다.^[3] jQuery Mobile은 안드로이드, iOS, 윈도우 폰, 블랙베리, WebOS, 심비안 등 주요 모바일 운영체제와 브라우저를 폭넓게 지원하며, 주요 데스크톱 브라우저와의 호환성도 고려되었다.^[3]

다양한 브라우저 환경에서 일관된 사용자 경험을 제공하기 위해, jQuery Mobile은 브라우저별 지원 수준을 A, B, C의 세 등급으로 나누어 관리한다.^[18][3] 각 등급은 브라우저의 미디어 쿼리 지원 여부와 시장 점유율 등을 기준으로 하며, 이에 따라 제공되는 기능과 최적화 수준이 달라진다. (자세한 등급 분류와 브라우저별 지원 현황은 하위 섹션 참조)

초기 버전에서는 광범위한 호환성을 목표로 했기 때문에 일부 버그가 존재했으나, 지속적인 개선을 통해 안정성을 높여 2011년 11월 16일에 버전 1.0이 정식 출시되었다.

5. 1. 브라우저 지원 등급

• '''A 등급 (고품질):''' 미디어 쿼리를 지원하는 브라우저로, jQuery Mobile의 모든 기능을 거의 완벽하게 활용할 수 있다. 개발팀에서 적극적으로 테스트하며 최적의 사용자 경험을 제공하는 것을 목표로 한다.
• '''B 등급 (중간 품질):''' 미디어 쿼리를 지원하지만, 시장 점유율 등의 이유로 A 등급만큼 집중적인 테스트가 이루어지지는 않는다. 일부 기능 제한이 있을 수 있으나, 기본적인 기능 사용에는 큰 문제가 없으며 버그 수정은 계속 지원된다.
• '''C 등급 (저품질):''' 미디어 쿼리를 지원하지 않는 구형 브라우저이다. 이 등급의 브라우저에는 jQuery Mobile의 스크립트나 고급 CSS가 적용되지 않고, 기본적인 HTML과 단순한 CSS만 제공되어 최소한의 콘텐츠 확인만 가능하다.

'''참고:'''

• `*` 표시는 아직 정식 출시되지 않았으나 알파 또는 베타 테스트 중인 차기 브라우저 버전을 의미한다.^[3]

6. 출시 역사

스마트폰(아이폰, 안드로이드, 윈도우 폰 등), 태블릿 PC가 급속도로 시장 점유율을 확대함에 따라 개발되었다. 스마트폰, PC 브라우저 등 폭넓은 브라우저 및 운영 체제를 지원하기 위해 초기에는 버그가 많았지만, 점차 개선되었다. 2011년 11월 16일에 버전 1.0이 출시되었다.

참조

_[1] 웹사이트 jQuery Mobile Alpha 1 Released https://blog.jquerym[...] blog.jquerymobile.com 2010-10-16
_[2] 웹사이트 jQuery Licensing Changes https://blog.jquery.[...] Blog.jquery.com 2012-09-10
_[3] 웹사이트 Mobile Graded Browser Support https://jquerymobile[...]
_[4] 웹사이트 The Global Rise of the Smartphone http://gigaom.com/20[...] 2011-04-27
_[5] 웹사이트 Resons why jQuery Mobile Is Suitable For Mobile Web App Development http://www.htmlpanda[...]
_[6] 웹사이트 IBM Worklight - United States http://www.worklight[...] Worklight.com null
_[7] 웹사이트 jQuery maintainers continue modernization initiative with deprecation of jQuery Mobile https://blog.jquery.[...] jQuery Blog 2022-12-06
_[8] 웹사이트 ThemeRoller https://jquerymobile[...]
_[9] 웹사이트 JQuery Mobile Theming Overview https://jquerymobile[...]
_[10] 웹사이트 More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile http://blogs.msdn.co[...]
_[11] 웹사이트 jQuery Mobile Alpha 1 Released http://blog.jquerymo[...] blog.jquerymobile.com 2010-10-16
_[12] 웹사이트 jQuery Licensing Changes http://blog.jquery.c[...] Blog.jquery.com 2012-09-10
_[13] 웹사이트 Mobile Graded Browser Support http://jquerymobile.[...]
_[14] 문서 http://www.worklight.com
_[15] 서적 모바일환경에 대응하는UI라이브러리「jQuery Mobile 1.0」릴리스、주요플랫폼을 서포트 http://sourceforge.j[...] OSDN Corporation 2011-11-21
_[16] 웹인용 jQuery Mobile Alpha 1 Released https://blog.jquerym[...] blog.jquerymobile.com 2010-10-16
_[17] 웹인용 jQuery Licensing Changes https://blog.jquery.[...] Blog.jquery.com 2012-09-10
_[18] 웹인용 Mobile Graded Browser Support https://jquerymobile[...]
_[19] 웹인용 The Global Rise of the Smartphone http://gigaom.com/20[...] 2019-04-19
_[20] 웹인용 Resons why jQuery Mobile Is Suitable For Mobile Web App Development http://www.htmlpanda[...]
_[21] 웹인용 IBM Worklight - United States http://www.worklight[...] Worklight.com null