ddmenu - создаем собственное контекстное меню

Главная

Статьи

Веб-программирование

16.09.2008 19:21

ddmenu - контекстное меню

ddmenu - это простой скрипт, основанный на js-framework Mootools, который позволяет создавать собственные контекстные меню.

Возможности:

Внешний вид меню легко настраивается с помощью CSS. Можно добавлять иконки, заголовки, настраивать в соответствии с дизайном.
Для включения контекстного меню используемого в браузере по-умолчанию, необходимо нажать Ctrl + правая клавиша мыши.
При нажатии Shift + правая клавиша мыши открываются оба меню, используемое по-умолчанию и ddmenu.
Скрипт протестирован в Firefox 3, Safari 3, Internet Explorer 6/7, Opera 9. В Opera 9 контекстное меню работает при нажатии Ctrl + левая клавиша мыши
Также есть возможность активировать и дезактивировать отдельные пункты меню.

Для того чтобы активировать меню на своей странице необходимо подключить mootools.ddmenu.v1.js and ddmenu.css

<link rel="stylesheet" href="ddmenu.css" type="text/css" media="screen" />

<script type="text/javascript" src="mootools-1.2-core-yc.js"></script>

<script type="text/javascript" src="mootools.ddmenu.v1.js"></script>

Теперь создаем непосредственно само меню:

<div class="ddmenu def" id="ddmenu2" style="display:none">

<ul>

<li class="title">Меню</li>

<li class="item" id="menu_item1"><a href="http://">Веб-программирование</a></li>

<li class="item" id="menu_item2"><a href="http://">Верстка</a></li>

<li class="item" id="menu_big_item"><a href="http://">Обзор ПО</a></li>

<li class="sepline"></li>

<li class="item" id="menu_item_with_icon1"><a class="objects" href="http://">Каталог</a></li>

<li class="item" id="menu_item_with_icon2"><a class="letter" href="http://">Карта сайта</a></li>

<li class="item" id="menu_item_with_icon3"><a class="umbrella" href="http://">Обратная связь</a></li>

<li class="sepline"></li>

<li class="item" id="menu_spec_links"><a href="http://forum.webmasters.by">Форум</a></li>

<li class="item" id="menu_spec_texts"><a href="http://webmasters.by/news.html">Новости</a></li>

</ul>

</div>

И, наконец, инициализация меню.

function iniz () {

 pagemenu = new DDMenu ('ddmenu2', 'area', {            //ddmenu - это id меню, 

 //area - id блока на котором у нас работает меню, для того что бы меню работало на всей страницы заменяем 'area' на document.

 onOpen: function (e) { 

 this.enableItems(true);                          //активировать все пункты

 this.enableItems('menu_item_with_icon2',false);  //дезактивировать menu_item_with_icon2

 }, 

 onItemSelect: function (act_id, act_el, menu_bindon) {

 console.info("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, menu_bindon) 

 }

 });

}