Question

我正在创建一个带有dojo的UI，它正在欺骗现有胖客户端应用程序的某些方面。我需要以编程方式在同一页面上放置两个不同的菜单栏。我已经使用

成功创建了两个菜单栏

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

等等。现在我想给他们稍微不同的演示风格。因为我将有这么多页面，我首先想到的是使用不同的CSS样式类。这就是问题所在：当我创建菜单及其项目时，我们会得到相当多的HTML对象，每个对象都包含dojo指定的CSS类，并且对于与任一菜单关联的项目，类都相同。如何才能最好地控制任何一个菜单？

我可以确定每个项目的dojo生成的id，并按ID指定样式，但这似乎很难。是否有一种合理的方法来控制dojo定义的类，或者一种不错的CSS方式来仅选择与一个菜单栏关联的项目？

Answer 1

根据凯尔的建议，这是我使用的代码（有一些语法差异）。

我的代码基于Gill等人的“掌握道场”中的“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}

最简单的方法我可以想到选择两个菜单的不同元素。

如何控制dojo小部件类，或如何获得细粒度的样式控制

2 个答案: