$( document ).on( "pagecreate", "#demo-page", function() { $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) { // We check if there is no open panel on the page because otherwise // a swipe to close the left panel would also open the right panel (and v.v.). // We do this by checking the data that the framework stores on the page element (panel: open). if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) { if ( e.type === "swipeleft" ) { $( "#right-panel" ).panel( "open" ); } else if ( e.type === "swiperight" ) { $( "#left-panel" ).panel( "open" ); } } }); });
<div data-role="page" id="demo-page" data-url="demo-page"> <div data-role="header" data-theme="b"> <h1>Swipe left or right</h1> <a href="#left-panel" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a> <a href="#right-panel" data-icon="carat-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open right panel</a> </div><!-- /header --> <div role="main" class="ui-content"> <dl> <dt>Swipe <span>verb</span></dt> <dd><b>1.</b> to strike or move with a sweeping motion</dd> </dl> <a href="#demo-intro" data-rel="back" class="back-btn ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-back ui-btn-icon-right">Back to demo intro</a> </div><!-- /content --> <div data-role="panel" id="left-panel" data-theme="b"> <p>Left reveal panel.</p> <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a> </div><!-- /panel --> <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b"> <p>Right push panel.</p> <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a> </div><!-- /panel --> </div>
/* Swipe works with mouse as well but often causes text selection. */ /* We'll deny text selecton on everything but INPUTs and TEXTAREAs. */ #demo-page :not(INPUT):not(TEXTAREA) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* Content styling. */ dl { font-family: "Times New Roman", Times, serif; padding: 1em; } dt { font-size: 2em; font-weight: bold; } dt span { font-size: .5em; color: #777; margin-left: .5em; } dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; } .back-btn { float: right; margin: 0 2em 1em 0; }
还可以直接试试swipeClose,官方的解释是“Sets whether the panel can be closed by swiping left or right over the panel.”
data-swipe-close=false
or
$( ".selector" ).panel({ swipeClose: false });
http://demos.jquerymobile.com/1.4.3/panel-swipe-open/