JSFiddle - React, Tailwind, and code Playground

by Jon

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
    <div data-role="page" id="article11">
        <div data-role="header">
            <h2 class="ui-title">Page one</h2>
        </div>
        <div data-role="content">
            You are in page one.
        </div>
        <div data-role="footer" data-id="foo1" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home">Home</a></li>
                    <li><a href="b.html" data-icon="info">Info</a></li>
                    <li><a href="#" data-icon="gear">Settings</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div>
    <div data-role="page" id="article12">
        <div data-role="header">
              <h2 class="ui-title">Page two</h2>
          </div>
          <div data-role="content">
            You are in page two.
        </div>
        <div data-role="footer" data-id="foo1" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home">Home</a></li>
                    <li><a href="b.html" data-icon="info">Info</a></li>
                    <li><a href="#" data-icon="gear">Settings</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div>
    <div data-role="page" id="article13">
        <div data-role="header">
              <h2 class="ui-title">Page three</h2>
          </div>
          <div data-role="content">
            You are in page three.
        </div>
        <div data-role="footer" data-id="foo1"...

JavaScript

$(document).ready( function() {
        $(document).on('swipeleft', '.ui-page', function () {
            var nextpage = $(this).next('div[data-role="page"]');
             if (nextpage.length >= 0) {
                 $.mobile.changePage(nextpage, {
                     transition: "slide",
                     reverse: false,
                       allowSamePageTransition: true
                 });
             }
            else
            {
            alert("tgfg");
            }
        });
        $(document).on('swiperight', '.ui-page', function () {
            var prevpage = $(this).prev('div[data-role="page"]');
             if (prevpage.length >= 0) {
            alert(prevpage.value);
                 $.mobile.changePage(prevpage, {
                     transition: "slide",
                     reverse: true, 
                        allowSamePageTransition: true
                 });
             }
             else
            {
            alert("tgfg");
            }
        });
        });