How to control dojo widget classes, or how to get fine-grained control of style
I am creating a UI with dojo that is emulting some aspects of an existing thick client application. I need to programatically put two different menu bars on the same page. I have successfully created the two menu bars using
new dijit.Menu();
new dijit.MenuItem(开发者_C百科);
and so on. Now I want to give them slightly different presentation styles. As I'm going to have quite a few pages of this sort my first thought is to use different CSS style classes. And that's the problem: when I create the Menu and it's items we get quite a set of HTML objects, each with CSS classes specified by dojo, and the classes are the same for the items associated with either menu. How can I best get specific control for any one menu?
I could determine the dojo-generated ids for each item, and specify styles by ids, but that seems like hard work. Is there an sensible way to control the classes defined by dojo, or a nice CSS way to select only the items associated with one menu bar?
This is the code I used according to Kyle's suggestion (there's a few syntactic differences).
I'm basing my code on the "baf/obe" examples in "Mastering Dojo" by Gill et al.
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*/
with similar code for the other menu bar.
Now a css entry for one of the lower level menu components
#myactions .dijitButtonText {
text-align: center;
padding: 0 0 0 0;
background-color: #dd8000;
font-size: 18px;
font-weight: bold;
}
Where .dijitButtonText is a class defined by dojo and applies to the menu item labels.
This mixing of a "#id" and ".class" selectors was the piece that I didn't see in any of the CSS selector references I found online.
Depending on the names of your menu bar try
menubar1 ul
{styles here}
menubar1 li
{styles here}
menubar2 ul
{styles here}
menubar2 li
{styles here}
Simplest way I can think of to select the different elements of the two menus.
精彩评论