Extension jQuery EasyUI -Ribbon

jQuery EasyUI 扩展Extension jQuery EasyUI

Inclure les fichiers Ribbon

Pour créer un composant Ribbon, vous devez inclure les fichiers 'ribbon.css', 'ribbon-icon.css' et '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>

Création de Ribbon

Créer à partir du balisage.

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

Créer en utilisant javascript.

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

Propriétés

Cette propriété hérite de tabs, vous trouverez ci-dessous les propriétés ajoutées pour Ribbon.

Name Type Description Valeur par défaut
data objet L'objet description de Ribbon. undefined

Événements

Cet événement hérite de tabs, vous trouverez ci-dessous les événements ajoutés pour Ribbon.

Name Parameters Description
onClick name,target Déclenché lors du clic sur un bouton. Les paramètres incluent :
name: le nom du bouton.
target: l'élément DOM cliqué.

Méthodes

Cette méthode étend tabs, ci-dessous se trouvent les méthodes ajoutées pour Ribbon.

Name Parameters Description
loadData data Télécharger les données de Ribbon.

Télécharger les exemples jQuery EasyUI

jquery-easyui-ribbon.zip

jQuery EasyUI 扩展Extension jQuery EasyUI Autres extensions