Hello World?

JQUERY MOBILE 시작 본문

JQUERY/MOBILE

JQUERY MOBILE 시작

쮠이 2015. 11. 27. 00:37

1. 라이브러리 다운로드

   http://jquery.com/ 에서 jquery last statable 버젼을 다운 받는다 ( 예제는 2.1.4 를 받았다 )

   http://jquerymobile.com/ 에서 jquerymobile last statable 버젼을 다운 받는다 ( 예제는 1.4.5 를 받았다 )

   http://jqueryui.com/ 에서 jqueryui last statable 버젼을 다운 받는다 ( 예제는 1.4.5 를 받았다 )

 

 

2. 디렉토리 구성

   include 를 생성하고, 아래에 jquery 를 모두 몰아 넣었다 

 

          - jquery 디렉토리 안에 모두 넣은 이유는 각각 파일이름이 틀리고, 한곳에 둬서 관리하기 위함이다

            (좀 무식한 방법이긴 하지만, 디렉토리별로 관리를 따로 하는 경우도 있다)

 

 

3. 테스트 페이지 작성

 

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, height=device-height,inital-scale=1"/>
            <link rel="stylesheet" href="/include/jquery/jquery.mobile-1.4.5.min.css" />
            <script src="/include/jquery/jquery-2.1.4.min.js"></script>
            <script src="/include/jquery/jquery.mobile-1.4.5.min.js"></script>
            <title>JQUERY MOBILE TEST</title>
        </head>
        <body>

             <div data-role="page">
                 <div data-role="header">
                       <h1>헤더</h1>
                  </div>
  
                  <div data-role="content">
                       <p>안녕하세요</p>
                       <p>이 영역은 콘텐츠 영역입니다</p>
                  </div>
  
                  <div data-role="footer">
                       <h1>풋터</h1>
                  </div>
         </div>


    </body>
    </html>

 

3. 위의 결과는 아래와 같다

 

 

 

이상은 간단한 화면만 만들어 보았다.

다음은 링크화면을 만들어 보도록 하겠다

 

'JQUERY > MOBILE' 카테고리의 다른 글

JQuery Mobile 오브젝트 사용  (0) 2015.12.02
'JQUERY/MOBILE' Related Articles more