Plugin Menu et Bouton de jQuery EasyUI -Menu

jQuery EasyUI 插件Plugins jQuery EasyUI

Remplacer les valeurs par défaut via $.fn.menu.defaults.

Le menu est généralement utilisé pour les menus contextuels. Il est le composant de base pour créer d'autres composants de menu (tels que menubutton, splitbutton). Il peut également être utilisé pour la navigation et l'exécution de commandes.

Utilisation

Créer un menu

Pour créer un menu à partir du balisage, ajoutez la classe 'easyui-menu' au balisage <div>. Chaque élément de menu est créé via le balisage <div>. Nous pouvons ajouter la propriété 'iconCls' à l'élément de menu pour définir une icône affichée à gauche de l'élément de menu. L'ajout de la classe 'menu-sep' à un élément de menu produira un séparateur de menu.

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

Créer le menu par programmation et écouter l'événement 'onClick'.

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

Afficher le menu

Lorsque le menu est créé, il est masqué et invisible. Appelez la méthode 'show' pour afficher le menu.

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

Élément de menu

Un élément de menu représente un élément distinct affiché dans un menu. Il contient les propriétés suivantes :

Name Type Description Valeur par défaut
id string La propriété id de l'élément de menu.
text string Le texte de l'élément.
iconCls string Une classe CSS qui affiche une icône 16x16 sur le côté gauche de l'élément.
href string La position de page à définir lors du clic sur l'élément de menu.
disabled booléen Définit s'il faut désactiver l'élément de menu. false
onclick fonction La fonction à appeler lorsque l'élément de menu est cliqué.

Propriétés du menu

Name Type Description Valeur par défaut
zIndex nombre Style z-index du menu, incrémenté à partir de celui-ci. 110000
left nombre La position gauche du menu. 0
top nombre La position supérieure du menu. 0
minWidth nombre La largeur minimale du menu. Cette propriété est disponible depuis la version 1.3.2. 120
hideOnUnhover booléen Si défini sur true, le menu est automatiquement masqué lorsque la souris le quitte. Cette propriété est disponible depuis la version 1.3.5. vrai

Événements du menu

Name Parameters Description
onShow none Déclenché après l'affichage du menu.
onHide none Déclenché après le masquage du menu.
onClick item Déclenché lorsqu'un élément de menu est cliqué. L'exemple suivant montre comment gérer tous les clics sur les éléments de menu :
<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>

Méthodes du menu

Name Parameters Description
options none Renvoie l'objet options.
show pos Affiche le menu à la position spécifiée.
Le paramètre pos a deux propriétés :
left : la nouvelle position à gauche.
top : la nouvelle position supérieure.
hide none Masque le menu.
destroy none Détruit le menu.
getItem itemEl Récupère les propriétés de l'élément de menu, y compris la propriété 'target' (indiquant l'élément DOM de l'élément). L'exemple suivant montre comment obtenir l'élément spécifié par id :
<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 Définit le texte de l'élément de menu spécifié. Le paramètre 'param' contient deux propriétés :
target : l'objet DOM, l'élément de menu à définir.
text : chaîne de caractères, la nouvelle valeur de texte.

Exemple de code :
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
    target: item.target,
    text: 'Saving'
});
setIcon param Définit l'icône de l'élément de menu spécifié. Le paramètre 'param' contient deux propriétés :
target : l'objet DOM, c'est-à-dire l'élément de menu.
iconCls : la classe CSS de la nouvelle icône.

Exemple de code :
$('#mm').menu('setIcon', {
    target: $('#m-open')[0],
    iconCls: 'icon-closed'
});
findItem text Recherche l'élément de menu spécifié, l'objet renvoyé est identique à celui de la méthode getItem.
Exemple de code :
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options Ajoute un nouvel élément de menu, le paramètre 'param' indique les propriétés du nouvel élément. Par défaut, l'élément nouvellement ajouté sera un élément de menu de premier niveau. Pour ajouter un sous-élément de menu, définissez la propriété 'parent' pour indiquer l'élément parent qui possède déjà des sous-éléments.
Exemple de code :
// 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 Supprime l'élément de menu spécifié.
enableItem itemEl Active l'élément de menu.
disableItem itemEl Désactive l'élément de menu.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions