jQuery EasyUI Menu and Button Plugin -Меню

jQuery EasyUI 插件jQuery EasyUI Плагины

Переопределить значения по умолчанию через $.fn.menu.defaults.

Меню обычно используется для контекстных меню. Это базовый компонент для создания других компонентов меню (таких как menubutton, splitbutton). Оно также может использоваться для навигации и выполнения команд.

Использование

Создание меню

Чтобы создать меню из разметки, добавьте класс 'easyui-menu' к разметке <div>. Каждый пункт меню создаётся через разметку <div>. Мы можем добавить свойство 'iconCls' к пункту меню, чтобы определить значок, отображаемый слева от пункта меню. Добавление класса 'menu-sep' к пункту меню создаст разделитель меню.

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

Создайте меню программно и прослушивайте событие 'onClick'.

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

Показать меню

При создании меню оно скрыто и невидимо. Вызовите метод 'show', чтобы показать меню.

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

Элемент меню

Элемент меню представляет отдельный элемент, отображаемый в меню. Он содержит следующие свойства:

Name Type Описание Значение по умолчанию
id string Свойство id элемента меню.
text string Текст элемента.
iconCls string CSS-класс, который отображает значок 16x16 в левой части элемента.
href string Позиция страницы, которую нужно установить при нажатии на элемент меню.
disabled логическое значение Определяет, отключать ли элемент меню. false
onclick функция Функция, вызываемая при нажатии на элемент меню.

Свойства меню

Name Type Описание Значение по умолчанию
zIndex число Стиль z-index меню, значение которого увеличивается относительно него. 110000
left число Левая позиция меню. 0
top число Верхняя позиция меню. 0
minWidth число Минимальная ширина меню. Это свойство доступно начиная с версии 1.3.2. 120
hideOnUnhover логическое значение Если установлено значение true, меню автоматически скрывается, когда курсор мыши покидает его. Это свойство доступно начиная с версии 1.3.5. истина

События меню

Name Parameters Описание
onShow none Срабатывает после отображения меню.
onHide none Срабатывает после скрытия меню.
onClick item Срабатывает при щелчке по пункту меню. В следующем примере показано, как обрабатывать все щелчки по пунктам меню:
<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>

Методы меню

Name Parameters Описание
options none Возвращает объект options.
show pos Показывает меню в указанной позиции.
Параметр pos имеет два свойства:
left: новая левая позиция.
top: новая верхняя позиция.
hide none Скрывает меню.
destroy none Уничтожает меню.
getItem itemEl Получает свойства пункта меню, включая свойство 'target' (указывающее на DOM-элемент этого пункта). Следующий пример демонстрирует, как получить указанный пункт по 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 Устанавливает текст указанного пункта меню. Параметр 'param' содержит два свойства:
target: объект DOM, пункт меню, для которого выполняется установка.
text: строка, новое текстовое значение.

Пример кода:
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
    target: item.target,
    text: 'Saving'
});
setIcon param Устанавливает иконку указанного пункта меню. Параметр 'param' содержит два свойства:
target: DOM-объект, т. е. пункт меню.
iconCls: CSS-класс новой иконки.

Пример кода:
$('#mm').menu('setIcon', {
    target: $('#m-open')[0],
    iconCls: 'icon-closed'
});
findItem text Находит указанный пункт меню; возвращаемый объект такой же, как у метода getItem.
Пример кода:
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appendItem options Добавляет новый пункт меню; параметр 'param' задаёт свойства нового пункта. По умолчанию добавленный пункт будет пунктом меню верхнего уровня. Чтобы добавить подпункт меню, задайте свойство 'parent', указывающее на родительский элемент, у которого уже есть подпункты.
Пример кода:
// 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 Удаляет указанный пункт меню.
enableItem itemEl Делает пункт меню доступным.
disableItem itemEl Отключает пункт меню.
jQuery EasyUI 插件Плагины jQuery EasyUI Другие расширения