Как дать меню, связанные с dijit додзё. ComboBox отличается от css из dijit.Menu

Question

Когда вы используете dijit.ComboBox, предложения с опережением вводятся как dijit.Menu. У меня есть дизайн, который требует, чтобы сопоставленная часть строк предложений была нормальной, а непревзойденная часть - жирной. Структура, которую создает dojo, выглядит следующим образом:

<ul class="dijitReset dijitMenu">
 <li role="option" class="dijitReset dijitMenuItem">
   <span class="dijitComboBoxHighlightMatch">Ch</span>oice One
 </li>
 <li role="option" class="dijitReset dijitMenuItem">
   <span class="dijitComboBoxHighlightMatch">Ch</span>oice Two
 </li>
</ul>

Так что я могу нацеливаться на совпавшую часть, но не на непревзойденную. Так что мой css должен быть примерно таким:

.dijitMenuItem { font-weight: bold; }
.dijitMenuItem .dijitComboBoxHighlightMatch { font-weight: normal; }

Проблема в том, что если я сделаю это, все меню будут выделены жирным шрифтом, и я этого не хочу. Просто делаю что-то вроде этого:

<select dojoType="dijit.form.ComboBox" class="foobar">[options]</select>

помещает класс foobar в ComboBox, но меню является независимым узлом, не входящим в эту иерархию.

Какой самый простой способ добавить класс css во всплывающее меню, которое генерирует ComboBox?

Answer 1

Оказывается, что html из dijit.Menu использует структуру таблицы, в то время как ComboBox использует список, поэтому мы можем различать наши CSS для двух, используя li.dijitMenuItem или tr.dijitMenuItem.

Answer 2

Я считаю, что в контейнере всплывающего меню есть идентификатор, который создается путем добавления "_popup" к идентификатору родительского виджета.

Итак, решение, которое я предлагаю, заключается в том, что если ваш комбокс был уникальным на вашей странице, вы можете прикрепить к нему фиксированный идентификатор, например:

<select dojoType="dijit.form.ComboBox" class="foobar" id='myCombox'>[options]</select>

И CSS будет

#myCombox_popup .dijitMenuItem { font-weight: bold; }
#myCombox_popup .dijitMenuItem .dijitComboBoxHighlightMatch { font-weight: normal; }