HB探索
HB探索
  • 发布:2015-03-12 11:15
  • 更新:2015-06-25 08:33
  • 阅读:3948

主页点击menu无法触发子页的popover

分类:MUI

<!--这是首页-->

<header id="header_main" class="mui-bar mui-bar-nav">  
            <a href="#topPopover" id="menu" class="mui-icon mui-icon-bars mui-pull-left icons" ></a>  
            <a id="icon_set" class="mui-icon mui-icon-gear mui-pull-right icons"  style="margin-left: 10px;" ></a>  
            <a id="love" class="mui-icon iconfont icon-love mui-pull-right icons" ></a>  
            <h1 id="title" class="mui-title">Demo</h1>  
        </header>  

        <nav id="mui-bar-footer" class="mui-bar mui-bar-tab">  
            <a id="defaultTab" class="mui-tab-item " href="page/shop/index.html">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">仓单</span>  
            </a>  
            <a class="mui-tab-item" href="page/financle/index.html">  
                <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>  
                <span class="mui-tab-label">融资</span>  
            </a>  
            <a class="mui-tab-item mui-footer-active" href="page/index/index.html">  
                <span class="mui-icon mui-icon-contact"></span>  
                <span class="mui-tab-label">大厅</span>  
            </a>  
            <a class="mui-tab-item" href="page/listing/index.html">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">挂牌</span>  
            </a>  
            <a class="mui-tab-item" href="page/capital/index.html">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">资金</span>  
            </a>  
        </nav>  

        <script src="js/mui.min.js"></script>  
        <script src="js/app.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            var menu = null,main = null;  
            var showMenu = false;  

            var subpages = ['page/shop/index.html','page/financle/index.html','page/index/index.html','page/listing/index.html','page/capital/index.html'];  
            var subpage_style = {  
                top: '45px',  
                bottom: '50px'  
            };  
            mui.init();  

            var contentWebviewMenu = null;  
            //菜单  
            document.getElementById("menu").addEventListener('tap', function(e) {  
                e.stopPropagation();  
                if(contentWebviewMenu == null){  
                    contentWebviewMenu = plus.webview.currentWebview().children()[1];  
                }  
                mui.toast(contentWebviewMenu+"___"+1);  
                contentWebviewMenu.evalJS('mui("#topPopover").popover("toggle")');  
            });  

            //----模版--------  
            var templates = {};  
            var firstClick = true;  
            window.addEventListener('firstClick',function () {  
                firstClick = false;  
            });  
            var getTemplate = function(name, header, content, loading) {  
                var template = templates[name];  
                if (!template) {  
                    //预加载共用父模板;  
                    var headerWebview = mui.preload({  
                        url:header,  
                        id:name+"-main",  
                        styles:{  
                            popGesture:"hide",  
                        },  
                        extras:{  
                            mType: 'main'  
                        }  
                    });  
                    //预加载共用子webview  
                    var subWebview = mui.preload({  
                        url:!content?"":content,  
                        id:name+"-sub",  
                        styles:{  
                            top: '45px',  
                            bottom: '0px',  
                        },  
                        extras:{  
                            mType: 'sub'  
                        }  
                    });  
                    subWebview.addEventListener('loaded', function() {  
                        if(!firstClick){  
                            setTimeout(function() {  
                                subWebview.show();  
                            }, 50);  
                        }  
                    });  
                    subWebview.hide();  
                    headerWebview.append(subWebview);  

                    //iOS平台支持侧滑关闭,父窗体侧滑隐藏后,同时需要隐藏子窗体;  
                    if (mui.os.ios) { //5+父窗体隐藏,子窗体还可以看到?不符合逻辑吧?  
                        headerWebview.addEventListener('hide', function() {  
                            subWebview.hide("none");  
                        });  
                    }  
                    templates[name] = template = {  
                        name: name,  
                        header: headerWebview,  
                        content: subWebview,  
                        loaded: loading  
                    };  
                }  
                return template;  
            };  

            var initTemplates = function() {  
                getTemplate('pullrefresh', 'template_pullrefresh.html', 'page/capital/index.html', true);  
                getTemplate('default', 'template.html','page/capital/index.html');  
            };  
            //创建子页面,首个选项卡页面显示,其它均隐藏;  
            mui.plusReady(function(){  
                initTemplates(); //预加载所有模板  

                var self = plus.webview.currentWebview();  
                for(var i=0;i<5;i++){  
                    var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);  
                    if(i != 2){  
                        sub.hide();  
                    }  
                    self.append(sub);  
                }  

            });  

            //当前激活选项  
            var activeTab = subpages[2];  
            var title = document.getElementById("title");  
            //选项卡点击事件  
            mui('.mui-bar-tab').on('tap', 'a', function(e) {  
                var targetTab = this.getAttribute('href');  
                if (targetTab == activeTab) {  
                    return;  
                }  
                //更换标题  
                title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
                //显示目标选项卡  
                plus.webview.show(targetTab);  
                //隐藏当前;  
                plus.webview.hide(activeTab);  
                //更改当前活跃的选项卡  
                activeTab = targetTab;  
            });  

            var loadPage = function(url,title,args){  
                if (url != "") {  
                    //获得共用模板组  
                    var template = getTemplate('default');  
                    //判断是否显示右上角menu图标;  
                    var showMenu = false;  
                    //获得共用父模板  
                    var headerWebview = template.header;  
                    //获得共用子webview  
                    var contentWebview = template.content;  
                    //通知模板修改标题,并显示隐藏右上角图标;  
                    mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});  
                    var reload = true;  
                    if (!template.loaded) {  
                        if (contentWebview.getURL() != url) {  
                            contentWebview.loadURL(url);  
                        } else {  
                            reload = false;  
                        }  

                    } else {  
                        reload = false;  
                    }  
                    (!reload) && contentWebview.show();  

                    headerWebview.show('slide-in-right', 150);  
                    if(firstClick){  
                        firstClick = false;  
                    }  
                }  
            }  

            //-----------菜单相关----begin  
            /**  
             * 显示侧滑菜单  
             */  
            function openMenu() {  
                if (~showMenu) {  

                }  
            }  
                /**  
                 * 关闭菜单  
                 */  

            function closeMenu() {  
                if (showMenu) {  

                }  
            }  

             //主界面向右滑动,若菜单未显示,则显示菜单;否则不做任何操作  
            //window.addEventListener("swiperight", openMenu);  
             //主界面向左滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;  
            //window.addEventListener("swipeleft", closeMenu);  
             //侧滑菜单触发关闭菜单命令  

             //重写mui.menu方法,Android版本menu按键按下可自动打开、关闭侧滑菜单;  
            mui.menu = function() {  
                if (showMenu) {  
                    closeMenu();  
                } else {  
                    openMenu();  
                }  
            }  

             //首页返回键处理  
             //处理逻辑:1秒内,连续两次按返回键,则退出应用;  
            var first = null;  
            mui.back = function() {  
                if (showMenu) {  
                    closeMenu();  
                } else {  
                    //首次按键,提示‘再按一次退出应用’  
                    if (!first) {  
                        first = new Date().getTime();  
                        mui.toast('再按一次退出应用');  
                        setTimeout(function() {  
                            first = null;  
                        }, 1000);  
                    } else {  
                        if (new Date().getTime() - first < 1000) {  
                            plus.runtime.quit();  
                        }  
                    }  
                }  
            };  
            //------------菜单相关----end  
        </script>

