jQuery EasyUI-Erweiterung -Ribbon

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung

Ribbon-Dateien einbinden

Um eine Ribbon-Komponente zu erstellen, müssen Sie die Dateien 'ribbon.css', 'ribbon-icon.css' und 'jquery.ribbon.js' einbinden.

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

Ribbon erstellen

Aus Markup erstellen.

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

Mit JavaScript erstellen.

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

Eigenschaften

Diese Eigenschaft wird von Tabs geerbt, unten sind die für Ribbon hinzugefügten Eigenschaften aufgeführt.

Name Type Beschreibung Standardwert
data Objekt Das Beschreibungsobjekt von Ribbon. undefined

Ereignisse

Dieses Ereignis wird von Tabs geerbt, unten sind die für Ribbon hinzugefügten Ereignisse aufgeführt.

Name Parameters Beschreibung
onClick name,target Wird ausgelöst, wenn auf eine Schaltfläche geklickt wird. Zu den Parametern gehören:
name: der Name der Schaltfläche.
target: das angeklickte DOM-Element.

Methoden

Diese Methode erweitert tabs, unten sind die für Ribbon hinzugefügten Methoden aufgeführt.

Name Parameters Beschreibung
loadData data Ribbon-Daten herunterladen.

jQuery EasyUI-Beispiele herunterladen

jquery-easyui-ribbon.zip

jQuery EasyUI 扩展jQuery EasyUI-Erweiterung Weitere Erweiterungen