Xiaoqiang의 HTML5 모바일 개발 로드(47) - jquery 모바일 기본 페이지 프레임워크-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

Xiaoqiang의 HTML5 모바일 개발 로드(47) - jquery 모바일 기본 페이지 프레임워크

黄舟

Feb 15, 2017 pm 01:35 PM

1. 단일 컨테이너 페이지 구조

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
</body>
</html>

로그인 후 복사

설명: 페이지의 너비가 모바일 장치의 화면 너비와 동일하도록 브라우저의 확대/축소 너비와 수준을 설정합니다.

2. 다중 컨테이너 페이지 구조

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page" id="p1">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
            <a href="#p2">下一页</a>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
   	<p data-role="page" id="p2" data-add-back-btn="true">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
</body>
</html>

로그인 후 복사

설명: data-add-back-btn 속성은 페이지 왼쪽 상단에 "뒤로" 버튼을 추가할지 여부를 나타냅니다. 기본값은 false입니다.

또한 요소에 data-rel 속성을 추가하면 롤백을 구현할 수도 있습니다.

3. 외부 페이지 링크 전환

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page" id="p1">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<p>内容部分</p>
            <a href="#p2">下一页</a>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
   	<p data-role="page" id="p2" data-add-back-btn="true">
    	<p data-role="header">
        	<h1>标题</h1>
        </p>
        <p data-role="content">
        	<em style="float:right;padding-right:5px">
            	<a href="about.htm">访问外部页面</a>
            </em>
        </p>
        <p data-role="footer">
        	<h4>页脚</h4>
        </p>
    </p>
</body>
</html>

로그인 후 복사

rrree

ajax 모드로 페이지를 열지 않으려면 rel="external"을 추가하세요

< 링크 요소 🎜>4. 미리 로드 및 페이지 캐싱

<!DOCTYPE html> 
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<p data-role="page" data-add-back-btn="true">
    	<p data-role="header">
        	<h1>外部页面</h1>
        </p>
        <p data-role="content">
        	你好，感谢你的关注
        </p>
        <p data-role="footer">
        	<h1></h1>
        </p>
    </p>
</body>
</html>

로그인 후 복사

페이지 캐싱 기능을 사용하면 DOM 콘텐츠가 더 커집니다. 제때에 청소해야합니다.

페이지 컨테이너의 data-dom-cache를 true로 설정하세요. 페이지의 콘텐츠를 문서 캐시에 삽입하거나 js 코드를 통해 전역 속성을 설정할 수 있습니다.

        <p data-role="content">
        	<em style="float:right;padding-right:5px">
            	<a href="about.htm" data-prefetch="true">访问外部页面</a>
            </em>
        </p>

로그인 후 복사

위 내용은 jquery 모바일의 기본 페이지 프레임워크인 Xiaoqiang의 HTML5 모바일 개발 로드(47) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn)!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.