在我的dijit工具栏中,我使用DropDownButton来保存带有许多MenuItem的dijit.Menu。这些MenuItems控制我项目中的各种功能。 DropDownButton和Menu在html页面中声明,但MenuItems是在运行时动态创建的。
当用户点击MenuItem时,它将改变页面上某些内容的模式。目前,用户无法通过查看dropdownMenu本身来了解他/她在dropdownMenu中最后选择的内容。有没有办法(CSS或JavaScript)我们可以强制所选MenuItem的背景颜色保持不变,直到用户点击同一下拉菜单上的另一个选择?
显然,我可以在其他地方显示一个标签,告诉用户它处于什么模式但不会像下拉菜单本身的选定感觉那样直观。
这是HTML部分的声明方式:
<button dojoType="dijit.form.DropDownButton" iconClass="esriLayerIcon" id="VFAContentBtn" label="Content Filter" title="Content Filter" style="width: 200px">
<div dojoType="dijit.Menu" id="VFAContentDDMenuMain">
</div>
</button>
这是对运行时填充的粗略看法:
var contentMenu = dijit.byId("VFAContentDDMenuMain");
// add the ALl Campus regardless.
// For the clicked value, we will use 0 for the ALL.
contentMenu.addChild(new dijit.MenuItem({
label : "All Campuses",
id : "C:0",
focused : true,
onClick : function(evt) {CampusFilterClicked(evt)}
}));
// For the individual campus, we will just use the Campus Id since the menu has campuses only.
for (var i = 0; i <= arrRegionCampus.length - 1; i++) {
var campusId = Math.abs(arrRegionCampus[i].CampusId);
var campusName = arrRegionCampus[i].CampusName;
// the evt of the onClick will contain the information we need.
var menuX = new dijit.MenuItem({
id : "C:" + campusId,
label : campusName,
onClick : function(evt) {
CampusFilterClicked(evt);
}
});
contentMenu.addChild(menuX);
menuX = null;
}