本文主要是介绍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);
})
这篇关于HTML5培训第14节课堂笔记（列表滑动删除的实现、侧滑菜单的生成）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
