Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI zum Erstellen von Menüs und Buttons_jquery

1. Erstellen Sie ein einfaches Menü mit EasyUI

Menü ist in einigen DIV-Tags definiert, wie unten gezeigt:

<div id="mm" class="easyui-menu" style="width:120px;">
 <div onclick="javascript:alert('new')">New</div>
 <div>
 <span>Open</span>
 <div style="width:150px;">
 <div><b>Word</b></div>
 <div>Excel</div>
 <div>PowerPoint</div>
 </div>
 </div>
 <div icon="icon-save">Save</div>
 <div class="menu-sep"></div>
 <div>Exit</div>
</div>

Wenn das Menü erstellt wird, wird es nicht angezeigt, um es anzuzeigen, oder die Methode „hide“, um es auszublenden:

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

2. EasyUI-Erstellungsschaltfläche
1. EasyUI erstellt einen Link-Button (Link-Button)
Normalerweise werden Schaltflächen mit dem Element <button> erstellt, während Linkschaltflächen (Link-Schaltflächen) mit dem Element <a> erstellt werden. Eigentlich ist eine Link-Schaltfläche (Link-Schaltfläche) ein <a>-Element, das als Schaltflächenstil angezeigt wird.

Um einen Link-Button zu erstellen, müssen Sie lediglich ein Klassenattribut namens „easyui-linkbutton“ zum <a>-Element hinzufügen:

<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
 <a href="#" class="easyui-linkbutton">text button</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
</div>
 
<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
 <a href="#" class="easyui-linkbutton" plain="true">text button</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
</div>

Wie Sie sehen können, ist die iconCls-Eigenschaft ein CSS-Klassenstil für Symbole, der ein Symbolbild auf der Schaltfläche anzeigt.
Manchmal müssen Sie eine Link-Schaltfläche deaktivieren oder aktivieren. Der folgende Code zeigt, wie Sie eine Link-Schaltfläche deaktivieren:
$(selector).linkbutton('disable'); // die Methode 'disable' aufrufen
2. EasyUI erstellt eine Menüschaltfläche (Menüschaltfläche)
Menüschaltfläche enthält eine Schaltfläche und eine Menükomponente. Wenn Sie auf die Schaltfläche klicken oder die Maus darüber bewegen, wird ein entsprechendes Menü angezeigt.

Um eine Menüschaltfläche zu definieren, sollten Sie eine Linkschaltfläche und ein Menü definieren. Hier ist ein Beispiel:

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
 <a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
 <a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
 <div iconCls="icon-undo">Undo</div>
 <div iconCls="icon-redo">Redo</div>
 <div class="menu-sep"></div>
 <div>Cut</div>
 <div>Copy</div>
 <div>Paste</div>
 <div class="menu-sep"></div>
 <div iconCls="icon-remove">Delete</div>
 <div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
 <div>Help</div>
 <div>Update</div>
 <div>About</div>
</div>

Da nun eine Menüschaltfläche definiert wurde, müssen Sie keinen Javascript-Code mehr schreiben.
3. EasyUI erstellt eine geteilte Schaltfläche (Split Button)

Split-Schaltfläche Enthält eine Link-Schaltfläche und ein Menü. Wenn der Benutzer auf den Abwärtspfeilbereich klickt oder mit der Maus darüber fährt, wird ein entsprechendes Menü angezeigt. Dieses Beispiel zeigt, wie eine Split-Schaltfläche erstellt und verwendet wird.

Wir erstellen einen Split-Button und einen Link-Button:

<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
 <a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a>
 <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
 <div iconCls="icon-undo">Undo</div>
 <div iconCls="icon-redo">Redo</div>
 <div class="menu-sep"></div>
 <div>Cut</div>
 <div>Copy</div>
 <div>Paste</div>
 <div class="menu-sep"></div>
 <div>
 <span>Open</span>
 <div style="width:150px;">
 <div>Firefox</div>
 <div>Internet Explorer</div>
 <div class="menu-sep"></div>
 <div>Select Program...</div>
 </div>
 </div>
 <div iconCls="icon-remove">Delete</div>
 <div>Select All</div>
</div>

Da nun eine Split-Schaltfläche definiert wurde, müssen Sie keinen Javascript-Code mehr schreiben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.