JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>CompanyNet Mobile</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black" /> -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body> 

    <div id="HomePage" data-role="page" data-transition="slide" data-title="CompanyNet Mobile">
        
        <!-- HEADER -->
        <div data-role="header">
            <h1>CompanyNet Mobile</h1>
            <a id="log-out" class="ui-btn-right" href="#" data-icon="refresh" data-theme="b">Log Out</a>
        </div>
        <!-- //HEADER -->

        <!-- CNT -->
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-divider-theme="b">
                <li data-role="list-divider">Menu</li>
                <li><a href="#DataPage">DataPage</a></li>
            </ul>

        </div>
        <!-- //CNT -->

        <!-- FOOTER -->
        <div data-role="footer" data-position="fixed">
            <h4>&copy; 2012 Company IT</h4>
        </div>
        <!-- //FOOTER -->
        
    </div>
    


    
    <div id="DataPage" data-role="page" data-dom-cache="false"  data-back-btn-theme="b" data-title="DataPage">
        
        <!-- HEADER -->
        <div data-role="header">
            <a href="#HomePage" data-theme="b" data-icon="arrow-l" data-transition="reverse slide">Back</a>
            <h1>DataPage</h1>
            <a id="EditBtn" class="ui-btn-right" href="#" data-icon="gear" data-theme="b">Edit</a>
        </div>
        <!-- //HEADER -->

        <!-- CNT -->
        <div id="MyScheduleCnt" data-role="content">
            
            Some Data to Edit

        </div>
        <!--...

JavaScript

$('#EditBtn').live('click', function(e) {

    e.preventDefault();
    $.mobile.changePage("#EditData");
    return false;

});

$('#SaveBtn').live('click', function(e) {
    
    e.preventDefault();
    $.mobile.changePage("#DataPage");
    return false;
    
});

$(document).on("mobileinit", function() {

    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.defaultPageTransition = "slide";

});