私の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;
}