jQuery mobileでのナビゲーションバーとデフォルト設定 メモ
確認ページ：hello_jQuery_mobile_navbar.html
- ナビゲーションバーの属性は、data-role=”navbar”
- 選択状態は、class=”ui-btn-active”を指定
- デフォルト設定は、mobileinitイベントのハンドラで設定
-
mobileinitイベントはすぐ実行されるから、この順で書くといいみたい。
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
- アニメーションをOFFにするには、defaultPageTransitionをnoneに設定
ナビゲーションバー
<div data-role="page" id="home"> <div data-role="header"> <h1>jQuery Mobileのナビゲーションバー</h1> <div data-role="navbar"> <ul> <li><a href="#page-a" class="ui-btn-active">aaa</a></li> <li><a href="#page-b">bbb</a></li> </ul> </div><!-- navbar --> </div> <div data-role="content" align="center"> </div> <div data-role="footer"> <h4>Copyright 2012</h4> </div> </div> <div data-role="page" id="page-a"> <div data-role="header"> <h1>jQuery Mobileのナビゲーションバー</h1> <div data-role="navbar"> <ul> <li><a href="#page-a" class="ui-btn-active">aaa</a></li> <li><a href="#page-b">bbb</a></li> </ul> </div><!-- navbar --> </div> <div data-role="content" align="center"> <h1>page-a</h1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div data-role="footer"> <h4>Copyright 2012</h4> </div> </div> <div data-role="page" id="page-b"> <div data-role="header"> <h1>jQuery Mobileのナビゲーションバー</h1> <div data-role="navbar"> <ul> <li><a href="#page-a">aaa</a></li> <li><a href="#page-b" class="ui-btn-active">bbb</a></li> </ul> </div><!-- navbar --> </div> <div data-role="content" align="center"> <h1>page-b</h1> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div data-role="footer"> <h4>Copyright 2012</h4> </div> </div>
デフォルト設定
<script type="text/javascript">
$(document).bind('mobileinit', function() {
$.mobile.defaultPageTransition = 'none';
});
</script>
参考サイト
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)
posted with amazlet at 12.04.13
西畑一馬 鍋坂理恵
アスキー・メディアワークス
売り上げランキング: 1583
アスキー・メディアワークス
売り上げランキング: 1583
関連エントリー
