1

私のdijitツールバーでは、DropDownButtonを使用して、多くのMenuItemを含むdijit.Menuを保持しています。これらのMenuItemは、プロジェクトのさまざまな機能を制御します。DropDownButtonとMenuはhtmlページで宣言されていますが、MenuItemsは実行時に動的に作成されます。

ユーザーがMenuItemをクリックすると、ページ上の何かのモードが変更されます。現在、ユーザーがdropdownMenu自体を見て、dropdownMenuで最後に何を選択したかを知る方法はありません。ユーザーが同じドロップダウンメニューで別の選択をクリックするまで、選択したMenuItemの背景色を強制的に維持する方法(CSSまたはJavaScript)はありますか?

明らかに、他の場所にラベルを表示して、それがどのモードにあるかをユーザーに知らせることができますが、ドロップダウンメニュー自体で選択した感覚ほど直感的ではありません。

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