H5+ MUI

来源：互联网发布：九九乘法表算法流程图编辑：程序博客网时间：2024/04/28 13:37

获取自身对象 var self= plus.webview.currentWebview();

获取创建自己的对象：self.opener()

点击li里的li会执行2次li事件

阻止事件冒泡：

event.stopPropagation();

mui添加事件方法

mui("ul").on("tap","li label",function(){
// event.stopPropagation(); // 阻止事件冒泡
console.log(tt++);
})

可以在li 后添加标签

图片全屏：

data-preview-src="";

多张图片滑动切换：data-preview-group相同则可切换

<div  ><p><img  src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="2"/></p><p><img  src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="2"/></p><p><img  src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="2"/></p></div>

引用：

<link rel="stylesheet" href="../css/mui.min.css"><script src="../js/mui.min.js"></script><script src="../js/mui.zoom.js"></script><script src="../js/mui.previewimage.js"></script>

<script>mui.previewImage();</script>

底部弹出：

nativeUI，mui.prompt

图片轮播：

注意JS一定要放在body下面，需要加载完HTML元素运行JS才有效

<div class="mui-slider">  <div class="mui-slider-group mui-slider-loop">    <!--支持循环，需要重复图片节点-->    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="iconfont-tianjia.png" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="qihoo.png" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="qq.png" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="user-photo.png" /></a></div>    <!--支持循环，需要重复图片节点-->    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>  </div></div>

mui.init()//获得slider插件对象var gallery = mui('.mui-slider');gallery.slider({  interval:1000//自动轮播周期，若为0则不自动播放，默认为0；});

遮罩蒙版：

mui.createMask().show();

添加style

mui-backdrop {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 998;    background-color: rgba(0,0,0,.3);}

另外一种方法：

ws = plus.webview.currentWebview();ws.setStyle({mask: "rgba(0,0,0,0.5)"});// 点击关闭遮罩层ws.addEventListener("maskClick", closeMask, false);

function closeMask() {ws.setStyle({mask: "none"});}

0 0