这篇博客详细介绍了如何在基于EasyUI的基础上创建并使用Ribbon组件。内容包括引入必要的CSS和JS文件，以及如何定义Ribbon的工具栏、按钮、菜单项，并通过JavaScript动态设置按钮的禁用状态。示例代码展示了新建、编辑、删除等操作的实现，以及如何通过handleDel和newFolder函数响应用户交互。
如需创建 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: '显示回收确认'
}]
},
]
}
]
}
]
}
}
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
