EasyUI-Ribbon（Ribbon 界面）

 首先介绍一下ribbon概念：

ribbon 英 [ˈrɪbən]   美 [ˈrɪbən]

n.带; 绶带; （打印机的）色带; 带状物;

v.把…撕成条带; 用缎带装饰; 形成带状;

Ribbon即功能区，是新的 Microsoft Office Fluent 用户界面 (UI) 的一部分。在仪表板设计器中，功能区包含一些用于创建、编辑和导出仪表板及其元素的上下文工具。它是一个收藏了命令按钮和图示的面板。它把命令组织成一组”标签”，每一组包含了相关的命令。每一个应用程序都有一个不同的标签组，展示了程序所提供的功能。在每个标签里，各种的相关的选项被组在一起。Windows Ribbon是一个Windows Vista或Windows 7自带的GUI构架，外形更加华丽，但也存在一部分使用者不适应，抱怨无法找到想要的功能的情形。

界面优势

跟传统的菜单式用户界面相比较，Ribbon界面的优势主要体现在如下几个方面：

1、所有功能有组织地集中存放，不再需要查找级联菜单、工具栏等等 ；

2、更好地在每个应用程序中组织命令；

Ribbon界面
Ribbon界面(3张)
3、提供足够显示更多命令的空间；

4、丰富的命令布局可以帮助用户更容易地找到重要的，常用的功能；

5、可以显示图示，对命令的效果进行预览，例如改变文本的格式等；

6、更加适合触摸屏操作。

虽然从菜单式界面到Ribbon界面有一个漫长的熟悉的过程，但是一个不争的事实是，Ribbon界面正在被越来越多的人接受，相应的，越来越多的软件开发商开始抛弃传统的菜单式界面，转而采用Ribbon界面。

导入 Ribbon 文件

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

<link rel=”stylesheet” type=”text/css” href=”https://www.jeasyui.com/easyui/themes/default/easyui.css”>https://www.jeasyui.com/easyui/themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”https://www.jeasyui.com/easyui/themes/icon.css”>https://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=”https://www.jeasyui.com/easyui/jquery-min.js%%/script”>https://www.jeasyui.com/easyui/jquery-min.js”></script>

<script type=”text/javascript” src=”https://www.jeasyui.com/easyui/jquery.easyui.min.js%%/script”>https://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:x;”>

<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'”>粘贴</a>

</div>

<div class=”ribbon-toolbar”>

<a href=”#” class=”easyui-linkbutton” data-options=”name:’cut’,iconCls:’icon-cut’,plain:true”>剪切</a><br>

<a href=”#” class=”easyui-linkbutton” data-options=”name:’copy’,iconCls:’icon-copy’,plain:true”>复制</a><br>

<a href=”#” class=”easyui-linkbutton” data-options=”name:’format’,iconCls:’icon-format’,plain:true”>格式化</a>

</div>

<div class=”ribbon-group-title”>剪贴板</div>

</div>

<div class=”ribbon-group-sep”></div>

<div class=”ribbon-group”>

<div class=”ribbon-toolbar” style=”width:x”></div>

<div class=”ribbon-group-title”>其他标题</div>

</div>

<div class=”ribbon-group-sep”></div>

</div>

</div>

通过 javascript 创建。
<div id=”rr” style=”width:x;”></div>

<script type=”text/javascript”>

$(function(){

$(‘#rr’).ribbon({

data:data

});

});

</script>

属性

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

事件

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

方法

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

声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 嗅谱网
转载请注明：转自《EasyUI-Ribbon（Ribbon 界面）》
本文地址：http://www.xiupu.net/archives-2651.html
关注公众号：