JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<div data-role="page" id="Home" > 
            <div data-role="header" data-theme="b" data-position="fixed" >
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                    <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>
            <!--div data-role="content">
                       <div id="here_table" class="scrollable" data-scroll="y" style ="height:400px" > </div>
                </div-->
            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="here_table" >
                </ul>
                <!--- CaseInformationScreen Popup screen---------------------------->
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
                    <div data-role="header" data-theme="b" >
                        <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                        <h1>Case Information</h1>
                        <a href="#" ddata-role="button" data-corners="false">Add</a>
                    </div>

                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                    </div>
              ...

CSS

.ui-page {
    background: url(http://t3.gstatic.com/images?q=tbn:ANd9GcTza8rTq5bK16rNXCXFVbM6DJRdK5zJg1R3B9_iP0bvOLwV1qcuAQ) no-repeat fixed left bottom;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: cover;
}

.ui-page {

            background : transparent
                url(http://t3.gstatic.com/images?q=tbn:ANd9GcTza8rTq5bK16rNXCXFVbM6DJRdK5zJg1R3B9_iP0bvOLwV1qcuAQ)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;
            background-size : cover;
        }

JavaScript

for (i = 0; i < 40; i++) {
            $('#here_table').append(
        '<li class="row" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                    );
            }
        $(".row").click(function() {
            alert(this.id);
            console.log(this.id)
            });

$("#Cancel").click(function() {
   
        $('.ui-dialog').dialog('close')
                // ('#CaseInformationScreen').dialog('close');
                $.mobile.changePage($("#Home"), {
        transition: "pop",
                reverse: false,
                changeHash: false
        });
        });
                $("#CancelSettingButton").click(function() {

        $.mobile.changePage($("#Home"), {
        transition: "slide",
                reverse: false,
                changeHash: false
        });
        });

   $("#addbuttons").on("click", "a", function() {

                if ($(this).attr("id") == "Add") {
                    alert("fdfg")
                     $('#addbuttons').prop('disabled', true).addClass('ui-disabled');
                     $('.row').prop('disabled', true).addClass('ui-disabled');
                }
   });

$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','auto');
});