jQuery EasyUI Menu- und Button-Plugin -Menü

jQuery EasyUI 插件jQuery EasyUI Plugins

Standardwerte über $.fn.menu.defaults überschreiben.

Das Menü wird normalerweise für Kontextmenüs verwendet. Es ist die Basiskomponente zum Erstellen anderer Menükomponenten (wie menubutton, splitbutton). Es kann auch für Navigation und zum Ausführen von Befehlen verwendet werden.

Nutzung

Menü erstellen

Um ein Menü aus Markup zu erstellen, fügen Sie dem <div>-Markup die Klasse 'easyui-menu' hinzu. Jedes Menüelement wird über <div>-Markup erstellt. Wir können dem Menüelement die Eigenschaft 'iconCls' hinzufügen, um ein Symbol zu definieren, das auf der linken Seite des Menüelements angezeigt wird. Das Hinzufügen der Klasse 'menu-sep' zu einem Menüelement erzeugt einen Menütrenner.

<div id="mm" class="easyui-menu" style="width:120px;">
    <div>New</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>

Erstellen Sie das Menü programmatisch und lauschen Sie auf das 'onClick'-Ereignis.

$('#mm').menu({
    onClick:function(item){
        //...
    }
});

Menü anzeigen

Wenn das Menü erstellt wird, ist es ausgeblendet und unsichtbar. Rufen Sie die Methode 'show' auf, um das Menü anzuzeigen.

$('#mm').menu('show', {
    left: 200,
    top: 100
});

Menüelement

Ein Menüelement repräsentiert ein separates Element, das in einem Menü angezeigt wird. Es enthält die folgenden Eigenschaften:

Name Type Beschreibung Standardwert
id string Die id-Eigenschaft des Menüelements.
text string Der Text des Elements.
iconCls string Eine CSS-Klasse, die ein 16x16-Symbol auf der linken Seite des Elements anzeigt.
href string Die Seitenposition, die beim Klicken auf das Menüelement festgelegt wird.
disabled boolesch Legt fest, ob das Menüelement deaktiviert werden soll. false
onclick Funktion Die Funktion, die aufgerufen wird, wenn auf das Menüelement geklickt wird.

Menüeigenschaften

Name Type Beschreibung Standardwert
zIndex number Der z-index-Stil des Menüs, ausgehend von diesem erhöht. 110000
left number Die linke Position des Menüs. 0
top number Die obere Position des Menüs. 0
minWidth number Die minimale Breite des Menüs. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. 120
hideOnUnhover boolesch Wenn auf true gesetzt, wird das Menü automatisch ausgeblendet, wenn die Maus es verlässt. Diese Eigenschaft ist seit Version 1.3.5 verfügbar. wahr

Menü-Ereignisse

Name Parameters Beschreibung
onShow none Wird ausgelöst, nachdem das Menü angezeigt wurde.
onHide none Wird ausgelöst, nachdem das Menü ausgeblendet wurde.
onClick item Wird ausgelöst, wenn ein Menüelement angeklickt wird. Das folgende Beispiel zeigt, wie alle Klicks auf Menüelemente behandelt werden:
<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
    <div data-options="name:'new'">New</div>
    <div data-options="name:'save',iconCls:'icon-save'">Save</div>
    <div data-options="name:'print',iconCls:'icon-print'">Print</div>
    <div class="menu-sep"></div>
    <div data-options="name:'exit'">Exit</div>
</div>
<script type="text/javascript">
    function menuHandler(item){
        alert(item.name)
    }
</script>

Menü-Methoden

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
show pos Zeigt das Menü an der angegebenen Position an.
Der Parameter pos hat zwei Eigenschaften:
left: die neue linke Position.
top: die neue obere Position.
hide none Blendet das Menü aus.
destroy none Zerstört das Menü.
getItem itemEl Ruft die Eigenschaften des Menüeintrags ab, einschließlich der Eigenschaft 'target' (die das DOM-Element des Eintrags angibt). Das folgende Beispiel zeigt, wie der angegebene Eintrag anhand der id abgerufen wird:
<div id="mm" class="easyui-menu" style="width:120px">
    <div>New</div>
    <div id="m-open">Open</div>
    <div>Save</div>
</div>

var itemEl = $('#m-open')[0];  // the menu item element
var item = $('#mm').menu('getItem', itemEl);
console.log(item);
setText param Legt den Text des angegebenen Menüeintrags fest. Der Parameter 'param' enthält zwei Eigenschaften:
target: das DOM-Objekt, der Menüeintrag, der festgelegt werden soll.
text: String, der neue Textwert.

Codebeispiel:
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
    target: item.target,
    text: 'Saving'
});
setIcon param Legt das Symbol des angegebenen Menüeintrags fest. Der Parameter 'param' enthält zwei Eigenschaften:
target: das DOM-Objekt, d. h. der Menüeintrag.
iconCls: die CSS-Klasse des neuen Symbols.

Codebeispiel:
$('#mm').menu('setIcon', {
    target: $('#m-open')[0],
    iconCls: 'icon-closed'
});
findItem text Findet den angegebenen Menüeintrag; das zurückgegebene Objekt ist dasselbe wie das der Methode getItem.
Codebeispiel:
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options Hängt einen neuen Menüeintrag an. Der Parameter 'param' gibt die Eigenschaften des neuen Eintrags an. Standardmäßig ist der neu hinzugefügte Eintrag ein Menüeintrag der obersten Ebene. Um einen Untermenüeintrag anzuhängen, legen Sie die Eigenschaft 'parent' fest, um das übergeordnete Element anzugeben, das bereits Untereinträge enthält.
Codebeispiel:
// append a top menu item
$('#mm').menu('appendItem', {
    text: 'New Item',
    iconCls: 'icon-ok',
    onclick: function(){alert('New Item')}
});
// append a menu separator
$('#mm').menu('appendItem', {
    separator: true
});
// append a sub menu item
var item = $('#mm').menu('findItem', 'Open');  // find 'Open' item
$('#mm').menu('appendItem', {
    parent: item.target,  // the parent item element
    text: 'Open Excel',
    iconCls: 'icon-excel',
    onclick: function(){alert('Open Excel')}
});
removeItem itemEl Entfernt den angegebenen Menüeintrag.
enableItem itemEl Aktiviert den Menüeintrag.
disableItem itemEl Deaktiviert den Menüeintrag.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen