JQM panel使用实例

工程中需要这样的要求，点击左上角的图标打开或关闭panel，按返回键（针对android）如果panel处于open状态就退出App，否则先打开panel，再按下返回键才退出App。

本工程使用的是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/