iArcMenu是一个灵活易用的移动端弹出菜单组件,它具有如下特性
- 有效支持移动设备,并有根据屏幕自适应
- 支持多种弹出效果,包括 arc (圆形), line(线形), static(静止),添加相应参数还能得到子弹(bullet)效果
- 你能够简易地添加回调函数(callback)
在你开始之前,请务必将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>
选项 | 数值 | 解释 |
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 | 点击后的回调 |
Copyright (c) 2014 BE-FE