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>
时间： 2024-12-04 17:56:53