首页>>Jquery文字>>左滑显示删除按钮,右滑显示删除按钮,移动端删除 mui代码(2018-07-22)

左滑显示删除按钮,右滑显示删除按钮,移动端删除 mui代码

左滑显示删除按钮,右滑显示删除按钮,移动端删除 mui代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="mui-content">  
  2. <ul id="OA_task_1" class="mui-table-view">  
  3. <li class="mui-table-view-cell">  
  4. <div class="mui-slider-right mui-disabled">  
  5. <a class="mui-btn mui-btn-red">删除</a>  
  6. </div>  
  7. <div class="mui-slider-handle">  
  8. 左滑显示删除按钮  
  9. </div>  
  10. </li>  
  11. <li class="mui-table-view-cell">  
  12. <div class="mui-slider-left mui-disabled">  
  13. <a class="mui-btn mui-btn-red">删除</a>  
  14. </div>  
  15. <div class="mui-slider-handle">  
  16. 右滑显示删除按钮  
  17. </div>  
  18. </li>  
  19. <li class="mui-table-view-cell">  
  20. <div class="mui-slider-left mui-disabled">  
  21. <a class="mui-btn mui-btn-red">删除</a>  
  22. </div>  
  23. <div class="mui-slider-right mui-disabled">  
  24. <a class="mui-btn mui-btn-red">删除</a>  
  25. </div>  
  26. <div class="mui-slider-handle">  
  27. 左右滑动均可显示删除按钮  
  28. </div>  
  29. </li>  
  30. </ul>  
  31. </div>  

 

JavaScript Code
  1. <script>  
  2.             mui.init();  
  3.             (function($) {  
  4.                 //$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单  
  5.                 //$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象  
  6.                 //              setTimeout(function() {  
  7.                 //                  $.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');  
  8.                 //                  setTimeout(function() {  
  9.                 //                      $.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));  
  10.                 //                  }, 1000);  
  11.                 //              }, 1000);  
  12.                 //第一个demo，拖拽后显示操作图标，点击操作图标删除元素；  
  13.                 $('#OA_task_1').on('tap', '.mui-btn', function(event) {  
  14.                     var elem = this;  
  15.                     var li = elem.parentNode.parentNode;  
  16.                     mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) {  
  17.                         if (e.index == 0) {  
  18.                             li.parentNode.removeChild(li);  
  19.                         } else {  
  20.                             setTimeout(function() {  
  21.                                 $.swipeoutClose(li);  
  22.                             }, 0);  
  23.                         }  
  24.                     });  
  25.                 });  
  26.                 var btnArray = ['确认', '取消'];  
  27.                 //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑  
  28.                 $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {  
  29.                     var elem = this;  
  30.                     mui.confirm('<div class="text"><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) {  
  31.                         if (e.index == 0) {  
  32.                             elem.parentNode.removeChild(elem);  
  33.                         } else {  
  34.                             setTimeout(function() {  
  35.                                 $.swipeoutClose(elem);  
  36.                             }, 0);  
  37.                         }  
  38.                     });  
  39.                 });  
  40.                 $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {  
  41.                     var elem = this;  
  42.                     mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) {  
  43.                         if (e.index == 0) {  
  44.                             elem.parentNode.removeChild(elem);  
  45.                         } else {  
  46.                             setTimeout(function() {  
  47.                                 $.swipeoutClose(elem);  
  48.                             }, 0);  
  49.                         }  
  50.                     });  
  51.                 });  
  52.                 //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑  
  53.                 $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {  
  54.                     var elem = this;  
  55.                     mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function(e) {  
  56.                         if (e.index == 0) {  
  57.                             elem.parentNode.removeChild(elem);  
  58.                         } else {  
  59.                             setTimeout(function() {  
  60.                                 $.swipeoutClose(elem);  
  61.                             }, 0);  
  62.                         }  
  63.                     });  
  64.                 });  
  65.             })(mui);  
  66.         </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_656.html