jQuery Mobile-설정

이 장에서는 jQuery Mobile을 설치하고 설정하는 방법에 대해 설명합니다.

jQuery Mobile 다운로드

jquerymobile.com/ 링크를 열면 jQuery 모바일 라이브러리를 다운로드 할 수있는 두 가지 옵션이 있습니다.

Custom Download −이 버튼을 클릭하면 사용자 정의 된 라이브러리 버전을 다운로드 할 수 있습니다.
Latest Stable −이 버튼을 클릭하면 안정적인 최신 버전의 jQuery 모바일 라이브러리를 얻을 수 있습니다.

다운로드 빌더로 사용자 지정 다운로드

Download Builder를 사용하면 필요한 라이브러리 부분 만 포함하는 사용자 지정 빌드를 만들 수 있습니다. 이 새로운 사용자 정의 버전의 jQuery Mobile을 다운로드하면 다음 화면이 표시됩니다.

필요에 따라 라이브러리를 선택하고 Build My Download 단추.

안정적인 다운로드

최신 버전의 jQuery 모바일 라이브러리에 대한 CSS 및 JQuery 파일이 포함 된 ZIP 파일로 직접 연결되는 Stable 버튼을 클릭합니다 . ZIP 파일 컨텐츠를 jQuery 모바일 디렉토리로 추출하십시오.

이 버전에는 모든 종속성, 대규모 데모 모음 및 라이브러리의 단위 테스트 제품군을 포함한 모든 파일이 포함되어 있습니다. 이 버전은 시작하는 데 도움이됩니다.

CDN에서 jQuery 라이브러리 다운로드

CDN (Content Delivery Network)은 사용자에게 파일을 제공하도록 설계된 서버 네트워크입니다. 웹 페이지에서 CDN 링크를 사용하면 파일 호스팅 책임이 자체 서버에서 일련의 외부 서버로 이동합니다. 또한 웹 페이지 방문자가 동일한 CDN에서 jQuery 모바일 사본을 이미 다운로드 한 경우 다시 다운로드 할 필요가 없다는 이점도 있습니다. 다음 CDN 파일을 HTML 문서에 포함 할 수 있습니다.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

이 튜토리얼 전체에서 라이브러리의 CDN 버전을 사용하고 있습니다. AMPPS (AMPPS는 Apache, MySQL, MongoDB, PHP, Perl 및 Python의 WAMP, MAMP 및 LAMP 스택) 서버를 사용하여 모든 예제를 실행합니다.

예

다음은 jQuery Mobile의 간단한 예입니다.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

위 코드의 세부 사항은-

이 코드는 헤드 요소 내부에 지정됩니다.

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

뷰포트는 페이지 확대 / 축소 수준 및 크기를 표시하도록 지정하는 데 사용됩니다 (브라우저에서).
content = "width = device-width"는 페이지 또는 화면 장치의 픽셀 너비를 설정하는 데 사용됩니다.
initial-scale = 1은 페이지가 처음로드 될 때 초기 확대 / 축소 수준을 설정합니다.

다음 CDN 포함

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>