### Ribbon（Ribbon 界面） [Extension](http://www.jeasyui.com/extension/index.php) ? Ribbon **扩展下载地址：**[**http://www.jeasyui.com/extension/downloads/jquery-easyui-ribbon.zip**](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](http://www.jeasyui.com/easyui/themes/default/easyui.css)"> 1. <link rel="stylesheet" type="text/css" href="[http://www.jeasyui.com/easyui/themes/icon.css](http://www.jeasyui.com/easyui/themes/icon.css)"> 1. <link rel="stylesheet" type="text/css" href="ribbon.css"> 1. <link rel="stylesheet" type="text/css" href="ribbon-icon.css"> 1. <script type="text/javascript" src="[http://www.jeasyui.com/easyui/jquery-min.js"></script](http://www.jeasyui.com/easyui/jquery-min.js"></script)> 1. <script type="text/javascript" src="[http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script](http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script)> 1. <script type="text/javascript" src="jquery.ribbon.js"></script>   #### 创建 Ribbon 通过标签创建    1. <div class="easyui-ribbon" style="width:700px;"> 1.     <div title="Home"> 1.         <div class="ribbon-group"> 1.             <div class="ribbon-toolbar"> 1.                 <a href="#" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">粘贴</a> 1.             </div> 1.             <div class="ribbon-toolbar"> 1.                 <a href="#" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">剪切</a><br> 1.                 <a href="#" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">复制</a><br> 1.                 <a href="#" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">格式化</a> 1.             </div> 1.             <div class="ribbon-group-title">剪贴板</div> 1.         </div> 1.         <div class="ribbon-group-sep"></div> 1.         <div class="ribbon-group"> 1.             <div class="ribbon-toolbar" style="width:200px"></div> 1.             <div class="ribbon-group-title">其他标题</div> 1.         </div> 1.         <div class="ribbon-group-sep"></div> 1.     </div> 1. </div> 通过 javascript 创建。   1. <div id="rr" style="width:700px;"></div> 1. <script type="text/javascript"> 1.     $(function(){ 1.         $('#rr').ribbon({ 1.             data:data 1.         }); 1.     }); 1. </script> #### 属性 属性扩展自 [tabs](#) 控件，下列是 ribbon 新增属性。 | **属性名** | 属性值类型 | **描述** | **默认** | |-----|-----|-----|-----| | data | object | Ribbon 描述对象。 | undefined | #### 事件 事件扩展自 [tabs](#) 控件，下列是 ribbon 新增事件。 <table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onClick</td> <td>name,target</td> <td>在点击按钮的时候触发。参数包括：<br/>name：按钮名称。<br/>target：点击的 DOM 元素。</td></tr></tbody></table> #### 方法 方法扩展自 [tabs](#) 控件，下列是 ribbon 新增方法。 | **方法名** | **方法参数** | **描述** | |-----|-----|-----| | loadData | data | 读取 Ribbon 数据。 |