jQuery EasyUI Extension - Ribbon
Including Ribbon Files
To create a Ribbon component, you need to include the 'ribbon.css', 'ribbon-icon.css', and 'jquery.ribbon.js' files.
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/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://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.ribbon.js"></script>
Creating 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.
<div id="rr" style="width:700px;"></div>
<script>
$(function(){
$('#rr').ribbon({
data:data
});
});
</script>
Properties
This property extends from tabs, and the following properties are added for Ribbon.
| Name | Type | Description | Default Value |
|---|---|---|---|
| data | object | The description object for the ribbon. | undefined |
Events
This event extends from tabs, and the following events are added for Ribbon.
| Name | Parameters | Description |
|---|---|---|
| onClick | name, target | Triggered when a button is clicked. Parameters include: <br>name: The name of the button. <br>target: The clicked DOM element. |
Methods
This method extends from tabs, and the following methods are added for Ribbon.
| Name | Parameters | Description |
|---|---|---|
| loadData | data | Load Ribbon data. |