circle是一个提供菜单自定义的插件,点击左边的图标,你可以看到它的一些基本效果。
require : jquery 1.4+
使用方法如下所示:
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记入的。