jQuery EasyUI Plugin de Menú y Botones -Menú

jQuery EasyUI 插件jQuery EasyUI Plugin

Sobrescriba los defaults predeterminados mediante $.fn.menu.defaults.

El menú (Menu) se usa generalmente para menús contextuales. Es el componente base para crear otros componentes de menú (como menubutton, splitbutton). También se puede usar para la navegación y la ejecución de comandos.

Uso

Crear un menú (Menu)

Para crear un menú (menu) mediante marcado, se debe añadir la clase 'easyui-menu' a la etiqueta <div>. Cada elemento de menú (menu item) se crea mediante la etiqueta <div>. Podemos añadir el atributo 'iconCls' al elemento de menú (menu item) para definir un icono que se muestra a la izquierda del elemento. Añadir la clase 'menu-sep' al elemento de menú (menu item) producirá un separador de menú.

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

Crear programáticamente un menú (menu) y escuchar el evento 'onClick'.

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

Mostrar el menú (Menu)

Cuando se crea el menú (menu), está oculto e invisible. Llame al método 'show' para mostrar el menú (menu).

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

Elementos de menú

Un elemento de menú (menu item) representa un elemento individual que se muestra en el menú. Contiene las siguientes propiedades:

Nombre Tipo Descripción Valor predeterminado
id string El atributo id del elemento de menú (menu item).
text string El texto del elemento.
iconCls string La clase CSS que muestra un icono de 16x16 a la izquierda del elemento.
href string Establece la posición de la página al hacer clic en el elemento de menú (menu item).
disabled boolean Define si el elemento de menú (menu item) está deshabilitado. false
onclick function La función que se llama al hacer clic en el elemento de menú (menu item).

Propiedades del menú

Nombre Tipo Descripción Valor predeterminado
zIndex number El estilo z-index del menú (Menu), desde el cual comienza a incrementarse. 110000
left number La posición izquierda del menú (Menu). 0
top number La posición superior del menú (Menu). 0
minWidth number El ancho mínimo del menú (Menu). Esta propiedad está disponible desde la versión 1.3.2. 120
hideOnUnhover boolean Si se establece en true, el menú (menu) se oculta automáticamente cuando el mouse lo abandona. Esta propiedad está disponible desde la versión 1.3.5. true

Eventos del menú

Nombre Parámetros Descripción
onShow none Se dispara después de que el menú (menu) se muestre.
onHide none Se dispara después de que el menú (menu) se oculte.
onClick item Se dispara al hacer clic en un elemento de menú (menu item). El siguiente ejemplo demuestra cómo manejar los clics en todos los elementos de menú:
<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étodos del menú

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
show pos Muestra el menú (menu) en la posición especificada.
El parámetro pos tiene dos propiedades:
left: la nueva posición izquierda.
top: la nueva posición superior.
hide none Oculta el menú (menu).
destroy none Destruye el menú (menu).
getItem itemEl Obtiene las propiedades del elemento de menú (menu item) que contienen el atributo 'target' (que indica el elemento DOM del elemento). El siguiente ejemplo demuestra cómo obtener el elemento especificado por 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 Establece el texto para el elemento de menú (menu item) especificado. El parámetro 'param' contiene dos propiedades:
target: el objeto DOM, el elemento de menú (menu item) que se va a establecer.
text: cadena, el nuevo valor de texto.

Ejemplo de código:
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
    target: item.target,
    text: 'Saving'
});
setIcon param Establece el icono para el elemento de menú (menu item) especificado. El parámetro 'param' contiene dos propiedades:
target: el objeto DOM, es decir, el elemento de menú (menu item).
iconCls: la clase CSS del nuevo icono.

Ejemplo de código:
$('#mm').menu('setIcon', {
    target: $('#m-open')[0],
    iconCls: 'icon-closed'
});
findItem text Encuentra el elemento de menú (menu item) especificado y devuelve un objeto igual al del método getItem.
Ejemplo de código:
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options Agrega un nuevo elemento de menú (menu item). El parámetro 'param' indica las propiedades del nuevo elemento. De forma predeterminada, el nuevo elemento se agregará como un elemento de menú (menu item) de nivel superior. Si se necesita agregar un subelemento de menú, debe establecerse la propiedad 'parent' para indicar el elemento padre que ya tiene subelementos.
Ejemplo de código:
// 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 Elimina el elemento de menú (menu item) especificado.
enableItem itemEl Habilita el elemento de menú (menu item).
disableItem itemEl Deshabilita el elemento de menú (menu item).
jQuery EasyUI 插件jQuery EasyUI Plugin Otras extensiones