これもiOSにはデフォルトである機能なのですが、ヘッダーを表示する方法について
Header structureを読みながら実装した結果、下記のようになりました。
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <script> jQuery(function(){ var ul = $('ul'); var li = $('li',ul); var liLen = li.length; for(var i=0;i<liLen;i++){ $('a',$(li[i])).click(function(){ //$.mobile.showPageLoadingMsg(); $.mobile.changePage('./test02.html'); }); } }); </script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Page title</h1> </div> <div data-role="content"> <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> </div> </div> </body> </html> |
| <div data-role="header" data-position="inline" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Page title</h1> </div> |
0 コメント:
コメントを投稿