发布：2016-03-17 15:15
更新：2016-03-17 18:33
阅读：2801

tap点击事件pc上有反应，手机上没反应

分类：MUI

tap

document.getElementById('info').addEventListener('tap', function() {

if (!mui.os.plus) {
mui.openWindow({
url: "info.html",
id: "info",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
return;
}

}）；

2016-03-17 15:15 负责人:无分享

4 个回复

1866 (作者)

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  

</head>  
<body>  
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
        <!--侧滑菜单部分-->  
        <aside id="offCanvasSide" class="mui-off-canvas-left">  
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <h1>World</h1>  
                </div>  
            </div>  
        </aside>  
        <!--主体部分-->  
        <div class="mui-inner-wrap">          
            <header class="mui-bar mui-bar-nav">  
                <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>  
                <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>  
                <h1 class="mui-title">刺客信条</h1>  
            </header>  
            <div class="mui-off-canvas-backdrop"></div>  
            <!--图片轮番-->  
            <div class="mui-slider" style="top: 40px;">  
              <div class="mui-slider-group mui-slider-loop">  
                <!--支持循环，需要重复图片节点-->  
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4-4.jpg" /></a></div>  
                <div class="mui-slider-item"><a href="#"><img src="img/4-1.jpg" /></a></div>  
                <div class="mui-slider-item"><a href="#"><img src="img/4-2.jpg" /></a></div>  
                <div class="mui-slider-item"><a href="#"><img src="img/4-3.jpg" /></a></div>  
                <div class="mui-slider-item"><a href="#"><img src="img/4-4.jpg" /></a></div>  
                <!--支持循环，需要重复图片节点-->  
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4-1.jpg" /></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>  
    </div>  
</body>  
<script>  
    mui.init();  
    //侧滑容器父节点  
    var offCanvasWrapper = mui('#offCanvasWrapper');  
     //主界面容器  
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');  
     //菜单容器  
    var offCanvasSide = document.getElementById("offCanvasSide");  

    //主界面和侧滑菜单界面均支持区域滚动；  
    mui('#offCanvasSideScroll').scroll();  
    mui('#offCanvasContentScroll').scroll();  
     //实现ios平台原生侧滑关闭页面；  
    if (mui.os.plus && mui.os.ios) {  
        mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能  
            plus.webview.currentWebview().setStyle({  
                'popGesture': 'none'  
            });  
        });  
    }  

    //图片轮番  
    var gallery = mui('.mui-slider');  
    gallery.slider({  
      interval:5000//自动轮播周期，若为0则不自动播放，默认为0；  
    });  

    //处理右上角关于图标的点击事件；  
    var subWebview = null,  
        template = null;  
    document.getElementById('info').addEventListener('tap', function() {  
        if (!mui.os.plus) {  
            mui.openWindow({  
                url: "info.html",  
                id: "info",  
                show: {  
                    aniShow: 'zoom-fade-out',  
                    duration: 300  
                }  
            });  
            return;  
        }  
        if (subWebview == null) {  
            //获取共用父窗体  
            template = plus.webview.getWebviewById("default-main");  
        }  
        if (template) {  
            subWebview = template.children()[0];  
            subWebview.loadURL('info.html');  
            //修改共用父模板的标题  
            mui.fire(template, 'updateHeader', {  
                title: '关于',  
                showMenu: false  
            });  
            template.show('slide-in-right', 150);  
        }  
        //              mui.openWindow({  
        //                  url:"examples/info.html",  
        //                  id:"info",  
        //                  show:{  
        //                      aniShow:'zoom-fade-out',  
        //                      duration:300  
        //                  }  
        //              });  
    });  

</script>  
</html>