JSFiddle - React, Tailwind, and code Playground

by Rosberg Linhares

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Homepage menu and content -->
<div data-role="page" id="homepage">

    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#homepage" data-transition="slide" data-icon="home">Home</a></li>
                <li><a href="#trending" data-transition="slide" data-icon="star">Trending</a></li>
                <li><a href="#bycategory" data-transition="slide" data-icon="bullets">Categories</a></li>
            </ul>
        </div>

        <h1>Latest Feeds</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>Content of 'Home'..</p>
    </div>
</div>

<!-- Trending posts menu and content -->
<div data-role="page" id="trending">

    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#homepage" data-transition="slide" data-icon="home">Home</a></li>
                <li><a href="#trending" data-transition="slide" data-icon="star">Trending</a></li>
                <li><a href="#bycategory" data-transition="slide" data-icon="bullets">Categories</a></li>
            </ul>
        </div>

        <h1>Most Visited</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>Content of 'Trending'..</p>
    </div>
</div>

<!-- Category filter menu and content -->
<div data-role="page" id="bycategory">

    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#homepage" data-transition="slide" data-icon="home">Home</a></li>
                <li><a href="#trending" data-transition="slide" data-icon="star">Trending</a></li>
                <li><a href="#bycategory" data-transition="slide" data-icon="bullets">Categories</a></li>
            </ul>
   ...

JavaScript

$(document).ready(function() {

    // Set first page to load to #homepage
    window.location.hash = 'homepage';
    $.mobile.initializePage();
});


$(document).on('swipeleft swiperight', function (event) {
 if(event.type == 'swiperight') {
  var prevpage = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;
      $.mobile.changePage(prevpage, {
       transition: 'slide',
       reverse: true
      });
 }

 if(event.type == 'swipeleft') {
  var nextpage = '#' + $.mobile.activePage.next('div[data-role="page"]')[0].id;
      $.mobile.changePage(nextpage, {
       transition: 'slide',
       reverse: false
      });
 }
});