Mobile Web TEST PAGE LINK

Mobile Page Test - 버전 별 에러가 발생하므로 jquerymobile.com 에서 추천하는 버전 사용

• jquery.mobile-1.0.1.css
• jquery-1.6.4.js
• jquery.mobile-1.0.1.js

* css 다운로드 이후 사용시 images 폴더 이미지도 다운받아야 함

참고 URL :
    - http://jquery.com/ , http://jquerymobile.com/

Mobile Web TEST : 디자인 없이 jquery_mobile CSS 로만 UI 구성, 테스트 하였습니다.

1. Listview

 1) Listview, 간단한 페이지 레이아웃(listview) 테스트

    - http://www.spatium.co.kr/test/jQuery/m_listview.html

 2) Listview, 동일 페이지 css 를 이용, 다른 페이지 처럼 처리( 소스상 한 파일에 존재 but 두페이지 처럼 처리)

    - http://www.spatium.co.kr/test/jQuery/m_listview_otherpage.html

 3)  Listview, 위 2번에서 페이지 이동 시 효과

    - http://www.spatium.co.kr/test/jQuery/m_listview_otherpage_eff.html

 4) Listview + list-divider, 테스트

    - http://www.spatium.co.kr/test/jQuery/m_listview_divider.html

 5) Listview + 그룹핑, 처리

    - http://www.spatium.co.kr/test/jQuery/m_listview_group.html

 6) Listview + 그룹핑, 추가 설명과 카운터

    - http://www.spatium.co.kr/test/jQuery/m_listview_group_desc.html

 7) Listview + 그룹핑 add ImageIcon

    - http://www.spatium.co.kr/test/jQuery/m_listview_group_image.html

 8) Listview + data-filter 사용, 검색

    - http://www.spatium.co.kr/test/jQuery/m_listview_datafilter.html

2. Input Type

 1) Input, test & password

    - http://www.spatium.co.kr/test/jQuery/m_input_text.html

 2) Input, radio & checkbox

    - http://www.spatium.co.kr/test/jQuery/m_input_radio.html

 3) Input, select & textarea Tag

    - http://www.spatium.co.kr/test/jQuery/m_input_select.html

 4) Input, range(slider) & search type

    - http://www.spatium.co.kr/test/jQuery/m_input_slider.html

 5) Collapsible(Accordion)

    - http://www.spatium.co.kr/test/jQuery/m_accordion.html

 6) Collapsible-set

    - http://www.spatium.co.kr/test/jQuery/m_accordion_set.html

3. UI (Layout)

 1) ui-grid

    - http://www.spatium.co.kr/test/jQuery/m_ui.html

    - test : http://www.spatium.co.kr/test/jQuery/m_ui_test.html

 2) Header & Footer Fixed ( fafault : data-position = inline )

    - http://www.spatium.co.kr/test/jQuery/m_ui_header_fixed.html

 3) navbar(Navigation bar) in header

    - http://www.spatium.co.kr/test/jQuery/m_ui_navbar.html

4. Geolocation

 1) geolocation

    - http://www.spatium.co.kr/test/jQuery/m_geolocation.html

5. Touch event

 1) Flick effect, 모바일에서 이미지를 터치 후 밀어서 다음 이미지 보기에 사용(PC 에서는 마우스로 이용)

    - http://www.spatium.co.kr/test/jQuery/flick.html