Ribbon

扩展组件 » Ribbon

导入 Ribbon 文件

要创建功能区组件，先导入“ribbon.css”、“ribbon-icon.css”和“jquery.ribbon.js”文件。

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="ribbon.css"> <link rel="stylesheet" type="text/css" href="ribbon-icon.css"> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery.ribbon.js"></script>

创建 Ribbon

从标记创建

<div class="easyui-ribbon" style="width:700px;"> <div title="Home"> <div class="ribbon-group"> <div class="ribbon-toolbar"> <a href="#" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">Paste</a> </div> <div class="ribbon-toolbar"> <a href="#" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">Cut</a><br> <a href="#" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">Copy</a><br> <a href="#" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">Format</a> </div> <div class="ribbon-group-title">Clipboard</div> </div> <div class="ribbon-group-sep"></div> <div class="ribbon-group"> <div class="ribbon-toolbar" style="width:200px"></div> <div class="ribbon-group-title">other title</div> </div> <div class="ribbon-group-sep"></div> </div> </div>

使用javascript创建。

<div id="rr" style="width:700px;"></div> <script> $(function(){ $('#rr').ribbon({ data:data }); }); </script>

属性

The properties extend from tabs, below is the added properties for ribbon。

名称	类型	描述	默认
data	object	ribbon描述对象	undefined

事件

事件继承自tabs，新增事件如下：

名称	参数	描述
onClick	name,target	点击按钮时触发，属性如下： name: 按钮名称。 target: 被点击的dom元素.

方法

方法继承自tabs，新增方法如下:

名称	参数	描述
loadData	data	记载ribbon数据

下载EasyUI扩展: