ブラウザで動作するこのコードがありますが、PhoneGap コンパイルを介して実行しようとすると、スクロール フロム レフト/スクロール フロム ライトが機能しませんが、上部のボタンをクリックすると左/右メニューが動作します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open panel on swipe - jQuery Mobile Demos</title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="cordova.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
document.addEventListener("deviceready", alert("deviceready"),false);
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
$( document ).on( "pageinit", "#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 ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
</script>
<style>
/* Swipe works with mouse as well but often causes text selection. */
#demo-page * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* Arrow only buttons in the header. */
#demo-page .ui-header .ui-btn {
background: none;
border: none;
top: 9px;
}
#demo-page .ui-header .ui-btn-inner {
border: 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; }
</style>
</head>
<body>
<div data-role="page" class="jqm-demos" id="demo-page">
<div data-role="header" data-theme="b">
<h1>Swipe left or right</h1>
<a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
<a href="#right-panel" data-theme="d" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
</div><!-- /header -->
<div data-role="content" >
<dl>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dt>Swipe <span>verb</span></dt><br>
<dd><b>1.</b> to strike or move with a sweeping motion</dd>
</dl>
<a href="#demo-intro" data-rel="back" class="back-btn" data-role="button" data-mini="true" data-inline="true" data-icon="back" data-iconpos="right">Back to demo intro</a>
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="b" >
<p>Left reveal panel.</p>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#" data-transition="slide">
Button
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
</ul>
<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="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" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed" data-theme="b">
<p class="jqm-version"></p>
<p>Copyright 2013 InTouchMobile</p>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
どんな助けでも大歓迎です。また、両側から FB/G+ スタイルのスライド メニューを取得する他の方法があれば教えてください。