EasyUI-Ribbon(Ribbon 界面)

 首先介绍一下ribbon概念:

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

n.带; 绶带; (打印机的)色带; 带状物;

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

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


界面优势

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

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

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

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

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

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

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

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

 

导入 Ribbon 文件

要创建一个 ribbon 组件,需要导入 ‘ribbon.css'‘ribbon-icon.css' ‘jquery.ribbon.' 文件。

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

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


创建 Ribbon

通过标签创建 

通过  创建。

$(function(){

$(‘#rr').ribbon({

data:data

});

});

属性

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

属性名

属性值类型

描述

默认

data

object

Ribbon 描述对象。

undefined

事件

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

事件名

参数

描述

onClick

name,target

在点击按钮的时候触发。参数包括:
name
:按钮名称。
target
:点击的 DOM 元素。

方法

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

方法名

方法参数

描述

loadData

data

读取 Ribbon 数据。

声明: 除非转自他站(如有侵权,请联系处理)外,本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明:转自《EasyUI-Ribbon(Ribbon 界面)
本文地址:https://www.zhiletu.com/archives-2651.html
关注公众号:智乐兔

赞赏

wechat pay微信赞赏alipay pay支付宝赞赏

上一篇
下一篇

相关文章

在线留言

你必须 登录后 才能留言!

在线客服
在线客服 X

售前: 点击这里给我发消息
售后: 点击这里给我发消息

智乐兔官微