1

在我的 dijit 工具栏中，我使用 DropDownButton 来保存带有许多 MenuItem 的 dijit.Menu。这些 MenuItem 控制我项目中的各种功能。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;
    }
4

0 回答 0