HTML5培训第14节课堂笔记（列表滑动删除的实现、侧滑菜单的生成）

HTML5培训第14节课堂笔记

 

1.列表滑动删除的实现：

（1）li要改造

<liclass="mui-table-view-cell">

                  <divclass="mui-slider-left mui-disabled">

                     <aclass="mui-btn mui-btn-red">删除</a>

                  </div>

                  <divclass="mui-slider-handle">

                     <adata-newside="1">新闻标题1</a>

                  </div>

              </li>

 

 

（2）删除事件

document.querySelector(".mui-btn").addEventListener("tap",function(){

              varbtnArray=['是','否'];

              varli=this.parentNode.parentNode;

              mui.confirm("Areyou sure?","Message",btnArray,function(e){

                  if(e.index==0)

                  {

                     li.parentNode.removeChild(li);

                  }

                  else

                  {

                     mui.swipeoutClose(li);

                  }

               });

           });

 

 

 

2.侧滑菜单的生成：2个WebView位置的定位

 

 

Main页面：

var main=null;

       var menu=null;

       var showMenu=false;

       var mask=mui.createMask();

       mui.plusReady(function(){

           main=plus.webview.currentWebview();

           setTimeout(function(){

              menu=mui.preload({

              id:"offcanvas_menu.html",

              url:"offcanvas_menu.html",

              styles:{

                  left:0,

                  width:"70%",

                  zindex:9997

              }

           });

           },300);

          

           document.getElementById("btnSlide").addEventListener("tap",function(){

              openMenu();

           },false);

          

           function openMenu(){

              if(!showMenu)

              {

                  main.setStyle({

                     left:"70%",

                     transition:{

                         duration:150

                     }

                  });

                 

                  menu.setStyle({

                     left:"0",

                     transition:{

                         duration:150

                     }

                  });

                  showMenu=true;

                  mask.show();

                  menu.show();

              }

           }

           //menu页面向左滑动，关闭菜单；

       window.addEventListener("menu:swipeleft",closeMenu);

           function closeMenu()

{

              if(showMenu)

              {

                  main.setStyle({

                     left:"0",

                     transition:{

                         duration:150

                     }

                  });

                 

                  menu.setStyle({

                     left:"-70%",

                     transition:{

                         duration:150

                     }

                  });

                  showMenu=false;

                  mask.close();

                  menu.hide();

              }

           }

       });

 

Menu页面：

侧滑在menu上的关闭需要跨webview执行事件了

var main=null;

    mui.plusReady(function(){

       document.getElementById("btnClose").addEventListener("tap",function(){

           main=plus.webview.currentWebview().opener();//谁打开该窗口的窗口页面

           mui.fire(main,"menu:swipeleft");//自动执行跨页面的关闭

       },false);

      

    })