|
MNNavigationMenu模块(导航菜单)demo示例
[复制链接]
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>
复制代码
|
|