jQuery Mobile 예제

jQuery Mobile 페이지

기본적인 모바일 웹 페이지
다중 페이지
대화 상자

예제 설명

jQuery Mobile 전환

빛내림 빛내림 효과
페이지 전환 효과
스트림 효과
팝업 효과
스크롤 효과
스크롤 애니메이션 효과
위로 스크롤 효과
아래로 스크롤 효과
페이지 전환 효과
이동 효과 없음
반전 효과

예제 설명

jQuery Mobile 버튼

버튼을 생성하세요
행 내부 버튼
버튼 그룹
뒤로 가기 버튼
둥글고 둥글지 않은 버튼
소형과 일반 크기의 버튼
그림자가 있는 버튼과 없는 버튼

예제 설명

jQuery Mobile 버튼 아이콘

버튼에 아이콘을 추가하세요
아이콘을 정위치하세요
아이콘만 표시하세요

예제 설명

jQuery Mobile 도구栏

헤더와 푸터를 생성하세요
헤더에 버튼을 추가하세요
헤더에 왼쪽으로 버튼 추가
헤더에 오른쪽으로 버튼 추가
버튼을 포함한 푸터
가운데 정렬된 버튼을 포함한 푸터
그룹 버튼을 포함한 푸터
수평 그룹 버튼을 포함한 푸터
행 내 정위치 - 헤더와 푸터가 페이지 콘텐츠와 행 내 정위치
고정 정위치 - 헤더와 푸터가 페이지 상단과 하단에 유지됩니다
전체 화면 정위치 - 페이지와 푸터가 상단과 하단에 위치하지만 여전히 페이지 콘텐츠 위에 있습니다

예제 설명

jQuery Mobile 네비게이션 바

네비게이션 바 생성
콘텐츠에 네비게이션 바
푸터에 네비게이션 바
네비게이션 바에 버튼에 선택된 외관(누른 상태) 추가
선택된 외관(누른 상태) 추가
네비게이션 바에 아이콘 위치
네비게이션 바에 열려 있는 열 개의 버튼을 데모

예제 설명

jQuery Mobile 접折叠

내용 패드 블록 생성
페이지 로드될 때 내용 펼치기
내장된 패드 블록
패드 콜렉션(필리버드)
패드 블록의 둥근 모서리 제거
패드 블록을 더 작게 만들기
패드 블록의 아이콘 변경
패드리스트
패드폼

예제 설명

jQuery Mobile 그리드

두 칸 레이아웃
세 칸 레이아웃
네 칸 레이아웃
다섯 칸 레이아웃
커스터마이즈드 그리드
칸에 다중 행

예제 설명

jQuery Mobile 리스트

리스트 뷰 생성
둥근 모서리를 가진 리스트 뷰
리스트 구분 기호
자동 구분 기호
검색 필터 생성
검색 상자에 텍스트 변경
읽기 전용 리스트 생성
리스트 항목에 슬라이드쇼 추가
정보를 포함한 리스트에 표준 HTML을 채우기
리스트 항목에 아이콘 추가
구분 버튼을 포함한 리스트 생성
리스트 항목의 기능성 강화
카운트 팝업 생성
리스트 항목의 기본 링크 아이콘 변경
패드리스트
캘린더 생성

예제 설명

jQuery Mobile 폼

텍스트 입력
텍스트 박스
검색 입력
단일 선택 버튼
체크박스
단일 선택 버튼과 체크박스를 수평으로 조합
단일 선택 버튼과 체크박스를 포함한 필드 컨테이너
선택된 단일 선택 버튼과 체크박스
선택 메뉴 생성
구분자를 포함한 선택 메뉴 (optgroup) 생성
커스터마이즈드 선택 메뉴
선택 메뉴에서 여러 옵션 선택
복합 선택 메뉴
수평 복합 선택 메뉴
선택된 옵션
패드폼
슬라이더 컨트롤 생성
스ライ더 값까지 강조된 트랙
범위 슬라이더(중복)
스위치 토글 생성
선택된 스위치 토글

예제 설명

jQuery Mobile 테마

테마 "a"
테마 "b"
테마 "c"
테마 "d"
테마 "e"
테마화된 헤더, 내용, 푸터
테마화된 다이얼로그
테마화된 버튼
테마화된 아이콘
헤더와 푸터에 테마화된 버튼
테마화된 네비게이션 바
테마화된 패드버튼과 내용
테마화된 리스트
테마화된 나누기 버튼
테마화된 패드리스트
테마화된 폼
테마화된 패드폼
커스터마이즈드 테마

예제 설명

jQuery Mobile 이벤트

Tap 이벤트
Taphold 이벤트
Swipe 이벤트
Swipeleft 이벤트
Swiperight 이벤트
Scrollstart 이벤트
Scrollstop 이벤트
Orientationchange 이벤트 - 방향 표시
Orientationchange 이벤트 - 수평 및 수직 방향에 대해 다른 스타일을 설정
페이지 초기화 이벤트
페이지 로드 이벤트
페이지 전환 이벤트

예제 설명