Xiaoqiang의 HTML5 모바일 개발 로드(47) - jquery 모바일 기본 페이지 프레임워크
- 黄舟원래의
- 2017-02-15 13:35:541491검색
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>설명: 08f885793eb5d32494ec201ae94b3b56페이지의 너비가 모바일 장치의 화면 너비와 동일하도록 브라우저의 확대/축소 너비와 수준을 설정합니다.
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입니다.
또한 3499910bf9dac5ae3c52d5ede7383485 요소에 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>rrreeajax 모드로 페이지를 열지 않으려면 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으로 문의하세요.