js里利用mui组件实现自定义弹窗动画

//首先调用mui里面的类
//在弹窗里 插入图片
1 <div id="_tan" class="box mui-popover mui-popover-action mui-popover-bottom">
2             <img src="../img/find/_lantw.png" id="tw" style="float:left;" />
3             <img src="../img/find/_huangkj.png" id="kj" style="float:right;" />
4         </div>

<!--点击空白处弹窗消失-->
mui('body').on('tap', '.mui-popup-backdrop', function() {
				mui.trigger(document.querySelector('.mui-popup-button-bold'), 'tap');
			});

　步骤：

1.引入 mui.css或者mui.min.css 和引入 mui.min.js或者mui.js

2. 简单的写一个a标签和一个div 设置引入mui类，其他东西在div里自定义即可

代码里的一些小的解释：

.on(enent,selector,hander) :实现批量元素的事件绑定

event: 需要监听的事件名称，如‘tap’（type:string）

selector:选择器（type:string）

handler:事件触发时的回调函数（type:function(event)）

使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。

off()事件取消 根据传入参数的不同，有不同的实现逻辑。

（1）、.off( event , selector , handler )

event：Type: String，需取消绑定的事件名称，例如：'tap'

selector：Type: String，选择器

handler：Type: Function，之前绑定到该元素上的事件函数，不支持匿名函数

（2）、.off( event , selector)

event：Type: String，需取消绑定的事件名称，例如：'tap'

selector：Type: String，选择器

（3）、 .off( event )

event：Type: String，需取消绑定的事件名称，例如：'tap'

（4）、 .off( )

空参数，删除该元素上所有事件

.trigger( element , event , data ) ：可以动态触发特定DOM元素上的事件，实现事件的触发

element:触发事件的DOM元素（type:element）

event:事件名字，如：‘tag’、‘swipeleft’（type:string）

data：需要传递给事件的业务参数(type:object)

单个元素上的事件监听，直接使用addEventListener()即可，如下：

elem.addEventListener("swipeleft",function(){ console.log("你正在向左滑动"); });

若多个元素执行相同逻辑，则建议使用事件绑定(on())。

事件跳转方法：

1.mui.openWindow({

id:'detail', url:'detail.html' }); })

2.<a href="setting.html">

js里利用mui组件实现 自定义弹窗动画

猜你喜欢

js里利用mui组件实现自定义弹窗动画