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)

Посмотреть демо и скачать плагин можно здесь

Запись добавлена 19 апреля 2008 в категории MooTools.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.