제이쿼리 모바일 (jQuery mobile) 기본 링크 걸기

제이쿼리 모바일 (jQuery mobile) 기본 링크 걸기

앞에 작성했었던 포스팅에서 제이쿼리 모바일(jQuery mobile)의 기본 UI에 대해서 포스팅했던적이 있었습니다.

이번엔 그때 그 코드들을 좀 더 세분화 설명을 해볼까 합니다.

하이브리드 앱을 하게 되면, 기본적으로 제이쿼리를 필연적으로 사용하게 됩니다.

따라서, 기본적으로 제이쿼리가 링크 걸려 있어야 합니다.

이클립스에서 폰갭을 실행했을 때 기본으로 올라오는 코드들입니다.

언듯 보면, 빨간 상자만 지우고 그냥 사용해도 무관해 보이지만,

그대로 사용했다가는 제이쿼리도 먹지 않고,

제이쿼리 모바일에서 기본적으로 제공하는 UI도 사용할 수 없습니다.

사용하려면 어떻게 해야 할까요?

멀리 가지 않아도 바로 사용할 수있는 방법 중 하나는 

생성된 파일에 보면 우리가 코딩 하는 'index'파일이 들어있는 

'assets'폴더안에 보면 기본적으로 딸려있는 파일이 있습니다.

버전은 낮지만, 제이쿼리 모바일에서 제공하는 파일들 맞습니다.

<link>와 <script>를 시켜주는 건 'min'이라고 적혀있는 파일들을 시켜줄 예정입니다.

('min'이라고 적혀있는 건 압축해 배포용으로 작성됬다는 의미라고 합니다.)

각각 열어보시면, 여러가지 소스들이 쭉 나열되어 있는 걸 보실 수있습니다.

 

'jquery-1.7.2.min'파일에는 순수(?) 제이쿼리가 작성되어 있습니다.

제이쿼리 모바일 자체가 기본적으로 제이쿼리에서 시작이 되다보니 제이쿼리 자체코드도 연결이 되어있어야 합니다.

'jquery.mobile-1.1.0.min.css' 파일은 여러 클래스 스타일이 적혀있는데, 

여기서는 다양한 테마와 아이콘등을 표시하는 스타일 시트입니다.

마지막 남은 'jquery.mobile-1.1.0.min.js'는 본격적인 제이쿼리 모바일의 실제 자바 스크립트입니다.

이 파일에서 모든 동작이 일어난다고 해도 과언은 아니지요!

즉 이 파일이 없다면, 

제이쿼리가 하나도 실행이 안되는 거죠!

이 파일들을 기본적으로 위에 상자처럼 경로를 정확히 입력해 링크를 걸어주시면,

사용이 가능합니다.

여기서 주의할 점이 있다면 <link>와 <script>순으로 작성해야 한다는 건데요.

순서가 바뀌게 되면, 오작동을 하게됩니다.

주의해 주세요:D

요런 방법으로 기존에 있는 파일에 링크를 걸어 사용하는 것도 가능하지만,

제이쿼리 모바일 사이트에서 제공하는 링크를 걸어주는 방법도 있습니다.

제이쿼리 모바일 바로가기

제이쿼리 모바일 페이지에 가서 Download창으로 갑니다.

보시면, 버전별로 파일들이 쭉있습니다.

빨간상자안에는 요것들이 링크가 걸려있습니다.

요걸 그대로 긁어가서 사용해도 동일하게 사용할 수 있습니다.

저는 상위 버전을 사용하기 위한 목적도 있지만, 편리하기도 해서 요방법을 주로 씁니다.ㅎㅎ

요 사이트를 잘 사용하게 된다면, 여러가지로 효과도 볼 수있습니다.

제이쿼리 모바일은 업그레이드 될 때 마다 기능이 추가되는 것 뿐 아니라,

기존에 있던 기능이 빠지기도 합니다.

원하는 기능이 각각 버전이 다르다면, 절망이겠죠?

상위 버전을 쓰다가 전 버전에서만 지원되던 모션이면 절망이죠..

그럴땐 위에 필요한 버전의 필요한 파일들을 그때 그때 받아서 링크를 걸어 사용하는 것도 가능합니다.

하지만, 링크를 걸땐 충분히 주의해서 사용해주세요!