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