jQueryMobile1.4.5をダウンロード後Demoフォルダ内に以下HTMLファイルを作成し実行してください。
基本的な使い方
jQueryMobileBasic.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile1.4.5基本</title> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script></head><body><!-- Start of first page: #home --><div data-role="page" id="home" data-theme="a"> <div data-role="header"> <h1>jQueryMobile1.4.5基本</h1> <a href="#info" data-icon="info" data-iconpos="notext" class="ui-btn-right">Info</a> </div><!-- /header --> <div role="main" class="ui-content"> <h2>解説</h2> <p>このページは全てindex.htmlに記述されています。</p> </div><!-- /content --> <div data-role="footer" data-theme="a"> <h4>© 2022 dianxnao.com</h4> </div><!-- /footer --></div><!-- /page home --><!-- Start of information page: #info --><div data-role="page" id="info" data-theme="a"> <div data-role="header"> <h1>Info</h1> <a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a> </div><!-- /header --> <div role="main" class="ui-content"> <p>これもindex.htmlの内容です。</p> </div><!-- /content --> <div data-role="footer"> <h4>© 2022 dianxnao.com</h4> </div><!-- /footer --></div><!-- /page info --></body></html> |
ボタンやリンクのサンプル
jQueryMobileSample.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile1.4.5サンプル</title> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script></head><body><!-- Start of first page: #home --><div data-role="page" id="home" data-theme="a"> <div data-role="header"> <h1>jQueryMobile1.4.5サンプル</h1> <a href="#info" data-icon="info" data-iconpos="notext" class="ui-btn-right">Info</a> </div><!-- /header --> <div role="main" class="ui-content"> <h2>メインコンテンツ</h2> <p>夏草や 兵どもが 夢の跡</p> <p><a href="#two">通常リンク（⇒ページ2へ）</a></p> <h3>ボタンの書き方</h3> <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">2ページ目へ</a></p> <p><a href="#popup" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">ダイアログページへのリンク</a></p> </div><!-- /content --> <div data-role="footer" data-theme="a"> <h4>© 2022 dianxnao.com</h4> </div><!-- /footer --></div><!-- /page home --><!-- Start of second page: #two --><div data-role="page" id="two" data-theme="a"> <div data-role="header"> <h1>サブコンテンツ（ページ2）</h1> <a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a> <a href="#info" data-icon="info" data-iconpos="notext" class="ui-btn-right">Info</a> </div><!-- /header --> <div role="main" class="ui-content"> <h2>jQueryMobile</h2> <p>デフォルトテーマは白と青を基調とした”a”と黒を基調とした”b”の2種類<br>もちろんオリジナルテーマも作成できる</p> <p><a href="#home" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">ホームに戻る</a></p> </div><!-- /content --> <div data-role="footer"> <h4>© 2022 dianxnao.com</h4> </div><!-- /footer --></div><!-- /page two --><!-- Start of third page: #popup --><div data-role="page" id="popup"> <div data-role="header" data-theme="b"> <h1>ダイアログ</h1> </div><!-- /header --> <div role="main" class="ui-content"> <h2>ダイアログ</h2> <p>ポップアップのダイアログページもできます。アップロードしないと動作しない可能性はありますが。</p> <p><a href="#home" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">ホームに戻る</a></p> </div><!-- /content --> <div data-role="footer"> <h4>© 2022 dianxnao.com</h4> </div><!-- /footer --></div><!-- /page popup --><!-- Start of information page: #info --><div data-role="page" id="info" data-theme="a"> <div data-role="header"> <h1>情報ページ</h1> <a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a> </div><!-- /header --> <div role="main" class="ui-content"> <h2>情報ページ</h2> <p>このようにページ上部のアイコンボタンでアプリっぽくできます。</p> </div><!-- /content --> <div data-role="footer"> <h4>© 2022 dianxnao.com</h4> </div><!-- /footer --></div><!-- /page info --></body></html> |
コメント