최신 웹 개발 튜토리얼
 

jQuery Mobile예


jQuery를 모바일 페이지

기본 모바일 웹 페이지
여러 페이지
대화 상자

예를 설명


jQuery를 모바일 전환

페이드 효과
플립 효과
효과 흐름
팝 효과
슬라이드 효과
Slidefade 효과
Slideup 효과
Slidedown 효과
효과를 켜고
어떤 전환 효과 없다
반전 효과

예를 설명


jQuery를 모바일 버튼

버튼을 만들고
인라인 버튼
그룹화 된 버튼
돌아 가기 버튼
버튼의 색상을 변경
또는 둥근 모서리없이 버튼
소형 또는 일반 크기 버튼
또는 그림자없이 버튼

예를 설명


jQuery를 모바일 단추 아이콘

버튼에 아이콘을 추가
더 많은 아이콘 추가 (버전에 도입 아이콘 1.4)
위치 아이콘
만 표시 아이콘
원 (디스크)을 제거 아이콘의 색상을 변경

예를 설명


jQuery를 모바일 팝업

기본 팝업 만들기
팝업에 패딩과 마진을 추가
오른쪽 닫기 버튼으로 팝업을 닫습니다
좌측 닫기 버튼으로 팝업을 닫습니다
Undismissible 팝업
위치 팝업
팝업을 전환
팝업 화살표
팝업 대화 상자
팝업 사진

예를 설명


jQuery를 모바일 도구 모음

헤더와 바닥 글 만들기
헤더에 버튼 추가
헤더에 왼쪽에 단추를 추가
헤더의 오른쪽에 단추를 추가
버튼을 사용하여 바닥 글
중앙 정렬 버튼 바닥 글
가로로 그룹화 된 버튼 바닥 글
인라인 위치 - 페이지의 콘텐츠와 머리글과 바닥 글 인라인
고정 된 위치 - 머리글과 바닥 글은 페이지의 상단과 하단에 위치한 상태로 유지됩니다
전체 화면 위치 - 머리글과 바닥 글은뿐만 아니라 페이지의 콘텐츠를, 상단과 하단에 위치 유지

예를 설명


jQuery를 모바일 네비게이션 바

내비게이션 막대 만들기
탐색 버튼의 아이콘
콘텐츠 탐색 바
바닥 글에 탐색 바
추가 선택 (누름) 탐색 모음에 버튼을 찾습니다
선택한 (누름) 추가 지속적으로보고
위치 아이콘 : 상단 정렬
위치 아이콘 : 오른쪽 정렬
위치 아이콘 : 하단 정렬
위치 아이콘 : 왼쪽 정렬
탐색 줄에 10 버튼의 데모

예를 설명


jQuery를 모바일 패널

기본 패널 만들기
닫기 버튼이있는 패널
패널 표시 변경
패널 오른쪽 위치
고정 패널 위치

예를 설명


jQuery를 모바일 Collapsibles

콘텐츠의 축소 블록 만들기
콘텐츠를 확장 할 때 페이지가로드
중첩 축소 블록
축소 세트 (아코디언)
collapsibles에 둥근 모서리를 제거
collapsibles 작게
collapsibles의 아이콘 변경
collapsibles의 아이콘 위치 변경

예를 설명


jQuery를 모바일 테이블

리플 로우 테이블 만들기
열 토글 테이블을 만듭니다
토글 테이블 버튼 텍스트 변경
테이블에 그림자를 추가
모든 테이블 행에 아래쪽 테두리를 추가
모든 테이블 행에 배경 색상을 추가

예를 설명


jQuery를 모바일 그리드

두 열 레이아웃
세 개의 열 레이아웃
네 열 레이아웃
다섯 열 레이아웃
그리드 사용자 지정
열이 내부에 여러 행

예를 설명


jQuery를 모바일 목록

목록보기 만들기
모서리가 둥근 목록보기
목록 분배기
Autodividers
읽기 전용 목록 만들기
목록 항목에 패널을 삽입
목록 항목에 대한 변경 기본 링크 아이콘
항목을 나열하는 아이콘 추가
항목을 나열하는 썸네일을 추가
정보리스트 아이템을 채우기 위해 HTML 요소를 추가
분할 버튼을 사용하여 목록 만들기
목록 항목이 더 많은 기능 확인
카운트 거품 만들기
팝업 목록
축소 목록
접을 수있는 팝업 목록
전체 폭 축소 목록
달력 만들기

예를 설명


jQuery를 모바일 필터

목록의 검색 필드 만들기
검색 필드 내부의 텍스트를 변경
사용자 정의 필터
접을 수있는 목록을 필터
필터 테이블
은 <DIV> 요소를 필터

예를 설명


jQuery를 모바일 양식

텍스트 입력
입력 버튼에 아이콘을 추가
입력에서 "일반"버튼을 추가
텍스트 영역
검색 입력
라디오 버튼
체크 박스
그룹 라디오 버튼과 수평 체크 박스
라디오 버튼과 체크 박스 필드 용기
사전 선택 라디오 버튼 / 확인란
팝업 내부의 양식을 놓고
자동 tappable 요소 스타일을 jQuery를 모바일 방지
선별 된 메뉴 만들기
칸막이 선택 메뉴 (OPTGROUP) 만들기
사용자 선택 메뉴
선택 메뉴에서 여러 옵션을 선택
그룹 선택 메뉴
가로 그룹 선택 메뉴
작게하다 선택 메뉴
옵션을 사전 선택
팝업 선택
접을 수있는 형태
기본 선택 아이콘 변경
아이콘 위치 변경
슬라이더 컨트롤을 만듭니다
슬라이더 버튼 값을보기
사용자가 슬라이드로 화면에 값 팝업 만들기
슬라이더 값 트랙을 강조
범위 슬라이더 (듀얼)
플립 토글 스위치 만들기
플립 스위치의 텍스트를 변경
플립 스위치를 사전 선택
플립 스위치를 스타일

예를 설명


jQuery를 모바일 테마

테마 "A"
테마 "B"
테마의 머리글과 바닥 글
테마 대화 상자
테마 버튼
테마 아이콘
테마 팝업
머리글과 바닥 글에서 테마 버튼
테마 탐색 바
테마 패널
축소 버튼과 콘텐츠를 테마
테마 목록
테마 분할 버튼
접을 수있는 목록을 테마
테마 양식
접을 수있는 형태의 테마
테마를 사용자 정의

예를 설명


jQuery를 모바일 이벤트

탭 이벤트
Taphold 이벤트
스 와이프 이벤트
Swipeleft 이벤트
Swiperight 이벤트
Scrollstart 이벤트
Scrollstop 이벤트
위해서 orientationchange 이벤트 - 경고 방향
위해서 orientationchange 이벤트 - 세로 및 가로에 대한 설정 다른 스타일
페이지 초기화 이벤트
페이지로드 이벤트
페이지 전환 이벤트

예를 설명