jQuery mobile

기본 사용법

참고

이번 튜토리얼은 아래의 자료를 참고로 작성되었다.

예제

아래는 jQuery mobile의 기본골격을 보여준다.

<!-- jQuery Mobile은 HTML5에 최적화 되어 있기 때문에 doctype으로 HTML5를 사용한다 -->
<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
        <!-- 모바일 디바이스를 위한 설정 -->
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
        <!-- jQuery mobile에서 사용하는 css, javascript. 아래 3개의 리소스를 로드해야 함 -->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 
<!-- data-role는 jQuery mobile에서 해당 엘리먼트가 어떤 UI인지를 지정한다. 아래 page는 이 엘리먼트가 가장 큰 단위인 페이지임을 의미한다. -->
<div data-role="page">
        <!-- 제목과 글로벌 메뉴를 표시하는 엘리먼트를 지정 -->
	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->
        <!-- 컨텐츠가 표시되는 영역을 지정 -->
	<div data-role="content">	
		<p>Hello world</p>		
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

jQuery Mobile의 기본

doctype은 HTML5의 것을 사용한다.

<!DOCTYPE html> 

모바일 환경을 위한 화면 정책을 지정한다. 사용자가 zoom 기능을 이용하지 못하게 하고, 장치의 스크린폭의 사이즈에 따라서 화면을 표시한다.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

head에 다음과 같은 파일을 인클루드 한다. 이 파일은 http://jquerymobile.com/download/ 를 통해서 다운받을수도 있고, CDN을 이용할수도 있다.

  • jquery.mobile.css
  • jquery.mobile.js
  • jquery.js

모든 페이지는 body 태그 안쪽에 속성이 data-role="page"인 엘리먼트로 시작된다.

data-role="content" 인 엘리먼트 안에 컨텐츠를 추가한다. 예를들어 list-view를 추가하고 싶다면 아래와 같이 한다.

<div data-role="content">	
	<ul data-role="listview" data-inset="true" data-filter="true">
		<li><a href="#">Acura</a></li>
		<li><a href="#">Audi</a></li>
		<li><a href="#">BMW</a></li>
		<li><a href="#">Cadillac</a></li>
		<li><a href="#">Ferrari</a></li>
	</ul>
</div>

전체소스

아래와 같은 UI가 표시된다.

jQuery mobile은 form 엘리먼트를 모바일에 맞는 UI로 자동으로 바꿔준다. 아래의 예제는 form 엘리먼트를 웹페이지에 삽입하는 방법을 보여준다.

<form>
   <label for="slider-0">Input slider:</label>
   <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />
</form>

버튼을 추가하려면 아래와 a 태그를 사용하고 data-role의 값으로 button을 부여한다. 버튼에 아이콘을 부가하려면 data-icon 속성을 이용한다.

<a href="#" data-role="button" data-icon="star">Star button</a>

댓글

