ddmenu – это простой скрипт, основанный на Mootools, и позволяющий создавать собственные контекстные меню для разных элементов на странице. По умолчанию, вид меню очень похож на системное – с иконками слева, заголовком меню, но вид можно изменять из подключаемой таблицы стилей. Появляется меню плавно, с применением fade эффекта (можно настраивать). Также можно активировать/деактивировать любые элементы меню. Браузеры, в которых протестирован скрипт – Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 под Windows. Firefox 2, Safari 3 под Mac OS X.
В комбинации с нажатой клавишей CTRL, щелчок правой кнопкой мыши покажет меню браузера, а при нажатой клавише SHIFT будут показаны оба меню.
Для установки скрипта, подключите библиотеку mootools, скрипт ddmenu и стиль для него – ddmenu.css:
<link rel="stylesheet" href="css/ddmenu.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/moo.ddmenu.0.2.js"></script>
Создайте HTML меню с элементами, и укажите ID для каждого из них:
<div class="ddmenu def" id="ddmenu2" style="display:none"> <ul> <li class="title">Menu Title</li> <li class="item" id="menu_item1"><a href="#">My item 1</a></li> <li class="item" id="menu_item2"><a href="#">My item 2</a></li> <li class="item" id="menu_big_item"><a href="#">This is a oversized item...</a></li> <li class="sepline"></li> <li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Another item</a></li> <li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Disabled item</a></li> <li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">With icon</a></li> <li class="sepline"></li> <li class="item" id="menu_spec_links"><a href="#">Enable on Links</a></li> <li class="item" id="menu_spec_texts"><a href="#">Enable on Texts</a></li> <li class="item" id="menu_spec_images"><a href="#">Enable on Images</a></li> </ul> </div>
Здесь, div с классом ddmenu def – это контейнер меню, элемент с классом title – заголовок, элементы, имеющие класс item и sepline – соответственно элементы меню и разделители. Контейнеру обязательно должен быть присвоен свой ID, это нужно для инициализации (см. ниже).
И последнее – инициализация:
function init () {
pagemenu = new DDMenu ('ddmenu2', document, {
onOpen: function (e) {
// активировать все элементы меню
this.enableItems(true);
// деактивировать menu_item_with_icon2
this.enableItems('menu_item_with_icon2',false);
},
onItemSelect: function (act_id, act_el, menu_bindon) {
console.info("Действие -> id элемента меню: \"%s\" вызвано из: %o в %o", act_id, act_el, menu_bindon)
}
});
}
В класс DDMenu нужно передать ID меню (в нашем примере это ddmenu2), элемент к которому привязано меню (document), а также объект с параметрами меню. В примере, в качестве параметров, мы передаем две функции onOpen и onItemSelect. Первая вызывается при открытии меню, вторая при выборе элемента. Функция onItemSelect принимает три аргумента: ID элемента, который выбрал пользователь, элемент из которого вызвано меню, и элемент, к которому привязано меню (в примере это аргументы act_id, act_el и menu_bindon).
Список всех опций
- onOpen – обработчик для события onOpen (открывание меню)
- onClose – обработчик для события onClose (закрывание меню)
- onItemSelect – обработчик для события onItemSelect (выбор элемента меню)
- observe_disabled_items – вызывать onItemSelect() на неактивных элементах? (по умолчанию false)
- rightclick_to_open – открывать меню при правом щелчке мышью (по умолчанию true)
- crtl_switch – позволяет переключаться между ddmenu и меню браузера при помощи CTRL (по умалчанию true)
- shift_with_contentmenu – показывает вместе ddmenu и меню браузера при нажатом SHIFT (по умолчанию true)
- fade_in – плавное появление меню (по умолчанию true)
- cursorx, cursory – расстояние до курсора по вертикали (по умолчанию 2 и 1)
- opacity – прозрачность меню (по умолчанию 0.95)
Посмотреть демо и скачать плагин можно здесь
