circle是一个提供菜单自定义的插件,点击左边的图标,你可以看到它的一些基本效果。

require : jquery 1.4+

下载:github , zip

使用方法如下所示:

html:

<div id="circle">
  <a class="main"><img src="img/main.png" ></a>
  <a class="menu" href=""><img src="img/home.png" ></a>
  <a class="menu" href=""><img src="img/profile.png" ></a>
  <a class="menu" href=""><img src="img/schedule.png" ></a>
  <a class="menu" href=""><img src="img/group.png" ></a>
  <a class="menu" href=""><img src="img/add.png" ></a>
  <a class="menu" href=""><img src="img/search.png" ></a>
  <a class="menu" href=""><img src="img/config.png" ></a>
  <a class="menu" href=""><img src="img/add.png" ></a>
</div>

js:

$(function(){
    $("#circle").circle();
});

当然,插件也提供了各种选项用于自定义,例如改变环状的运动方向,或者是一些细节的动作。

作为基本选项,插件提供了下面一些选项让你可以自定义,列举的都是当前默认值。

//主按键的属性
main : {
   width : 64
},
//初期位置,x轴正方向为0度
dip : -15,
//中央按键于环状按键之间的距离(不包括双方半径)
radius : 50,
//jquery easing,这个没什么好说的
easing : "linear",
//动画速率
duration : 100,
//环状配置下的范围,以初始位置开始计算的角度。
range : 360,
//菜单打开事件响应完毕时触发的动作。
open : function() {},
//菜单关闭事件响应完毕时触发的动作。
close : function() {},
//z轴,有时候你可能想把它和一些别的要素放在一起
zIndex : 0,
//延迟倍率
delay : 1,
//是否对按键的四角自动平滑
corner : true,
//方向,只有1,-1两个值
direct : 1,
//关闭菜单的动画是打开菜单的动画的对称逆转
reveser : true,
//主按键的cursor设定
cursor : "pointer"

除此之外,还有一些选项是我们可以设置的,比如说菜单打开动画

点击左边的图标,看看效果

animate : "panel"

这是除了环状菜单之外,另外提供的一个仿开始菜单的模式

此外,我们并不一定要在HTML中写入所有的菜单按键,也是可以直接javascript数组传递给插件。注意主菜单键是需要用html记入的。