【APICloud系列|24】 MNNavigationMenu模块（导航菜单）的实现
程序员文章站
2022-03-22 10:33:22
导读：MNNavigationMenu 是一个导航栏菜单，开发者可自定义其中的样式和按钮个数，超出屏幕部分可左右拖动查看。模块详情：http://www.apicloud.com/mod_detail/12417index.html
导读：MNNavigationMenu 是一个导航栏菜单，开发者可自定义其中的样式和按钮个数，超出屏幕部分可左右拖动查看。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
html{ background-color: white; }
header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
span {
padding: 10px 15px;
margin: 10px;
display: inline-block;
background-color: #e8e8e8;
}
.hover{ opacity: .4; }
</style>
</head>
<body>
<header>
<h1>MNNavigationMenu</h1>
<mark>
使用前请详细阅读 文档 使用规则
</mark>
</header>
<span tapmode="hover" onclick="fnOpen()">open</span>
<span tapmode="hover" onclick="fnSetIndex()">setIndex</span>
<span tapmode="hover" onclick="fnClose()">close</span>
<span tapmode="hover" onclick="fnShow()">show</span>
<span tapmode="hover" onclick="fnHide()">hide</span>
</body>
<script type="text/javascript">
var MNNavigationMenu;
apiready = function() {
MNNavigationMenu = api.require('MNNavigationMenu');
};
function fnOpen(){
MNNavigationMenu.open({
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: 44
},
index: 0,
animation: true,
styles: {
column: 4,
bg: '#eee',
item: {
width: api.winWidth / 4,
bg: '#eee',
active: '#eee',
highlight: '#eee',
title: {
marginB: 6,
size: 14,
height: 44,
color: '#888',
active: '#f00',
highlight: '#f00'
}
}
},
items: [{
title: '菜单项0'
}, {
title: '菜单项1'
}, {
title: '菜单项2'
}, {
title: '菜单项3'
}, {
title: '菜单项4'
}, {
title: '菜单项5'
}, {
title: '菜单项6'
}],
fixed: false
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function fnSetIndex(){
MNNavigationMenu.setIndex({
index: 3
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function fnClose(){
MNNavigationMenu.close();
}
function fnShow(){
MNNavigationMenu.show();
}
function fnHide(){
MNNavigationMenu.hide();
}
</script>
</html>config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="A0000000000001" version="0.0.1">
<name>MNNavigationMenu</name>
<description>
Example For APICloud.
</description>
<author email="developer@apicloud.com" href="http://www.apicloud.com">
Developer
</author>
<content src="index.html" />
<access origin="*" />
<preference name="pageBounce" value="false"/>
<preference name="appBackground" value="rgba(0,0,0,0.0)"/>
<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
<preference name="hScrollBarEnabled" value="true"/>
<preference name="vScrollBarEnabled" value="true"/>
<preference name="autoLaunch" value="true"/>
<preference name="fullScreen" value="false"/>
<preference name="autoUpdate" value="true" />
<preference name="smartUpdate" value="false" />
<preference name="debug" value="true"/>
<preference name="statusBarAppearance" value="true"/>
<permission name="readPhoneState" />
<permission name="camera" />
<permission name="record" />
<permission name="location" />
<permission name="fileSystem" />
<permission name="internet" />
<permission name="bootCompleted" />
<permission name="hardware" />
</widget>完整下载地址：https://download.csdn.net/download/weixin_41937552/13990816
本文地址：https://blog.csdn.net/weixin_41937552/article/details/112003124
上一篇： 烧开水多久?隔夜的开水能不能喝?
下一篇： 大暑喝什么茶？夏天饮茶好处多