Как управлять классами виджетов Dojo или как получить детальное управление стилем

Question

Я создаю пользовательский интерфейс с dojo, который эмулирует некоторые аспекты существующего толстого клиентского приложения. Мне нужно программно поставить две разные строки меню на одной странице. Я успешно создал две строки меню, используя

new dijit.Menu();
new dijit.MenuItem();

и так далее. Теперь я хочу дать им немного другие стили представления. Поскольку у меня будет довольно много страниц такого рода, моей первой мыслью будет использование различных классов стилей CSS. И вот в чем проблема: когда я создаю Меню и его элементы, мы получаем целый набор HTML-объектов, каждый из которых имеет классы CSS, указанные в dojo, и классы одинаковы для элементов, связанных с любым меню. Как я могу лучше получить определенный контроль для любого одного меню?

Я мог бы определить сгенерированные додзё идентификаторы для каждого элемента и указать стили по идентификаторам, но это похоже на тяжелую работу. Есть ли разумный способ управления классами, определенными dojo, или хороший способ CSS выбирать только элементы, связанные с одной строкой меню?

Answer 1

Это код, который я использовал в соответствии с предложением Кайла (есть несколько синтаксических различий).

Я основываю свой код на примерах «baf / obe» в «Мастеринг додзё» Джилла и др.

var actionDef =  {
         id : "myactions",  /* well-defined id, to be used in css */
         commandItems: /* etc. as per Gill*/
                  })
} 

main.actions= new edf.dijit.MenuBand(actionDef);  /* constructs hierarchy of menu
                                                     and component items*/

с аналогичным кодом для другой строки меню.

Теперь запись css для одного из компонентов меню нижнего уровня

#myactions .dijitButtonText {
text-align: center;
padding: 0 0 0 0;
background-color: #dd8000;
font-size: 18px; 
font-weight: bold;

}

Где .dijitButtonText - это класс, определенный dojo и применяемый к меткам пунктов меню.

Это смешение селекторов "#id" и ".class" было частью, которую я не видел ни в одной из ссылок селекторов CSS, которые я нашел в Интернете.

Answer 2

В зависимости от названий вашей строки меню попробуйте

menubar1 ul
{styles here}

menubar1 li
{styles here}

menubar2 ul
{styles here}

menubar2 li
{styles here}

Простейший способ выбора различных элементов двух меню.