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' 文件。
- <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-1.8.0.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>
属性
属性扩展自 tabs 控件,下列是
ribbon 新增属性。
属性名 |
属性值类型 |
描述 |
默认 |
data |
object |
Ribbon 描述对象。 |
undefined |
事件
事件扩展自 tabs 控件,下列是
ribbon 新增事件。
事件名 |
参数 |
描述 |
onClick |
name,target |
在点击按钮的时候触发。参数包括: name:按钮名称。 target:点击的 DOM
元素。 |
方法
方法扩展自 tabs 控件,下列是
ribbon 新增方法。
方法名 |
方法参数 |
描述 |
loadData |
data |
读取 Ribbon 数据。 |