NinjaRadial - 漂亮的弹出圆圈放射式菜单插件

NinjaRadial - 漂亮的弹出圆圈放射式菜单插件2432
这是一个很好的放射式菜单插件,用在你的网站或者管理系统种。
为什么用这个插件?
+ 很容易实现
+ 简单和干净的风格
+ 高度可定制的
+ 在任何位置使用它

如何开始 ?
1. 引用jquery库.
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
2. 引用插件的js.css
<link href="NinjaRadial.css" rel="stylesheet" type="text/css" />
<script src="NinjaRadial.js" type="text/javascript"></script>
3. 配置您的按钮创建一个对象数组
//-- 这是基本用法
buttonsModel = new Array();
buttonsModel.push({ text: "Edit", click: function (e, obj) { alert("Edit: " + obj.id); } });
buttonsModel.push({ text: "Remove", click: function (e, obj) { alert("Remove: " + obj.id); } });
buttonsModel.push({ text: "Add", click: function (e, obj) { alert("Add: " + obj.id); }});
5. 然后调用所需的选项 .
$("#ninjaRadial").ninjaGridPlus({
     buttons: buttonsModel
});
按钮选项
{
     //-- 这是按钮标签
     text: 'Edit'
 
     //-- 可选地,设置一个自定义字体图标样式,或者您也可以使用您自己的图标,表单 ...
     cssIcon: 'fa fa-pencil'
 
     //-- 可选地,您可以设置一个css类标签按钮 ...
     cssLabel: 'editLabel'
 
     //-- 设置回调函数,用户点击每个按钮可以调用一个函数 ...
     click: 'function (e, obj) { alert("Edit: " + obj.description); }'
}
{
     //-- 这是背景容器大小(以像素为单位)
     buttons: buttonsModel
     //-- 您可以更改背景容器的大小(以像素为单位)
     innerSize: 100
 
     //-- 这是背景容器边框大小(以像素为单位)
     borderSize: 10
 
     //-- 像素中心之间的距离和按钮
     distance: 60
 
     //-- 容器改变背景颜色
     backColor: 'rgba(20,20,20,0.7)'
 
     //-- 改变背景容器边框颜色
     borderColor: 'rgba(20,20,20,0.1)'
 
     //-- 你可以设置按钮的高度(以像素为单位)
     itemHeight: 40
 
     //-- 你可以设置按钮的宽度(以像素为单位)
     itemWidth: 40
 
     //--你可以设置线的高度(以像素为单位)
     lineHeight: 40
}

也许你还喜欢