Создаем контекстное меню на Dojo и Dijit

Контекстное меню, используемое в веб-приложениях, может иметь неоценимое значение. На него можно вешать «быстрые» функции и благодаря быстрому вызову правой кнопкой мыши, легко доступно.

Dojo и Dijit фреймворки позволяют создавать меню абсолютно любого стиля за считаные минуты.

Dojo JavaScript

/* require necessary classes */

dojo.require('dijit.Menu');

dojo.require('dijit.MenuSeparator');

dojo.require('dijit.MenuItem');

dojo.require('dijit.PopupMenuItem');

Выше подключаются необходимые виджет классы для создания контекстного меню.

HTML

<-- menu container -->

<-- enabled menu item -->

<div dojoType="dijit.MenuItem" id="enabledItem" onClick="Clicked enabled item!">Enabled Item</div>

<-- disabled menu item -->

<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>

<-- separator -->

<-- menu items with icons -->

<div dojoType="dijit.MenuItem" iconClass="dijitIconCut"

onClick="alert('Cutting!')">Cut</div>

<div dojoType="dijit.MenuItem" iconClass="dijitIconCopy"

onClick="alert('not actually copying anything, just a test!')">Copy</div>

<-- nested popup menus with items -->

<span>Enabled Submenu</span>

<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>

<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>

<span>Deeper Submenu</span>

</div>

<-- popup menu with disabled item -->

<span>Disabled Submenu</span>

<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>

<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>

</div>

Меню состоит из вложенных DIV элементов. Верхний элемент — dijit.Menu виджет с потомками dijit.MenuItem. Вы также можете добавить dijit.MenuSeparator виджет или dijit.PopupMenuItem виджет с потомками dijit.MenuItem, чтобы создать всплывающее меню. Вы можете отключать элементы меню с помощью декларации «disabled='true'» или используя JavaScript: