顶部广告位

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-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'">粘贴</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:200px"></div>
                                                                                           
                                                                                    <div class="ribbon-group-title">其他标题</div>
                                                                                            </div>
                                                                                                <div class="ribbon-group-sep"></div>
                                                                                                </div>
                                                                                                </div>

通过 javascript 创建。

<div id="rr" style="width:700px;"></div>
                    <script type="text/javascript">
                            $(function(){
                                    $('#rr').ribbon({
                                           
                                    data:data
                                            });
                                            });
                                            </script>

属性

属性名 属性值类型 描述 默认
data object Ribbon 描述对象。 undefined

事件

事件名 参数 描述
onClick name,target 在点击按钮的时候触发。参数包括:
name:按钮名称。
target:点击的 DOM 元素。

方法

方法名 方法参数 描述
loadData data 读取 Ribbon 数据。

鄂ICP备16023636号 © 2017 菜鸟程序员