Ribbon

Include Ribbon Files

To create a ribbon component, include 'ribbon.css','ribbon-icon.css' and 'jquery.ribbon.js' files.

Create Ribbon

Create from markup

<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>

Create using javascript.

Properties

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

Name	Type	Description	Default
data	object	The ribbon description object.	undefined

Events

The events extend from tabs, below is the added events for ribbon.

Name	Parameters	Description
onClick	name,target	Fires when click a button. The parameters contain: name: the button name. target: the clicked dom element.

Methods

The methods extend from tabs, below is the added methods for ribbon.

Name	Parameter	Description
loadData	data	Load the ribbon data.

Download the EasyUI Extension:

jquery-easyui-ribbon.zip