js里利用mui組件實現 自定義彈窗動畫

//首先調用mui里面的類
//在彈窗里 插入圖片
1 <div id="_tan" class="box mui-popover mui-popover-action mui-popover-bottom">
            <img src="../img/find/_lantw.png" id="tw" style="float:left;" />
            <img src="../img/find/_huangkj.png" id="kj" style="float:right;" />
        </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里自定義即可

　　<a href="#彈窗ID"> </a>

　　<div id="彈窗ID" class="box mui-popover mui-popover-action mui-popover-bottom"></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">