JSFiddle - React, Tailwind, and code Playground

by jsanta

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<div data-role="page"> 
    <div data-role="header"><h1>Swipe to delete</h1></div> 
    <div data-role="content">
        <h2>Simple list</h2>
        <p>Swipe right to delete a list item</p>
            <ul data-role="listview" data-inset="true" id="swipedelete">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>
    </div> 
</div>

CSS

.ui-btn-up-e {
    border: 1px solid #696969 /*{e-bup-border}*/;
    background: #d23232 /*{e-bup-background-color}*/;
    font-weight: bold;
    color: #ffffff /*{e-bup-color}*/;
    text-shadow:  0  /*{e-bup-shadow-x}*/  1px  /*{e-bup-shadow-y}*/  1px  /*{e-bup-shadow-radius}*/ #4f4f4f /*{e-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #FF3E3E /*{e-bup-background-start}*/), to( #9D2525 /*{e-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #FF3E3E /*{e-bup-background-start}*/, #9D2525 /*{e-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #FF3E3E /*{e-bup-background-start}*/, #9D2525 /*{e-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #FF3E3E /*{e-bup-background-start}*/, #9D2525 /*{e-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #FF3E3E /*{e-bup-background-start}*/, #9D2525 /*{e-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #FF3E3E /*{e-bup-background-start}*/, #9D2525 /*{e-bup-background-end}*/);
}
.ui-btn-up-e a.ui-link-inherit {
    color: #ffffff /*{e-bup-color}*/;
}

.ui-btn-hover-e {
    border: 1px solid #696969 /*{e-bhover-border}*/;
    background: #b81414 /*{e-bhover-background-color}*/;
    font-weight: bold;
    color: #ffffff /*{e-bhover-color}*/;
    text-shadow:  0  /*{e-bhover-shadow-x}*/  1px  /*{e-bhover-shadow-y}*/  1px  /*{e-bhover-shadow-radius}*/ #4f4f4f /*{e-bhover-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #EF1A1A /*{e-bhover-background-start}*/), to( #800E0E /*{e-bhover-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #EF1A1A /*{e-bhover-background-start}*/, #800E0E /*{e-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #EF1A1A...

JavaScript

var onswipe = false;
//$( '#swipedelete li' ).live( 'swiperight',function(){ 
// changed to click to test on desktop browser
$( '#swipedelete li' ).live( 'click',function(){ 
// change click to swiperight to test swipe
    if(!onswipe){
        onswipe = true;
        
        var li;    
        var html = '<li class="delete-controls"><button type="button" class="btncancel ui-btn-corner-all ui-btn-up-c" data-role="button" data-theme="c">Cancel</button>&nbsp;<button type="button" class="btndelete ui-btn-corner-all ui-btn-up-e" data-role="button" data-theme="e">Delete</button></li>';
        $(this).after(html);
        li = $(this).detach();    
        $("ul[id='swipedelete']").listview("refresh");
        
        $(".delete-controls").unbind("tap click");
        $(".delete-controls .btndelete").click(function(e){
            //alert("Click on delete");
            if(!confirm("Are you sure you want to delete this item?")){        
                $(".delete-controls").before(li);
                $(".delete-controls").remove();
            } else{
                $(".delete-controls").remove();
            }
            
            onswipe = false;
            $("ul[id='swipedelete']").listview("refresh");
        });
        
        $(".delete-controls .btncancel").click(function(e){
            //alert("Click on cancel");
            $(".delete-controls").before(li);
            $(".delete-controls").remove();
            
            onswipe = false;
            $("ul[id='swipedelete']").listview("refresh");
        });        
        
    }
});