欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【APICloud系列|24】 MNNavigationMenu模块(导航菜单)的实现

程序员文章站 2022-03-22 10:33:22
导读:MNNavigationMenu 是一个导航栏菜单,开发者可自定义其中的样式和按钮个数,超出屏幕部分可左右拖动查看。模块详情:http://www.apicloud.com/mod_detail/12417index.html

导读:MNNavigationMenu 是一个导航栏菜单,开发者可自定义其中的样式和按钮个数,超出屏幕部分可左右拖动查看。

模块详情:http://www.apicloud.com/mod_detail/12417

【APICloud系列|24】 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