1. 程式人生 > >MUI移動端頁面跳轉

MUI移動端頁面跳轉

window space eve element 監聽事件 fire .html clas 作用

今天整理MUI移動端頁面跳轉的幾種方法和遇到的不同的坑 先上設置button、label和a標簽的代碼: <body> <button type="button" class="mui-btn" onclick="jumpToDetailView()"id="jumpToDetail">查看企業詳情</button> <div class="div"> <label class="test" id="test">this is a test label</label> <a class="atest" id="at">this is a test</a> </div> </body> 跳轉方法一:button類型使用onclick=‘‘,函數跳轉
function jumpToDetailView(){ alert(‘123‘); mui.openWindow({ url:‘details/detail.html‘, id:‘detail.html‘ }); } 這種方法貌似只對button有效,在驗證函數時,alert驗證有效且不影響函數
跳轉方法二:添加監聽事件跳轉 document.getElementById(‘at‘).addEventListener(‘tap‘,function(){ //alert(‘test a‘); mui.openWindow({ url:‘details/detail.html‘, id:‘detail.html‘ }); }); 添加監聽事件對所有跳轉都有效,但是在驗證的過程中,使用了alert以後發現彈出框不顯示且跳轉不起作用,不知道具體什麽原因,等以後找到原因再補充。 跳轉方法三:使用.on形式跳轉
基於官網(http://dev.dcloud.net.cn/mui/event/#on)上的描述“除了可以使用addEventListener()方法監聽某個特定元素上的事件外, 也可以使用.on()方法實現批量元素的事件綁定”。 參考樣例: mui(".mui-table-view").on(‘tap‘,‘.mui-table-view-cell‘,function(){ //獲取id var id = this.getAttribute("id"); //傳值給詳情頁面,通知加載新數據 mui.fire(detail,‘getDetail‘,{id:id}); //打開新聞詳情 mui.openWindow({ id:‘detail‘, url:‘detail.html‘ });}) 以下是本寶寶的一些失敗的例子,希望好心人士看到能指出問題所在。不過我也不會放棄的,如果找到了正確方法我會及時更新的。在這裏先自我檢討一下。 //label使用.on形式跳轉 // mui(‘.test‘).on(‘tap‘,function(e){ // //alert(‘test label‘); // mui.openWindow({ // url:‘details/detail.html‘, // id:‘detail.html‘ // }); // }); // mui(‘#test‘).on(‘tap‘,function(e){ // //alert(‘test label‘); // mui.openWindow({ // url:‘details/detail.html‘, // id:‘detail.html‘ // }); // }); //a標簽使用.on形式跳轉 // mui(‘.atest‘).on(‘tap‘,‘a‘,function(e){ // //alert(‘test a‘); // mui.openWindow({ // url:‘details/detail.html‘, // id:‘detail.html‘ // }); // });

MUI移動端頁面跳轉