JSFiddle - React, Tailwind, and code Playground

by sidouglas

HTML

<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<div id="main-menu" data-role="panel" data-display="overlay" data-theme="b">
    <ul data-role="listview">
        <li><a href="#main" class="ui-icon-search ui-nodisc-icon" data-transition="slide">Main</a></li>
        <li><a href="#secondary" class="ui-icon-search ui-nodisc-icon" data-transition="slide">Secondary</a></li>
    </ul>
</div>

<div data-role="page" id="main">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Main Page</h1>
        <a role="button" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-left ui-nodisc-icon" href="#main-menu">Menu</a>
    </div>
    <div role="main" class="ui-content">
        Main Page
    </div>
</div>

<div data-role="page" id="secondary">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Secondary Page</h1>
        <a role="button" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-left ui-nodisc-icon" href="#main-menu">Menu</a>
    </div>
    <div role="main" class="ui-content">
        Secondary Page
    </div>
</div>

JavaScript

$(function () {
    $("[data-role=header]").toolbar().enhanceWithin();
    $("[data-role=panel]").panel().enhanceWithin();
});

$( document ).on( "pageshow", "[data-role='page']", function() {
			// Each of the four pages in this demo has a data-title attribute
			// which value is equal to the text of the nav button
			// For example, on first page: <div data-role="page" data-title="Info">
			var current = $( this ).jqmData( "title" );
			// Change the heading
			$( "[data-role='header'] h1" ).text( current );
			// Remove active class from nav buttons
			$( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
			// Add active class to current nav button
			$( "[data-role='navbar'] a" ).each(function() {
				if ( $( this ).text() === current ) {
					$( this ).addClass( "ui-btn-active" );
				}
			});
		});