JSFiddle - React, Tailwind, and code Playground
by pmatseykanets
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on("pagebeforeshow", function() {
var $page = $.mobile.activePage;
var panelId = $page.attr('id') + '-panel';
if ($page.find('[data-role=panel]').length == 0) {
var panelHtml = '<div data-role="panel" id="' + panelId + '">';
panelHtml += ' <ul data-role="listview">';
panelHtml += ' <li>Menu A</li>';
panelHtml += ' <li>Menu B</li>';
panelHtml += ' <li>Menu C</li>';
panelHtml += ' </ul>';
panelHtml += '</div>';
$page.prepend(panelHtml);
$page.trigger('create');
$page.find('[data-role=header]').find('a[data-role=button].ui-btn-left').attr('href', '#' + panelId);
}
});
</script>
</head>
<body>
<div data-role="page" id="page-home" data-theme="c">
<div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#page-home-panel" data-rel="open" data-role="button" class="ui-btn-left" data-icon="bars">Menu</a>
<h3>Main Page</h3>
</div>
<div id="home-content" data-role="content">
<ul data-role="listview">
<li><a href="#page-friends">Friends</a>
</li>
<li><a href="#page-pets">Pets</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="page-pets" data-theme="c">
<div data-role="header" data-position="fixed" data-tap-toggle="false"> <a...