本工程使用的是cordava+JQM
先看一下html:
<div data-role="page" id="homepage" data-theme="a"> <!-- data-swipe-close="true" data-display="overlay" or reveal or push --> <div data-role="panel" id="mypanel" data-position-fixed="true" data-position="left" data-display="push" data-theme="a" style="background:#2b2c30;" data-dismissible="false" data-animate="true" > <ul data-role="listview" data-inset="false" data-count-theme="c" data-icon="false"> <li id="home"><a href="#mypanel"><img src="img/ic_0.png"/><span class="menu_span">Home</span></a></li> <li id="orders"><a href="#my_orders_page"><img src="img/ic_1.png"/><span class="menu_span">Orders</span><span class="ui-li-count" id="orderNum">0</span></a></li> <li id="reward" onclick="toRewardsPage();"><a href="#"><img src="img/ic_9.png"/><span class="menu_span">Reward</span></a></li> <li id="prizes"><a href="#"><img src="img/ic_2.png"/><span class="menu_span">Scratch and Win</span></a></li> <li id="cards" onclick="toMyPaymentCardPage();"><a href="#"><img src="img/ic_3.png"/><span class="menu_span">My Payment Card</span></a></li> <li id="favorites"><a href="#my_favorites_page"><img src="img/ic_4.png"/><span class="menu_span">Favorites</span></a></li> <li id="settings"><a href="#setting_page"><img src="img/ic_5.png"/><span class="menu_span">Settings</span></a></li> <li id="signIn"><a href="#sign_in_page"><img src="img/ic_7.png"/><span class="menu_span">Sign In</span></a></li> <li id="signUp"><a href="#sign_up_page"><img src="img/ic_8.png"/><span class="menu_span">Sign Up</span></a></li> <li id="signOut"><a href="#" onclick="toSignOutPage();"><img src="img/ic_6.png" style="width:32px;height:32px;"/><span class="menu_span">Sign Out</span></a></li> </ul> </div> <div data-role="header" data-id="main" data-theme="a" data-position="fixed" data-tap-toggle = "false"> <a href="#mypanel" data-role="none" id="openPanel"><img src="img/btn_menu_normal.png"/></a> <h1>THE BURGER JOINT</h1> </div> <div data-role="content"> test </div> </div>
需要安装cordova device插件
<script type="text/javascript" charset="utf-8"> var isPanelOpen=false; $(document).ready(function() { $( "#homepage #mypanel" ).panel({ open: function( event, ui ) { isPanelOpen = true; }, close: function( event, ui ) { isPanelOpen = false; } }); //返回键 function onBackKeyDown(){ if(getActivePageId()=="homepage"){ if(isPanelOpen){ if(device.platform=="Android"){ navigator.app.exitApp(); } }else{ $( "#homepage #mypanel" ).panel( "open" ); } }else{ window.history.back(); } } // Cordova is ready function onDeviceReady() { document.addEventListener("backbutton", onBackKeyDown, false); //document.removeEventListener("backbutton", onBackKeyDown, false); //注销返回键 } initialize=function(){ document.addEventListener("deviceready", onDeviceReady, false); }; initialize(); }); </script>
panel Api参考: http://api.jquerymobile.com/panel/