<!--这是里页-->

<style>  
            /*跨webview需要手动指定位置*/  
            #topPopover {  
                position: fixed;  
                top: 16px;  
                right: 6px;  
                z-index: 99999;  
            }  
            #topPopover .mui-popover-arrow {  
                left: auto;  
                right: 6px;  
            }  
            p {  
                text-indent: 22px;  
            }  

            .mui-popover {  
                height: 300px;  
            }  
            .mui-content {  
                padding: 10px;  
                margin-top: 1px;  
            }  
        </style>  
    </head>  

    <body>  

        <div class="mui-content">  
            首页  
        </div>  

        <!--右上角弹出菜单-->  
        <div id="topPopover" class="mui-popover">  
            <div class="mui-popover-arrow"></div>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell">  
                            <a href="#">Item1</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item2</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item3</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item4</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item5</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item6</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item7</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item8</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item9</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item10</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div>  

        <script src="../../js/mui.min.js"></script>  
        <script src="../../js/app.js"></script>  
        <script>  
            mui.init();  

            mui('.mui-scroll-wrapper').scroll();  
            mui('body').on('shown', '.mui-popover', function(e) {  

            });  
            mui('body').on('hidden', '.mui-popover', function(e) {  

            });  

        </script>

首页点击menu无效,如何解?

2015-03-12 11:15 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

1.确认你的evalJS那里确实执行了。

2.确认你获取到的contentWebviewMenu是含有popover的那个子webview。

  • HB探索 (作者)

    首先可以确定evalJS却是执行了。但是不起作用。 另外我无法确定是否调用到了popover所在的webview。因为我首页创建的时候你可以从我初始化的ready中看到我创建了5个webview。我如何确定我创建的第三个webview在我显示的时候刚好是popover所在的页呢? 因为显示1个的时候 另外4个是隐藏的。

    2015-03-12 16:16

  • DCloud_UNI_FXY

    contentWebviewMenu.getURL()或contentWebviewMenu.id看一下是不是你要的那个

    2015-03-12 16:39

wanggc

wanggc

A 标签里的href="#menu"

该问题目前已经被锁定, 无法添加新回复