JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page" id="left" data-url="left" data-theme="a">LEFT PAGE aasas
ssdf</div>
<div data-role="page" id="home" data-url="home" data-theme="a">HOME</div>
<div data-role="page" id="right" data-url="right" data-theme="a">RIGHT PAGE</div>
<div data-role="page" id="right" data-url="right" data-theme="a">RIGHT PAGE2</div>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
CSS
* {
margin: 0;
padding: 0;
line-height: 1;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
html, body {
width: 100%;
height: 100%;
background: dimgray;
}
#home {
background: dodgerblue;
}
#left {
background: red;
}
#right {
background: silver;
}
JavaScript
$('div.ui-page').live("swipeleft", function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: true, changeHash: false}, true, true);
}
});
$('div.ui-page').live("swiperight", function(){
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true, changeHash: false}, true, true);
}
});