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中，但菜单是一个不在该层次结构下的独立节点。

在ComboBox生成的弹出菜单中添加css类的最简单方法是什么？

Answer 1

我相信弹出菜单的容器中附有一个id，并且通过在其父窗口小部件的id上添加“_popup”来创建该ID。

所以我建议的解决方案是，如果您的网页在您的网页中是唯一的，那么您可以在其上附加固定ID，例如：

<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; }

Answer 2

事实证明，来自dijit.Menu的html使用表结构，而ComboBox使用列表，因此我们可以使用li.dijitMenuItem或tr.dijitMenuItem使这两者的CSS不同。

如何将与dojo的dijit.ComboBox相关的菜单与dijit.Menu的css相关联

2 个答案: