<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> /*提前預加載其他頁面，這樣再打開已加載好的頁面就會有很好的效果了*/ mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">hello</h1> </header> <div class="mui-content"> <button type="button" onclick="mshow()">測試onclick</button> <button type="button" id="btn1">測試id 點擊事件</button> <br /> <ul id="lists" class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell">Item 2</li> <li class="mui-table-view-cell">Item 3</li> </ul> <br /> <button type="button" id="btn2">點擊這里</button> <br> <ul class="mui-table-view" id="list1"> <li class="mui-table-view-cell" id="1">新聞 1</li> <li class="mui-table-view-cell" id="2">新聞 2</li> <li class="mui-table-view-cell" id="3">新聞 3</li> </ul> </div> </body> <script type="text/javascript"> /*用此方法的話，萬一頁面沒有加載完，用戶就點擊了某個按鈕就怕出問題*/ function mshow(){ mui.toast('ok'); } /*plusReady() 此mui方法值能在真機上運行，用此方法的目的是能證明加載完所有的控件了*/ mui.plusReady(function(){}); document.getElementById('btn1').addEventListener('tap',function(){ mui.toast('ok'); }) mui('#lists').on('tap','li',function(){ mui.toast(this.innerHTML); //mui('#lists').off('tap','li');//取消點擊事件 }) document.getElementById('btn2').addEventListener('tap',function(){ mui.toast('ok'); }) //點擊跳轉並傳值 //mui.plusReady(function(){}); var detailPage = mui.preload({url:'sub.html',id:'sub.html'}); mui('#list1').on('tap', 'li', function(e){ mui.fire(detailPage,'newsId',{'title': this.innerHTML, 'id':this.getAttribute('id')}); mui.openWindow({url: 'sub.html',id:'sub.html'}); }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); //接受數據 只能在真機運行下才能有效果 //mui.plusReady(function(){}); window.addEventListener('newsId',function(e){ var title1 = mui('#title'); title1[0].innerHTML = e.detail.title; mui.toast(e.detail.id); console.log('bb'); }); console.log('aa'); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" id="title">hello</h1> </header> </body> </html>