mui手机端列表滑动删除效果代码下载
1. 引入CSS
<link rel="stylesheet" href="css/mui.min.css"><link rel="stylesheet" type="text/css" href="css/app.css" />
2. 引入JS
<script src="js/mui.min.js"></script>
3. HTML代码
<div class="mui-content"> <ul id="OA_task_1" class="mui-table-view"> <li class="mui-table-view-cell"> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-red">删除</a> </div> <div class="mui-slider-handle"> 左滑显示删除按钮 </div> </li> <li class="mui-table-view-cell"> <div class="mui-slider-left mui-disabled"> <a class="mui-btn mui-btn-red">删除</a> </div> <div class="mui-slider-handle"> 右滑显示删除按钮 </div> </li> <li class="mui-table-view-cell"> <div class="mui-slider-left mui-disabled"> <a class="mui-btn mui-btn-red">删除</a> </div> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-red">删除</a> </div> <div class="mui-slider-handle"> 左右滑动均可显示删除按钮 </div> </li> </ul> </div> <script> mui.init(); (function($) { //$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单 //$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象 // setTimeout(function() { // $.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left'); // setTimeout(function() { // $.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child')); // }, 1000); // }, 1000); //第一个demo，拖拽后显示操作图标，点击操作图标删除元素； $('#OA_task_1').on('tap', '.mui-btn', function(event) { var elem = this; var li = elem.parentNode.parentNode; mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) { if (e.index == 0) { li.parentNode.removeChild(li); } else { setTimeout(function() { $.swipeoutClose(li); }, 0); } }); }); var btnArray = ['确认', '取消']; //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑 $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) { var elem = this; mui.confirm('<div class="text"><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) { if (e.index == 0) { elem.parentNode.removeChild(elem); } else { setTimeout(function() { $.swipeoutClose(elem); }, 0); } }); }); $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) { var elem = this; mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) { if (e.index == 0) { elem.parentNode.removeChild(elem); } else { setTimeout(function() { $.swipeoutClose(elem); }, 0); } }); }); //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑 $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) { var elem = this; mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) { if (e.index == 0) { elem.parentNode.removeChild(elem); } else { setTimeout(function() { $.swipeoutClose(elem); }, 0); } }); }); })(mui); </script> 
