The delete button is displayed on the left slide of jq implementation. Click Delete to delete data (recommended). The jq button
Step 1: Load
<script src="js/jquery.min.js"></script><script src="js/jquery.mobile-1.3.2.min.js"></script>
Step 2: html
<Div class = "item-wrap"> <div class = "item clearfix"> <div class = "img-item"> </div> <div class = "txt-item"> <p class = "name"> small yellow </p> <p class = "txt"> small yellow, and small yellow </p> </div> <I class = "arrow"> </I> <a class = "delect-btn"> Delete </a> </ div> <div class = "item clearfix"> <div class = "img-item"> </div> <div class =" txt-item "> <p class =" name "> small yellow </p> <p class =" txt "> small yellow, and small yellow </p> </div> <I class = "arrow"> </I> <a class = "delect-btn"> Delete </a> </div>
Step 2: css
.item-wrap{ overflow: hidden; } .item-wrap .item{ border-bottom: 1px #fff solid; background: #000; width: 125%; overflow: hidden; position: relative; display: -webkit-box; -webkit-transition: all 0.3s linear; } .item-wrap .item .img-item{ width: 50px; height: 50px; margin: 10px; } .item-wrap .item .img-item img{ width: 100%; border-radius: 50%; } .item-wrap .item .txt-item{ padding-top: 10px; margin-right:25px; font-size: 14px; line-height: 24px; color: #fff; -webkit-box-flex:1; }.item-wrap .item .arrow{ width: 0; height: 0; line-height: 0; font-size: 0; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 8px 0px 8px 8px; position: absolute; right: 22%; top: 50%; margin-top: -8px;}.delect-btn{ width: 20%; margin-left: 15px; color: #fff; background: #0f0; z-index:999; display: block; text-align: center; padding-top: 5%;}.item-wrap .selected{ -webkit-transform: translate(-16%); -webkit-transition: all 0.3s linear;}
Step 2: jq
<script> $(".item").on('swipeleft', function(event) { event.preventDefault(); /* Act on the event */ $(this).addClass('selected').siblings('.item').removeClass('selected'); $(this).find('.delect-btn').on('click', function(event) { event.preventDefault(); /* Act on the event */ $(this).parent(".item").animate({ height: 0, width: 0}, 300, function() { /* stuff to do after animation is complete */ $(this).remove(); }); }); }); $(".item").on('swiperight', function(event) { event.preventDefault(); /* Act on the event */ $(this).removeClass('selected'); });</script>
In the preceding jq implementation, the delete button is displayed on the left. clicking Delete to delete data (recommended) is all the content shared by Alibaba Cloud. I hope you can give it a reference, we also hope that you can support the customer's home.