최신 웹 개발 튜토리얼
 

jQuery Mobile시작하다


귀하의 웹 페이지에 jQuery를 모바일 추가

웹 사이트에 jQuery를 모바일을 추가하는 방법은 두 가지가 있습니다. 당신은 할 수 있습니다 :

  • 는 CDN에 저장된 jQuery를 모바일 라이브러리에 링크 (권장)
  • 컴퓨터에 저장된 jQuery를 모바일 라이브러리에 링크

는 CDN에서 jQuery를 모바일 링크

CDN (콘텐츠 전송 네트워크)는 웹에서 자주 사용하는 파일을 배포하는 데 사용됩니다.
이것은 사용자에게 더 빠른 다운로드 속도를 만든다.

jQuery를 코어와 마찬가지로, 사용자 컴퓨터에 설치하는 것은 없다; 당신은 다음과 같은 스타일 시트 포함 (.css) 및 자바 스크립트 라이브러리 (.js) jQuery를 모바일 작업을 얻을 수있는 직접 HTML 페이지에를 :

jQuery를 모바일 CDN :

<head>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
»그것을 자신을 시도

뷰포트 <meta> 내부 태그 <head> 요소는 브라우저가 페이지 줌 레벨과 크기를 제어하는 방법을 지정합니다.

width=device-width (기기에 따라 다름) 장치의 화면 폭을 따라 페이지의 폭을 설정한다.

initial-scale=1 페이지가 첫번째 브라우저에 의해로드되는 초기 줌 레벨을 설정한다.


jQuery를 모바일 링크는 컴퓨터에 저장

당신이 jQuery를 모바일 라이브러리를 직접 호스팅하려면 먼저에서 다운로드해야합니다 jQuerymobile.com .

그런 다음 페이지에 다음 코드를 추가합니다 :

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>

팁 : 당신이 그것을 사용하고자하는 페이지와 동일한 디렉토리에 다운로드 한 파일을 배치합니다.

우리가하지 않는 이유가 궁금하십니까 type="text/javascript" 내부 <script> 태그를?

이것은 HTML5에 필요하지 않습니다. 자바 스크립트는 HTML5와 모든 최신 브라우저에서 기본 스크립트 언어입니다!