Skip to Content | Skip to Navigation

---

---

dijit.CheckedMenuItem

Contents

• dijit.CheckedMenuItem
• Examples
  • Programmatic example
  • Declarative example
• Accessibility
  • Keyboard
• Implementation Notes

Status:Draft Version:1.2 Authors:

The CheckedMenuItem is a checkbox-like menu item for toggling on/off. Every time the user clicks the widget, it changes state between checked and unchecked. By default, the state of the widget is unchecked. User can optionally change the default state of the widget and also disable the widget as well. A user defined event function, onChange, is used to handle check/uncheck events.

To change the default state of the menu item to “checked”,

var cItem = new dijit.CheckedMenuItem({label:"ToolBar", checked:"true"});

The menu item can be disabled as follows:

var cItem = new dijit.CheckedMenuItem({label:"Checked Menu Item", disable:"true"});

This widget is helpful in cases where the user has to toggle particular column/row, on/off as and when it is required. The examples below illustrate the usage of the widget.

Examples

Programmatic example

<script type="text/javascript">

  dojo.require("dijit.MenuBar");
  dojo.require("dijit.PopupMenuBarItem");
  dojo.require("dijit.MenuBarItem");
  dojo.require("dijit.Menu");
  dojo.require("dijit.MenuItem");
  dojo.require("dijit.CheckedMenuItem");

  var pMenuBar;
  var pToolBar;
  dojo.addOnLoad(function(){

        pMenuBar = new dijit.MenuBar({});
        var pMenu = new dijit.Menu({});
        var cItem = new dijit.CheckedMenuItem({label:"Navigation bar", onChange: toolkit});
        pMenu.addChild(cItem);
        pMenu.addChild(new dijit.MenuItem({
                 label:"Status bar",
                 onClick:function(){alert("you clicked status bar")}
        }));

        pMenuBar.addChild(new dijit.PopupMenuBarItem({label:"View", popup:pMenu}));
        pMenuBar.placeAt("menubar");
        pMenuBar.startup();

        pToolBar = new dijit.MenuBar({}, "toolbar");
        pToolBar.addChild(new dijit.MenuBarItem({label:"Back", onClick:function(){alert("I go nowhere!! just a clickable item")}}));
        pToolBar.addChild(new dijit.MenuBarItem({label:"Forward", onClick:function(){alert("No way to go..")}}));
        pToolBar.addChild(new dijit.MenuBarItem({label:"Refresh", onClick:function(){alert("Refresh button clicked!!")}}));
        pToolBar.startup();

  });
        function toolkit(/*Boolean*/ checked){
                var tools = dojo.byId("toolbar");
                if(checked){
                        tools.style.display = "block";
                }else {
                        tools.style.display = "none";
                }
        };
        dojo.addOnLoad(toolkit);

</script>

<div id="menubar"></div>
<div id="toolbar"></div>

Declarative example

<script type="text/javascript">
  dojo.require("dijit.MenuBar");
  dojo.require("dijit.PopupMenuBarItem");
  dojo.require("dijit.MenuBarItem");
  dojo.require("dijit.Menu");
  dojo.require("dijit.MenuItem");
  dojo.require("dijit.CheckedMenuItem");

        function toolBar(checked){
                var tools = dojo.byId("tools");
                if(checked){
                        tools.style.display = "block";
                }else {
                        tools.style.display = "none";
                }
        };
        dojo.addOnLoad(toolBar);

</script>

  <div dojoType="dijit.MenuBar">
        <div dojoType="dijit.PopupMenuBarItem">
                <span>View</span>
                <div dojoType="dijit.Menu">
                        <div dojoType="dijit.CheckedMenuItem" onChange="toolBar(arguments[0])">Navigation bar</div>
                        <div dojoType="dijit.MenuItem" onClick="alert('you just clicked Status bar')">Status bar</div>
                </div>
        </div>
</div>
<div dojoType="dijit.MenuBar" id="tools">
        <div dojoType="dijit.MenuBarItem" onClick="alert('I go nowhere!! just a clickable item')">Back</div>
        <div dojoType="dijit.MenuBarItem" onClick="alert('Oops..No way to go..')">Forward</div>
        <div dojoType="dijit.MenuBarItem" onClick="alert('Refresh button clicked!!')">Refresh</div>
</div>

Accessibility

Keyboard

Action	Key
Navigate to menu item	Up and down arrow keys
check/uncheck menu item	Spacebar or enter

Implementation Notes

See dijit.Menu.

---

---

© Copyright 2009, Dojo Foundation. Created using Sphinx 0.6.3.