EasyUI Ribbon

如需创建 Ribbon 组件，则要包含 ‘ribbon.css’、‘ribbon-icon.css’ 和 ‘jquery.ribbon.js’ 文件。

<link rel="stylesheet" type="text/css" href="../css/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-ribbon/ribbon.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-ribbon/ribbon-icon.css">
<script type="text/javascript" src="../js/plug/jquery.min.js"></script>
<script type="text/javascript" src="../js/plug/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/jquery-easyui-ribbon/jquery.ribbon.js"></script>

代码是基于easyui基础上写的，所以实际项目需要引入easyui相关文件，然后定义ribbon内容

//.html文件
<div class="partRibbon"></div>//.js 文件
$(function(){
    $('.partRibbon').ribbon({
     data: updateRibbon() });
)//改变disabled属性，用于有些项目需要把一部分按钮设置成禁用状态
var isReadOrEdit = true;//ribbon,click点击事件不需要加括号
function handleDel() {
    console.log("删除")
}
function newFolder() {
    console.log("新建")
}//写成方法是为了重新渲染ribbon用,方便更新其中disabled属性
function updateRibbon() {
    return {
    selected: 0,tabs: [{
    title: '编辑',groups: [{
    title: '剪切板',tools: [{
    type: 'linkbutton',name: 'cut',text: '剪切',disabled: 'true',plain: 'true',iconCls: 'icon-cut-large',iconAlign: 'top',size: 'large'},{
    type: 'linkbutton',name: 'copy',text: '复制',disabled: 'true',plain: 'true',iconCls: 'icon-copy-large',iconAlign: 'top',size: 'large'},{
    type: 'linkbutton',name: 'paste',text: '粘贴',disabled: 'true',plain: 'true',iconCls: 'icon-paste-large',iconAlign: 'top',size: 'large'}]},{
    title: '组织',tools: [{
    type: 'linkbutton',name: 'pencil',text: '重命名',disabled: 'true',plain: 'true',iconCls: 'icon-pencil-large',iconAlign: 'top',size: 'large'},{
    type: 'splitbutton',name: 'go',text: '移动到',disabled: 'true',plain: 'true',iconCls: 'icon-go-large',iconAlign: 'top',size: 'large',menuItems: [{
    name: 'paste',text: '标准件',}, {
    name: 'paste-special',text: '变化件'}, {
    name: 'paste-special',text: '固定件'}, {
    name: 'paste-special',text: '选择位置'}]},{
    type: 'splitbutton',name: 'copy',text: '复制到',disabled: 'true',plain: 'true',iconCls: 'icon-copy-large',iconAlign: 'top',size: 'large',menuItems: [{
    name: 'paste',text: '标准件',}, {
    name: 'paste-special',text: '变化件'}, {
    name: 'paste-special',text: '固定件'}, {
    name: 'paste-special',text: '选择位置'}]},{
    type: 'splitbutton',name: 'no',text: '删除',disabled: isReadOrEdit ? '' : 'true',plain: 'true',iconCls: 'icon-no-large',iconAlign: 'top',size: 'large',onClick:  handleDel,menuItems: [{
    name: 'paste',text: '回收',disabled: 'true',}, {
    name: 'paste-special',text: '永久删除',disabled: 'true',}, {
    name: 'paste-special',text: '显示回收确认',disabled: 'true',}]},]},{
    title: '新建',tools: [{
    type: 'linkbutton',name: 'resource',text: '新建文件夹',plain: 'true',iconCls: 'icon-resource-large',iconAlign: 'top',size: 'large',onClick: newFolder}]},{
    title: '选择',type: 'toolbar',dir: 'v',tools: [{
    name: 'selectall',text: '全部选择',disabled: 'true',iconCls: 'icon-selectall'},{
    name: 'cancel',text: '全部取消',disabled: 'true',iconCls: 'icon-bullets'},{
    name: 'select',text: '反向选择',disabled: 'true',iconCls: 'icon-select'}]},{
    title: '操作',tools: [{
    type: 'linkbutton',name: 'import',text: '导入',plain: 'true',iconCls: 'icon-import-large',iconAlign: 'top',size: 'large'},{
    type: 'linkbutton',name: 'export',text: '导出',plain: 'true',iconCls: 'icon-export-large',iconAlign: 'top',size: 'large',}]}]},{
    title: '查看',disabled: 'true',groups: [{
    title: '布局',tools: [{
    type: 'linkbutton',name: 'cut',text: '剪切',plain: 'true',iconCls: 'icon-cut-large',iconAlign: 'top',size: 'large'},{
    type: 'linkbutton',name: 'copy',text: '复制',plain: 'true',iconCls: 'icon-copy-large',iconAlign: 'top',size: 'large'},{
    type: 'linkbutton',name: 'paste',text: '粘贴',plain: 'true',iconCls: 'icon-paste-large',iconAlign: 'top',size: 'large'}]},{
    title: '当前视图',tools: [{
    type: 'splitbutton',name: 'watch',text: '排序方式',plain: 'true',iconCls: 'icon-table-large',iconAlign: 'top',size: 'large',menuItems: [{
    name: 'paste',text: '查看',}, {
    name: 'paste-special',text: '修改日期'}, {
    name: 'paste-special',text: '类型'}, {
    name: 'paste-special',text: '大小'}, {
    name: 'paste-special',text: '递增'}, {
    name: 'paste-special',text: '递减'}]},{
    type: 'splitbutton',name: 'copy',text: '复制到',plain: 'true',iconCls: 'icon-copy-large',iconAlign: 'top',size: 'large',menuItems: [{
    name: 'paste',text: '标准件',}, {
    name: 'paste-special',text: '变化件'}, {
    name: 'paste-special',text: '固定件'}, {
    name: 'paste-special',text: '选择位置'}]},{
    type: 'splitbutton',name: 'no',text: '删除',plain: 'true',iconCls: 'icon-no-large',iconAlign: 'top',size: 'large',menuItems: [{
    name: 'paste',text: '回收',}, {
    name: 'paste-special',text: '永久删除'}, {
    name: 'paste-special',text: '显示回收确认'}]},]}]}]}
}