JSFiddle - React, Tailwind, and code Playground

by shanabus

HTML

<!DOCTYPE html>  
<html>      
    <head>      
        <title>Sample Page</title>           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>        
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head>   
    <script type="text/javascript">
    function loadJson() {
        var jResult = [{ title: "Google", url : "http://www.google.com/"}, { title: "Bing", url : "http://www.bing.com" }, { title: "Yahoo", url: "http://www.yahoo.com" }];
        var htmlString = "";
    for (i = 0; i < jResult.length; i++) {
            htmlString += '<a href="' + jResult[i].url + '" data-role="button">' + jResult[i].title + '</a>';
    }
        $("#buttonGroup").append(htmlString);
        $("#buttonGroup a").button();
        $("#buttonGroup").controlgroup();
        
        return false;
    }
</script>
    <body>              
        <div data-role="page" id="page1">      
            <div data-role="header">         
                <h1>
                    Page 1
                </h1>     
            </div><!-- /header -->      
            
            <div data-role="content">
                <a href="#" data-role="button" id="loadJson">Click me!</a>
                <div data-role="controlgroup" id="buttonGroup">
                </div>
            </div><!-- /content -->      
            
            <div data-role="footer">              
            </div> 
        </div><!-- /page -->              

    </body>
</html>

JavaScript

$("#loadJson").click(loadJson);