Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기-HTML 튜토리얼-php.cn

第 4 页

页面脚注

집

웹 프론트엔드

HTML 튜토리얼

Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

黄舟

Feb 04, 2017 pm 02:01 PM

1. jQuery Mobile 다운로드

다운로드 주소: http://jquerymobile.com/

다운로드

Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

를 클릭하여 다운로드하세요. 다운로드 성공 후 zip 패키지

Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

는 아래와 같습니다

Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

압축 해제된 디렉터리는 아래와 같습니다.

Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

index.html을 클릭하시면 다양한 예시가 있는 데모 홈페이지로 들어가실 수 있습니다.

2. JQuery 모바일 Helloword 만들기

1. 데모 만들기

Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

2. 🎜 >

3. 사이트가 성공적으로 구축된 후 생성된 데모를 Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

index.html Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기

<!DOCTYPE html>   
<html>  
<head>  
<meta charset="utf-8">  
<title>jQuery Mobile Web 应用程序</title>  
<link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>  
<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>  
</head>   
<body>   
  
<div data-role="page" id="page">  
    <div data-role="header">  
        <h1 id="第-nbsp-nbsp-页">第 1 页</h1>  
    </div>  
    <div data-role="content">   
        <ul data-role="listview">  
            <li><a href="#page2">第 2 页</a></li>  
            <li><a href="#page3">第 3 页</a></li>  
            <li><a href="#page4">第 4 页</a></li>  
        </ul>       
    </div>  
    <div data-role="footer">  
        <h4 id="页面脚注">页面脚注</h4>  
    </div>  
</div>  
  
<div data-role="page" id="page2">  
    <div data-role="header">  
        <h1 id="第-nbsp-nbsp-页">第 2 页</h1>  
    </div>  
    <div data-role="content">   
        内容        
    </div>  
    <div data-role="footer">  
        <h4 id="页面脚注">页面脚注</h4>  
    </div>  
</div>  
  
<div data-role="page" id="page3">  
    <div data-role="header">  
        <h1 id="第-nbsp-nbsp-页">第 3 页</h1>  
    </div>  
    <div data-role="content">   
        内容        
    </div>  
    <div data-role="footer">  
        <h4 id="页面脚注">页面脚注</h4>  
    </div>  
</div>  
  
<div data-role="page" id="page4">  
    <div data-role="header">  
        <h1 id="第-nbsp-nbsp-页">第 4 页</h1>  
    </div>  
    <div data-role="content">   
        内容        
    </div>  
    <div data-role="footer">  
        <h4 id="页面脚注">页面脚注</h4>  
    </div>  
</div>  
  
</body>  
</html>

로그인 후 복사

사이트에 복사합니다. 크롬 브라우저 실행 결과:

실제 휴대폰에서 apk로 패키징했을 때의 효과는 다음과 같습니다. Xiaoqiang의 HTML5 모바일 개발 로드(23) - jQuery Mobile 시작하기