jQuery EasyUI Extensión -Ribbon

jQuery EasyUI 扩展jQuery EasyUI Extensión

Incluir los archivos de Ribbon

Para crear un componente Ribbon, debe incluir los archivos 'ribbon.css', 'ribbon-icon.css' y 'jquery.ribbon.js'.

<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.html">
<link rel="stylesheet" type="text/css" href="ribbon-icon.css.html">
<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.html"></script>

Crear Ribbon

Crear desde el marcado.

    <div class="easyui-ribbon" style="width:700px;">
    <div title="Home">
    <div class="ribbon-group">
    <div class="ribbon-toolbar">
    <a href="../index.html" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">Paste</a>
    </div>
    <div class="ribbon-toolbar">
    <a href="../index.html" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">Cut</a><br>
    <a href="../index.html" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">Copy</a><br>
    <a href="../index.html" 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>

Crear usando JavaScript.

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

Propiedades

Estas propiedades se extienden desde las pestañas (tabs). A continuación se muestran las propiedades añadidas para Ribbon.

Nombre Tipo Descripción Valor por defecto
data object Objeto de descripción del ribbon. undefined

Eventos

Estos eventos se extienden desde las pestañas (tabs). A continuación se muestran los eventos añadidos para Ribbon.

Nombre Parámetros Descripción
onClick name,target Se dispara al hacer clic en un botón. Los parámetros incluyen:
name: el nombre del botón.
target: el elemento DOM al que se hizo clic.

Métodos

Estos métodos se extienden desde las pestañas (tabs). A continuación se muestran los métodos añadidos para Ribbon.

Nombre Parámetros Descripción
loadData data Descargar datos de Ribbon.

Descargar ejemplos de jQuery EasyUI

jquery-easyui-ribbon.zip

jQuery EasyUI 扩展jQuery EasyUI Extensión Otras extensiones