댓글 본문
  1. 허공
    감사합니다!
  2. whdk
    로컬에서 파일을 불러오면 잘되는데 GITHUB에 올려서 인터넷을 거치면 왜 Jquery mobile 이 적용이 안될까요?
    익스플로러,크롬,사파리,파폭에서 다 적용 안되고, 폰에서 들어가도 적용이 안됩니다.

    로컬 각 브라우저들에서 파일을 불러오면 정상적으로 잘 적용됩니다..
    조언 부탁드립니다ㅜ

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>My Fitness</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    </head>
  3. NGiveup
    대단히 좋네요~~
  4. hayasi
    멋지네요...초간단...
  5. JustStudy
    고맙습니다
  6. WayneKing
    오홍~~~
  7. 툰아미
    크롬에서 작동이 안되고, 콘솔에 "Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL'"라는 내용이 보이면, 아래처럼 중간에 자바스크립트 코드를 끼워넣으면 잘 되요.
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    $(document).bind('mobileinit',function(){
    $.mobile.changePage.defaults.changeHash = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false; // 위 두줄은 필요없고, 이 코드만 있으면 된다고 하는 내용도 있네요.
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


    출처: http://stackoverflow.com......-be

    더 찾아보면 웹 서버나 톰캣으로 올려놓고 실행하면, 위의 코드 없이도 정상적으로 실행된다는 내용이 있어요.
    많이 찾아보지는 않았는데, 근본적인 원인은 크롬 브라우저에 있는 게 아닌가 싶네요.
  8. 초보웹 개발자
    basic.html이 크롬과 오페라에서는 작동이 안됩니다.
    IE와 Mozilla에서는 잘되는군요
    localhost를 통하여 접속하면 구글과 오페라에서도 수행이 됩니다.

    이유가 몹시 궁금하긴 합니다.
  9. basicb
    크롬에서 작동하게 하려면 어떻게 해야 하나요? 익스플로러의 경우 '차단된 컨텐츠 허용'을 누르니 되었고 파이어폭스는 애초에 잘 되었는데 크롬은 계속해서 로딩화면 비슷한 문구가 뜨네요?

    더불어서 현재 구글 jQuery를 사용하고자 하면 path는 없고 2가지의 x snippet 있던데 차이점은 또 무엇인지...

    일단, 작동은 잘되서 진도를 쭉 뺄 예정이긴 하지만 궁금한 점이 있어 글 남겨봅니다.
  10. imkurtkim
    감사합니다.
  11. mycall
    1.4.0 이상부터는컨텐츠영역인 data-role="content" 가 role="main" class="ui-content"로
    바뀌었네요. http://demos.jquerymobile.com......es/
    그런대 문제는 없는듯합니다.. 강의보면서 공식사이트 보다 보니 발견했네요.
  12. eagles70
    파이어폭스에서는 작동을 하는데 크롬에서는 작동을 안하네요^^;;;
    어떻게 해야 할까요??
  13. 개발자
    가장큰 단점은...
    특정 스크립트들을 함께 쓸 수 없는 경우들이 생깁니다.
    그래서 해당 페이지만 jquery 코드를 제거 했더니...
    링크에 연속성이 있어서 jquery 코드가 하나도 없는 데도 불구하고 jquery 영향을 받아 키보드로 새로고침을 다시 해 줘야 영향을 벗어나더군요..

    따라서 jquery를 쓰게 되면 모든 페이지를 jquery로 써야 하고 중간에 제외할 수 가 없습니다.
    이로인해 시간 들여 한참 만들다가 전부 제거해 버렸네요..
  14. 코딩!
    잘 됩니다! ^__^ ㄱㄱㄱ
  15. gam4000@gmail.com
    좋습니다~~ 잘보고있습니다
  16. 유기농브래드
    출퇴근 길에 쉽게 볼 수 있어서 너무 좋습니다.
    강의 감사합니다~*
  17. 악동
    좋은 강의 감사합니다. 재미있게 잘 듣고 있습니다.

    한가지 문의 사항이 있습니다. jquerymobile가 터치 이벤트도 지원하나요?
  18. 어디다써
    목소리가 좋으시네요
  19. 뻐이짱
    정말 귀한 강좌 감사합니다.
    저도 님처럼 가르칠 수 있었으면 좋겠습니다.
    다시 한번 감사드려요^^
  20. 서하
    오오오오... 강의 정말 짱이에요!궁금했던 부분 쏙쏙 배우고 갑니다
    감사합니다!!
  21. 고맙습니다. 복받으실거예요. 좋은일 하셔서,,모르는 사람에게 가르침을 주는 건 더 좋은일이니
  22. SungKyu Hong
    잘보고 있습니다^^ 그런데 제 경우는 한글을 표시할 때 에러가 나네요-_ㅠHTML 강의에서 배운<meta content="text/html;charset=utf-8" http-equiv="Content-Type">메타태그로 해결하였습니다!
  23. Jae Sung So
    1부 잘 봤습니다 . 마지막 10초는 잘 안 보이는뎅요. 저는 멈추네요. 확인부탁요.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기