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>
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>
<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)!