mui页面传值
mui之事件绑定及自定义事件
点击li跳转并传值到下一页
index.html
1 <body> 2 <div class="mui-content"> 3 <ul id="lists" class="mui-table-view"> 4 <li id="li1" class="mui-table-view-cell"> 5 <a class="mui-navigate-right"> 6 标题1 7 </a> 8 </li> 9 <li id="li2" class="mui-table-view-cell"> 10 <a class="mui-navigate-right"> 11 标题 2 12 </a> 13 </li> 14 <li id="li3" class="mui-table-view-cell"> 15 <a class="mui-navigate-right"> 16 标题 3 17 </a> 18 </li> 19 </ul> 20 </div> 21 </body> 22 <script type="text/javascript" charset="utf-8"> 23 mui.init(); 24 mui.plusReady(function(){ 25 //预加载新页面 26 var prePage = mui.preload({url:'info.html',id:'info.html'}); 27 //点击li 28 mui('#lists').on('tap','li',function(){ 29 //触发自定义事件 .fire(传值目标页面，自定义事件名称，所要传递的数据为json格式的数据) 30 mui.fire(prePage,'newEvent',{'title':this.innerText,'id':this.getAttribute('id')}); 31 //打开目标页面 32 mui.openWindow({ 33 url:'info.html', 34 id :'info.html' 35 }); 36 }); 37 }); 38 </script>
目标页面 info.html
1 <body> 2 <header class="mui-bar mui-bar-nav"> 3 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 4 <h1 id="title1" class="mui-title"></h1> 5 </header> 6 <script src="js/mui.min.js"></script> 7 <script type="text/javascript"> 8 mui.init(); 9 mui.plusReady(function(){ 10 window.addEventListener('newEvent',function(e){ 11 var titel1 = mui('#title1'); 12 titel1[0].innerText = e.detail.title; 13 mui.toast(e.detail.id); 14 }); 15 }); 16 </script> 17 </body>
