74回目授業内容 Safariの準備〜jQuery Mobile
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
Safari
- 詳細設定で開発メニューの表示をチェックする。
jQuery Mobile
- 基本を打ち込む(基本的な単一ページテンプレート)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!--/header--> <div data-role="content"> <p>Hello World</p> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> <form> <label for="slider-0">input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"> </form> <a href="#" data-role="button" data-icon="star" data-theme="b">Button</a> </div><!--/content--> <div data-role="footer"> <h4>Page Footer</h4> </div><!--/footer--> </div><!--/page--> </body> </html>
- 複数ページテンプレート
<body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!--header--> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><!--content--> <div data-role="footer"> <h4>Page Footer</h4> </div><!--footer--> </div><!--page--> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!--header--> <div data-role="content"> <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p> <p><a href="#foo">Back to foo</a></p> </div><!--content--> <div data-role="footer"> <h4>Page Footer</h4> </div><!--footer--> </div><!--page--> </body>
- Ajaxナビゲーションにおけるページタイトル
<div data-role="page" id="foo" data-title="Page Foo">
- ページ切替効果
- flip
<p>View internal page called <a href="#bar" data-transition="flip">bar</a></p>
-
- flow
<p>View internal page called <a href="#bar" data-transition="flow">bar</a></p>
- ダイアログの作成
- backBtnの作成
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.addBackBtn = true; }); </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
