$.fn.extend({
createBtn: function () {
var elmWidth = $("li", $(this)).width(),
listType = $(this).listview("option", "inset") ? true : false,
btnWidth = elmWidth < 300 && listType ? "35%" : elmWidth > 300 && !listType ? "25%" : "20%";
$("li", $(this)).each(function () {
var text = $(this).html();
$(this).html($("<div/>", {
class: "wrapper"
}).append($("<div/>", {
class: "go"
}).text("Save").width(btnWidth)).append($("<div/>", {
class: "item"
}).text(text)).append($("<div/>", {
class: "del"
}).text("Delete").width(btnWidth)).css({
left: "-" + btnWidth
}).on("swipeleft swiperight vclick tap", function (e) {
$(this).revealBtn(e, btnWidth);
}) /**/ );
});
},
revealBtn: function (e, x) {
var check = this.check(x),
swipe = e.type;
if (check == "closed") {
swipe == "swiperight" ? this.open(e, x, "left") : swipe == "swipeleft" ? this.open(e, x, "right") : setTimeout(function () {
this.close(e);
}, 0);
e.stopImmediatePropagation();
}
if (check == "right" || check == "left") {
swipe == "swiperight" ? this.open(e, "left") : swipe == "swipeleft" ? this.open(e, x, "right") : setTimeout(function () {
this.close(e);
}, 0);
e.stopImmediatePropagation();
}
if (check !== "closed" && e.isImmediatePropagationStopped() && (swipe == "vclick" || swipe == "tap")) {
this.close(e);
}
},
close: function (e) {
var check = this.check();
this.css({
transform: "translateX(0)"
});
},
open: function (e, x, dir) {
var posX = dir == "left" ? x : "-" + x;
$(this).css({
transform: "translateX(" + posX + ")"
});
},
check: function (x) {
var matrix = this.css("transform").split(" "),
posY = parseInt(matrix[matrix.length - 2], 10),
btnW = (this.width() * parseInt(x) / 100) / 1.1;
return isNaN(posY) ? "closed" : posY >= btnW ? "left" : posY <= "-" + btnW ? "right" : "closed";
}
});
$(document).on("pagecreate", function () {
$("ul").createBtn();
});
div[data-roler="header"] h1 {
background: #f90 !important;
}
li {
padding: 0 !important;
}
li .wrapper {
display: block;
height: 100%;
width: auto;
position: relative;
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
transition: transform 300ms ease;
}
.wrapper .go, .wrapper .item, .wrapper .del {
display: inline-block;
padding: 0.9em;
text-shadow: none;
border-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper .item {
width: 100%;
height: 100%;
}
.wrapper .go, .wrapper .del {
height: 100%;
text-align:center;
font-weight: bold;
border-width: 1px 0;
border-style: solid;
border-color: #ddd;
}
.wrapper .go {
background: #009925;
border-color: #009925;
}
.wrapper .del {
background: #F90101;
border-color: #F90101;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview">
<li>Swipe me 1</li>
<li>Swipe me 2</li>
<li>Swipe me 3</li>
<li>Swipe me 4</li>
<li>Swipe me 5</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Hallo</h1>
</div>
</div>
</body>
</html>