如何为与 dojo 的 dijit.ComboBox 关联的菜单提供与 dijit.Menu 不同的 css
当您使用 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 类的最简单方法是什么？
When you use a dijit.ComboBox, the type ahead suggestions get implemented as a dijit.Menu. I've got a design which calls for the matched portion of the suggestion rows to be normal, and the unmatched portion to be bold. The structure that dojo creates is like this:
<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>
So I can target the matched part, but not the unmatched part. So my css needs to be something like:
.dijitMenuItem { font-weight: bold; }
.dijitMenuItem .dijitComboBoxHighlightMatch { font-weight: normal; }
The problem is, if I do that, all menus will be bolded, and I don't want that. Just doing something like this:
<select dojoType="dijit.form.ComboBox" class="foobar">[options]</select>
puts the foobar class in the ComboBox, but the menu is an independent node not under that hierarchy.
What's the easiest way to add a css class around the popup menu that the ComboBox generates?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我相信弹出菜单的容器中附加了一个 id，并且该 id 是通过在其父窗口小部件的 id 上添加“_popup”创建的。
所以我建议的解决方案是，如果你的组合框在你的页面中是唯一的，那么你可以在上面附加一个固定的ID，例如：
CSS将是
I believe there is a id attached in the popup menu's container, and that id is created by adding "_popup" on its parent widget's id.
So the solution I suggest is that if your combox was unique in your page, then you can attach a fixed id on it, for example:
And the css will be
事实证明，dijit.Menu 中的 html 使用表结构，而 ComboBox 使用列表，因此我们可以通过使用 li.dijitMenuItem 或 tr.dijitMenuItem 使两者的 css 不同。
It turns out that the html from dijit.Menu uses a table structure, while the ComboBox uses a list, so we can make our css different for the two by using li.dijitMenuItem or tr.dijitMenuItem.