剑人网phonegap手机开发系列教程第九讲jquery mobile面板panel详解

1.合作 1.面板具有灵活的设计，可以用于导航，登录，以及<div<divdata-role="panel"id="left-panel"data-<ahref="#"data-rel="close"data-role="button"data-mini="true"data-inline="true"data-icon="delete"data-iconpos="right">Close</a><divdata-role="panel"id="right-panel"data-dis y="push"data-position="right"<ahref="#"data-rel="close"data-role="button"data-mini="true"data-inline="true"data-icon="delete"data-iconpos="right">Close</a> Web应用程序<link <link <script data-iconshadow="false"class="ui-icon-nodisc">Openleftpanel</a>data-iconshadow="false"class="ui-icon-nodisc">Openrightpanel</a></div><!--/header--<divdata-</div><!--/panel-- </div><!--/panel-- Web应用程序<link <link <script).on("pageinit","#demo",function()).on("swipeleftswiperight","#demo",function(e)//Wecheckifthereisnoopenpanelonthepagebecause//aswipetoclosetheleftpanelwouldalsoopentherightpanel(and//Wedothisbycheckingthedatathattheframeworkstoresonthepageelementif( .activePage.jqmData("panel")!=="open"{if(e.type==="swipeleft")$("#right-panel").panel("open"}elseif(e.type==="swiperight")$("#left-panel").panel("open"}}/*Swipeworkswithmouseaswellbutoftencausestextselection.*/#demo*{user-select:none;}#demo.ui-header.ui-btn{border:none;top:}{border:}/*Contentstyling.dl{font-family:"TimesNewRoman",Times,serif;padding:1em;}dt{font-size:2em;font-weight:bold;}dtspan{font-size:.5em;color:#777;margin-left:.5em;dd{font-size:1.25em;margin:1em00;padding-bottom:1em;border-bottom:1pxsolid#eee;.back-btn{float:right;margin:02em1em0;data-iconshadow="false"class="ui-icon-nodisc">Openleftpanel</a>data-iconshadow="false"class="ui-icon-nodisc">Openrightpanel</a></div><!--/header--<divdata- <l