JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css">
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<div data-role="page" id="mainPage">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content" id="mainContent">    
        <p>Page content goes here.</p>        
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>

</div>

JavaScript

$("#mainPage").live("pagebeforecreate", function(event) {
        console.log("Running...");
        var list = '<ul data-role="listview" data-inset="true"><li>Star Wars</li><li>Moon Pies</li><li>Beer</li></ul>';
        $("#mainContent").append(list);

        window.setTimeout( function () {
            var lis = "";
            $.each(["Extra", "Cool", "Lines"], function (i, label) {
               lis += "<li>" + label + "</li>";
            }); 
            $("#mainContent ul").append(lis);
            
            // Uncomment this later
            //$("#mainContent ul").listview("refresh");
        }, 1000);
    });