<!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 MUI-bar-bar-NAV" > <-! top navigation bar - with a return key -> < A class = "MUI-Action Back-MUI MUI-icon-icon-left-left-NAV MUI-pull" > </ A > < h1 of class = "MUI-title" > window Manager - jump sub-page </ h1 > </ header > <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" id="tab2"><!--绑定单击跳转事件不能用这个onclick="openTel();"--> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class = "MUI-Tab-label" > provided </ span > </ A > </ NAV > < Script type = "text / JavaScript" > / * is determined whether the loaded plug h5 + * / mui.plusReady ( function () { document.getElementById ( ' TAB2 ' ) .addEventListener ( ' TAP ' , function () { mui.openWindow ({ URL: ' tel.html ' , ID: 'tel.html' }); }); }); </script> </body> </html>
method one
tel.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> </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">拨打电话</h1> </header> <div class="mui-content"> 187306308888 </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init() </script> </body> </html>
Method Two-----
<!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><div class="mui-content"> <button type="button" onclick="tel();">打电话</button> </div> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"> </ Span > < span class = "MUI-Tab-label" > Home </ span > </ A > < A class = "MUI-Tab-Item" ID = "TAB2" > <-! Binds this event can not hit a jump = onclick "Opentel ();" -> < span class = "MUI MUI-icon-icon-phone" > </ span > < span class = "MUI-the Tab-label" > phone </ span > </ A > <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script type = "text / JavaScript" > / * is determined whether the loaded plug h5 + * / mui.plusReady ( function () { document.getElementById ( ' TAB2 ' ) .addEventListener ( ' TAP ' , function () { mui.openWindow ({ URL: ' tel.html ' , ID: ' tel.html ' }); }); }); function Tel () { mui.openWindow ({ URL: " tel.html", id:"tel.html" }); } </script> </body> </html>