<!--这是首页-->
<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无效,如何解?
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