■ jQuery Mobile 설정하기.
01. jQuery Mobile(http://jquerymobile.com) 사이트에 접속하여 상단 메뉴에서 Download를 클릭한다.
02. 사용할 버전을 선택하고 Zip File을 다운받는다.
① 포스트 작성일 기준 가장 최신의 버전의 jquery.mobile-1.4.5.zip 파일을 클릭한다.
② 다운로드 창이 뜨면 확인을 눌러 jquery.mobile-1.4.5.zip 파일을 다운받는다.
03. 다운받은 jquery.mobile-1.4.5.zip 파일의 압축 해제한다.
04. 압축을 해제한 jquery.mobile-1.4.5 폴더에서 *.css 파일을 따로 빼내두자.
① jquery.mobile-1.4.5.css, jquery.mobile-1.4.5.min.css 파일을 복사하여
② 프로젝트를 진해할 css 폴더에 위치시킨다.
05 이번에틑 jquery.mobile-1.4.5 폴더에서 필요한 *.js 파일을 따로 빼내두자.
① jquery.mobile-1.4.5.js, jquery.mobile-1.4.5.min.js 파일을 복사하여
06. 다음으로 함께 사용할 jqueyr.js 파일을 다운받기위해 jQuery(https://code.jquery.com/jquery)사이트에 접속한다.
① 다운받을 버전을 정하고 minifed를 클릭한다.
② Code Integration 이라고 팝업창이 뜨면 해당 jQuery의 URL을 복사한다.
※ jquery.mobile-1.4.5 버전 기준으로 jquery는 최대 jQuery 2 버전때까지만 사용이 가능하다.
07. 06의 ②번에서 복사한 페이지로 이동하고 표시되는 모든 내용을 복사한다.
08. 메모장등의 TEXT 편집기에 05번에서 복사한 내용을 붙여놓고 jquery-2.2.4.min.js 파일로 만들어서 저장한다.
09. 생성한 jquery-2.2.4.min.js 파일을 위에서 생성한 js파일과 같이 묶어준다.
10. 이제 jQuery Mobile이 제대로 세팅되었는지 아래와 같은 파일을 만들어서 실행시켜 보자.
index.php |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
11. 아래와 같은 출력결과가 나오면 jQuery Mobile의 설정이 정상적으로 완료된 것이다.
'jQuery > jQueryMobile' 카테고리의 다른 글
| [jQueyrMobile] 아이콘 사용하기 (0) | 2016.10.21 |
|---|---|
| [jQueyrMobile] 리스트 구분자 사용 및 그룹화 (0) | 2016.10.21 |
| [jQueyrMobile] 다이얼로그(알림) 창 띄우기 (0) | 2016.10.21 |
| [jQueyrMobile] 페이지 이동간 슬라이드 애니메이션 (0) | 2016.10.21 |
| [jQueryMobile] 내부 페이지 이동 및 Back 버튼 추가 (0) | 2016.10.21 |
