monacaIDE+genymotionで開発しています。
onsenUIのタブバーをベースに、ある特定タブでは、左右のスワイプでタブ切り替えとは別のページ遷移をさせたいと考えています。
<ons-gesture-detector>
がうまく動かなかったため、jQueryを使って以下のようにスワイプを検出するコードを見つけ、タブバーと組み合わせようとしたのですが、スワイプでの遷移のための<ons-navigator>
、タブ遷移の<ons-tabber>
ともに組み合わせると動作しません。
スワイプとタブバーを組み合わせる方法をお教えいただきたいです。
宜しくお願い致します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
ons.bootstrap();
$(function() {
var box = $("#touchBox")[0];
box.addEventListener("touchstart", touchHandler, false);
box.addEventListener("touchmove", touchHandler, false);
box.addEventListener("touchend", touchHandler, false);
});
var xPos = 0;
var currentPos = 0;
function touchHandler(e){
e.preventDefault();
var touch = e.touches[0];
if(e.type == "touchstart"){
xPos = touch.pageX;
}
if(e.type == "touchmove"){
currentPos = touch.pageX;
}
if(e.type == "touchend"){
if (xPos < currentPos) {
alert("right swipe");
//ページ移動させたい
monaca.pushPage('page1.html');
}else if(currentPos!=0){
alert("left swipe");
}
xPos = 0;
currentPos = 0;
}
}
</script>
</head>
<body>
<!-- <ons-navigator title="Navigator" var="myNavigator"></ons-navigator> -->
<!--スワイプする部分-->
<div id="touchBox" style="cursor:move; z-index:1; border:1px solid #FFF; width=400px; height=400px; background-color: #000;">
------------------</br>
------------------</br>
</div>
<!--
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="page1.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="page2.html"></ons-tabbar-item>
</ons-tabbar>
-->
</body>
</html>
4/5追記
下記のようなコードに変更したところ、自己解決しました。
4/6追記
回答欄にコードを転記しました。