JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="header">
            <a data-role="button" data-icon="search" data-iconpos="notext" id="searchbutton">Panel</a>
            <h1>Title</h1>
            <a href="logout.jsp" data-role="button" data-icon="power" data-iconpos="notext">Logout</a>
        </div>

<div data-role="page" id="home">
    <button id="gotopage2">Page2</button>
</div>


        <div data-role="footer">
            © Company Sweden AB<br>
            <span class="buildinfo">N/A  Development Version</span>
        </div>

JavaScript

$(function(){
   $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });   
     $("#gotopage2").click(function(){
         var $page2 = $('<div data-role="page" id="page2"><button id="gotohome">Home</button></div>');
         $("div[data-role='header']").after($page2);
         $page2.on('pagehide', function (event, ui) {
             $(event.currentTarget).remove();
         });
         $("#gotohome").click(function(){
             $(':mobile-pagecontainer').pagecontainer("change", "#home", {changeHash:false});
         })
         $(':mobile-pagecontainer').pagecontainer("change", "#page2", {changeHash:false});
     })
     
 })