Swipe left/right

Swipeleft and swiperight Jquery Mobile

by humanzing

HTML

<div data-role="page" id="foo">
    <div data-role="header">
        	<h1>Foo</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#bar">bar</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
        	<h1>Bar</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#foo">Back to foo</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->

JavaScript

$(document).on("swipeleft", function () {
 	console.log("left");        
});
$(document).on("swiperight", function () {
 	console.log("right");
});
$(document).on("swipetop", function () {
 	console.log("top");
});
$(document).on("swipebottom", function () {
 	console.log("top");
});