Диджит Menu моделирует контекстное меню, подобное тому, что появляется, если щелкнуть правой кнопкой мыши на ярлыке приложения или на поверхности рабочего стола. Диджит Menu содержит в себе виджеты MenuItem, являющиеся обычными пунктами меню, которые можно выбирать, или виджеты PopupMenuItem, образующие еще один слой элементов меню (напоминая меню кнопки Пуск (Start) в операционной системе Windows). Дочерним для PopupMenuItem является другой диджит Menu. Теоретически с помощью диджитов PopupMenuItem и MenuItem можно было бы реализовать иерархические меню любой степени вложенности, хотя такое решение нельзя назвать мудрым с точки зрения простоты и удобства.
Для начала рассмотрим простое меню, состоящее только из диджитов MenuItem, как показано в примере 15.4.
Пример 15.4. Пример типичного использования диджита Menu
(body class="tundra")
<!-- щелчок правой кнопкой мыши здесь приводит к появлению контекстного меню -->
<div id="context" style="background:#eee; height:300px;
width:300px;"></div>
<div dojoType="dijit.Menu" targetNodeIds="context" style="display:none">
<div dojoType="dijit.MenuItem">foo
<script type="dojo/method" event="onClick" args="evt">
console.log("foo");
</script>
</div>
<div dojoType="dijit.MenuItem">bar
<script type="dojo/method" event="onClick" args="evt">
console.log("bar");
</script>
</div>
<div dojoType="dijit.MenuItem">baz
<script type="dojo/method" event="onClick" args="evt">
console.log("baz");
</script>
</div>
</div>
(/body)
Как видите, в разметке приходится делать совсем немного, что только упрощает возможность использования меню. Единственное, на что следует обратить внимание, это строка, где значение атрибута стиля display устанавливается равным none, – это очень важно, потому что без этого ваше меню будет видимо изначально.
Теперь предположим, что нам необходимо, чтобы пункт baz был реализован диджитом PopupMenuItem, а само меню было бы контекстным для всего окна. Сделать это можно, как показано ниже:
<div dojoType="dijit.Menu" style="display:none"
contextualMenuForWindow="true">
<div dojoType="dijit.MenuItem">foo
<script type="dojo/method" event="onClick" args="evt">
console.log("foo");
</script>
</div>
<div dojoType="dijit.MenuItem">bar
<script type="dojo/method" event="onClick" args="evt">
console.log("bar");
</script>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>baz</span>
<div dojoType="dijit.Menu">
<!YY определить обработчики события onClick
для каждого элемента YY>
<div dojoType="dijit.MenuItem">yabba</div>
<div dojoType="dijit.MenuItem">dabba</div>
<div dojoType="dijit.MenuItem">doo</div>
</div>
</div>
</div>
Хотелось бы надеяться, что самой хитрой для вас частью в установке PopupMenuItem оказалась необходимость явного определения первого дочернего узла, играющего роль заголовка.
В завершение раздела о Menu в табл. 15.6 приводится перечень особенностей, составляющих программный интерфейс диджита. Обратите внимание, что, будучи наследником класса _Container, диджит Menu имеет ключевые методы добавления, удаления и получения дочерних элементов, так же как Toolbar и другие подобные диджиты.