index.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({ subpages:[{ url:'list.html', id:'list', styles:{ top:'45px', bottom:'0px' } }] }); </script> </head> <body> <div class="mui-content">, <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">hello mui</h1> </header> </div> </body> </html>
初始化时打开的子页面（id 在 item 1 处），代码结构如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css"/> </head> <body> <div class="mui-content" id="list"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right" id="item_1">Item 1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 4</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 5</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 6</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 7</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 8</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 9</a> </li> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板</a> <div class="mui-collapse-content"> <p>面板2子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板3</a> <div class="mui-collapse-content"> <p>面板3子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板</a> <div class="mui-collapse-content"> <p>面板2子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板3</a> <div class="mui-collapse-content"> <p>面板3子内容</p> </div> </li> </ul> </ul> </div> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); document.getElementById('item_1').addEventListener('tap', function() { //打开关于页面 mui.openWindow({ url: 'item_1.html', id:'item_1' }); }); </script> </body> </html>
子页面要再打开的子页面，代码结构如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css"/> </head> <body> <div class="mui-content"> <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第一张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第二张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第三张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第四张 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> </div> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() </script> </body> </html>