iArcMenu

iArcMenu是一个灵活易用的移动端弹出菜单组件，它具有如下特性

• 有效支持移动设备，并有根据屏幕自适应
• 支持多种弹出效果，包括 arc （圆形)， line（线形）, static（静止），添加相应参数还能得到子弹（bullet）效果
• 你能够简易地添加回调函数(callback)

开始部署iArcMenu

部署iArcMenu最容易的办法是查阅我们提供的简易例子。大部份代码存放在demo文件夹的文件里面。*iArcMenu* 是必要新建的一个类。

在你开始之前，请务必将src文件夹置于你项目文件夹下面，必调用里面的javascript和css文件。

• common.css
• iarcmenu.js

你需要为iArcMenu先新建好数据:

var list = [
        {
            content: "用户",
            scale: 1.5,
            callback: function() {
                alert(this.innerHTML);
            }
        },
        {
            content: "朋友",
            scale: 1.5,
            callback: function() {
                alert(this.innerHTML);
            }
        },
        {
            content: "设置",
            scale: 1.5,
            callback: function() {
                alert(this.innerHTML);
            }
        }

HTML代码如下:

要使其运行，按下面例子新建iArcMenu类:

<script type="text/javascript">
	var opt = {
    data: list,
    dom: document.getElementById('iArcMenu-content'),
    type: 'arc',
    duration: 100,
    rangeDegree: 180,
    offsetDegree: 90,
    distance: 150,
    diameter: 100,
};

var arcMenu = new iArcMenu(opt);
</script>

配置iArcMenu

深入了解iArcMenu

这里提供对iArcMenu类选项最清楚的描述:

选项	数值	解释
dom	HTML Object	包含菜单的包裹DOM元素
data	Array of Content	菜单数据 如果没有背景图片，则可以通过content传入文字。 { content: "用户", class: 'icon icon-home3', scale: 1.5, callback: function() { alert(this.innerHTML); } },
type	String	菜单种类 (arc, line, static)
distance	Integer	菜单离开控制按钮的距离，默认100px
offsetDegree	Integer	初始角度，默认为0度，即正右方，x轴正方向
rangeDegree	Integer	适用于菜单arc种类，表示展开的范围，默认360度
diffDist	Integer	适用于菜单line种类，表示菜单之间的间距
diameter	Integer	菜单直径
duration	Integer (1000 == 1s)	动画启动间隔
durationOffset	Integer (1000 == 1s)	菜单之间动画间隔
callback	Function	点击后的回调

License (MIT)

Copyright (c) 2014 BE-FE

MIT