### Ribbon（Ribbon 界面）

Extension > Ribbon

扩展下载地址：http://www.jeasyui.com/extension/downloads/jquery-easyui-ribbon.zip (我发布的程序包整也有提供，在extension目录下)

#### 导入 Ribbon 文件

要创建一个 ribbon 组件，需要导入 'ribbon.css'，'ribbon-icon.css' 和 'jquery.ribbon.js' 文件。

1. <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
2. <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
3. <link rel="stylesheet" type="text/css" href="ribbon.css">
4. <link rel="stylesheet" type="text/css" href="ribbon-icon.css">
5. <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
6. <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
7. <script type="text/javascript" src="jquery.ribbon.js"></script>

#### 创建 Ribbon

通过标签创建

1. <div class="easyui-ribbon" style="width:700px;">
2. <div title="Home">
3. <div class="ribbon-group">
4. <div class="ribbon-toolbar">
5. <a href="#" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">Paste</a>
6. </div>
7. <div class="ribbon-toolbar">
8. <a href="#" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">Cut</a><br>
9. <a href="#" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">Copy</a><br>
10. <a href="#" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">Format</a>
11. </div>
12. <div class="ribbon-group-title">Clipboard</div>
13. </div>
14. <div class="ribbon-group-sep"></div>
15. <div class="ribbon-group">
16. <div class="ribbon-toolbar" style="width:200px"></div>
17. <div class="ribbon-group-title">other title</div>
18. </div>
19. <div class="ribbon-group-sep"></div>
20. </div>
21. </div>

通过 javascript 创建。

1. <div id="rr" style="width:700px;"></div>
2. <script>
3. $(function(){
4. $('#rr').ribbon({
5. data:data
6. });
7. });
8. </script>

#### 属性

属性扩展自 tabs 控件，下列是 ribbon 新增属性。

属性名 | 属性值类型 | 描述 | 默认
--- | --- | --- | ---
data | object | Ribbon 描述对象。 | undefined

#### 事件

事件扩展自 tabs 控件，下列是 ribbon 新增事件。

事件名 | 参数 | 描述
--- | --- | ---
onClick | name,target | 在点击按钮的时候触发。参数包括： name：按钮名称。 target：点击的 DOM 元素。

#### 方法

方法扩展自 tabs 控件，下列是 ribbon 新增方法。

方法名 | 方法参数 | 描述
--- | --- | ---
loadData | data | 读取 Ribbon 数据。