mui頁面傳值

時間 2020-08-10

標籤 mui 頁面简体版

原文原文鏈接

mui之事件綁定及自定義事件javascript

點擊li跳轉並傳值到下一頁html

index.htmljava

 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.htmljson

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。