Apprenez facilement le plug-in jQuery EasyUI EasyUI pour créer des menus et des boutons_jquery

1. Créez un menu simple avec EasyUI

Le menu est défini dans certaines balises DIV, comme indiqué ci-dessous :

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

Lorsque le menu est créé, il ne sera pas affiché. Appelez la méthode 'show' pour l'afficher ou la méthode 'hide' pour le masquer :

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

2. Bouton de création EasyUI
1. EasyUI crée un bouton de lien (Link Button)
En règle générale, les boutons sont créés à l'aide de l'élément , tandis que les boutons de lien (Link Buttons) sont créés à l'aide de l'élément . Donc, en fait, un bouton de lien (Link Button) est un élément affiché sous forme de style de bouton.

Pour créer un bouton de lien, il vous suffit d'ajouter un attribut de classe appelé 'easyui-linkbutton' à l'élément

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

Comme vous pouvez le voir, la propriété iconCls est un style de classe CSS pour icône qui affiche une image d'icône sur le bouton.

Parfois, vous devez désactiver un bouton de lien ou l'activer. Le code suivant montre comment désactiver un bouton de lien :
. $(selector).linkbutton('disable'); // appelle la méthode 'disable'

2. EasyUI crée un bouton de menu (Bouton Menu)
Bouton Menu contient un bouton et un composant de menu Lorsque vous cliquez ou déplacez la souris sur le bouton, un menu correspondant s'affiche.

Afin de définir un bouton Menu, vous devez définir un bouton Lien et un menu. Voici un exemple :

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

Maintenant qu'un bouton de menu a été défini, vous n'avez plus besoin d'écrire de code javascript.

3. EasyUI crée un bouton partagé (Split Button)

Bouton partagé Contient un bouton de lien et un menu. Lorsque l'utilisateur clique ou passe la souris sur la zone de la flèche vers le bas, un menu correspondant s'affiche. Cet exemple montre comment créer et utiliser un bouton partagé.

Nous créons un bouton Split et un bouton Link :

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

Maintenant qu'un bouton partagé a été défini, vous n'avez plus besoin d'écrire de code javascript.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.