+ 很容易实现
+ 简单和干净的风格
+ 高度可定制的
+ 在任何位置使用它e
1. 引用jquery库.
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
2. 引用插件的js.
<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
});
6. 就这么简单!
按钮的树形设置
{
//-- 这是按钮标签
text: 'Edit'
//-- 可选地,设置一个自定义字体图标样式,或者您也可以使用您自己的图标,表单 ...
cssIcon: 'fa fa-pencil'
//-- 可选地,您可以设置一个css类标签按钮 ...
cssLabel: 'editLabel'
//-- 设置回调函数,用户点击每个按钮可以调用一个函数 ...
click: 'function (e, obj) { alert("Edit: " + obj.description); }'
}
NinjaRadial 属性
{
//-- 这是背景容器大小(以像素为单位)
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
}