jquery mobile demo - Introduction

jquery mobile demo

- Introduction(소개)

jQuery Mobile은 터치 기반의 프레임워크로 다양한 모바일디바이스, 타블렛, 데스크탑 플랫폼을 지원한다. jQuery 프레임워크를 기반으로한 HTML5중심의 구성은 쉽게 접근할 수 있으면서 강력한 API로 사용자 정의가 가능하다.

- Page & Dialogs(페이지&다이얼로그:인터페이스)

jQuery Mobile에서 page는 data-role="page" 와 같은 형식으로 사용된다. div 태그와 주로 사용하며, data-role="header", class="ui-content", data-role="footer" 등도 사용된다.

  

- Ajax Navigation & Transitions(Ajax 네비게이션과 화면전환)

jQuery Mobile은 Ajax 네비게이션 시스템을 지원하며 다양한 애니메이션 창전환 효과를 지원한다. jQuery Mobile 문서내의 링크를 클릭하거나 양식이 제출 될 때마다, 해당이벤트는 자동으로 Ajax탐색 시스템을 통해 표시되며 프레임워크는 ajax응답을 기다리는 동안 로더 오버레이가 표시된다. 

페이지가 로드를 요청하면 data-role="page" 속성을 가진 요소에 대한 문서를 구문 분석하고, 원래 페이지의 DOM에 코드를 삽입한다. 이후 수신페이지의 모든 위젯은 모든 스타일이 적용된다.

기본적으로 프레임워크는 페이드전환이 적용되며 링크이전에 속성을 추가하여 변경이 가능하다.

- Content & Widgets (컨텐트와 위젯들)

content 영역내에도 여러가지 HTML 요소들을 추가할 수 있으며 제목, 목록, 단락 등을 원하는 스타일대로 표현할 수 있다. jQuery Mobile은 다양한 영역의 터치프랜들리 UI위젯들을 포함하고 있다. 폼(form), 펼침메뉴, 아코디언, 팝업, 대화상자, 응답테이블등이 가능하며, 구성요소들이 선택가능한 다운로드빌더를 사용하면 최적의 성능을 발휘할 수 있다.

 

- Listviews

jQuery Mobile은 여러방식으로 표현이 가능한 리스트뷰가 포함되어 있다. 리스트뷰는 data-role="listview" 형식으로 추가할 수 있으며, form의 input박스를 이용하여 필터링이 가능하다. 필터링의 사용은 data-filter="true" 로 사용할 수 있다.

- Form elements, Responsive Design, Theme

jQuery Mobile에서 지원하는 다양한 클래스를 이용하여, form, 반응형웹, 테마등을 설정할 수 있다.