Dijit Overview¶
Contents
Dijit is Dojo’s UI Library, and lives as a separate namespace dijit. Dijit requires Dojo Core and Dojo Base.
Each of the widgets and functionality provided by Dijit are described in the following sections, though the Getting Started guides and the Tutorials cover some basics.
Utility Classes¶
Utility methods and classes used by widgets or by applications with widgets.
- dijit/a11y - functions about tab index
- dijit/focus - keeps track of focused node and active widgets
- dijit/place - low level code for positioning popups / drop downs
- dijit/popup - high level library routines for positioning popups / drop downs
- dijit/registry - registry of all widgets on the page
- dijit/typematic - for normalizing key-repeat across browsers, plus simulation “mouse-repeat”
- dijit/Destroyable - for tracking handles and releasing them when an object is destroyed
Infrastructure Widgets¶
- dijit/_WidgetBase (and also deprecated dijit/_Widget)
- dijit/_AttachMixin
- dijit/_TemplatedMixin (and also deprecated dijit/_Templated)
- dijit/_WidgetsInTemplateMixin
- dijit/_CssStateMixin
- dijit/_FocusMixin
- dijit/_HasDropDown
- dijit/_OnDijitClickMixin
- dijit/_BidiSupport
- dijit/_Contained
- dijit/_Container
- dijit/_DialogMixin
- dijit/_KeyNavMixin
- dijit/_KeyNavContainer
- dijit/_MenuBase
- dijit/_PaletteMixin
- dijit/_TimePicker
Tree Widgets¶
- dijit/Tree
- Model interface
- ObjectStoreModel plus legacy TreeStoreModel ForestStoreModel
- dijit/tree/dndSource STUB
- dijit/tree_dndContainer STUB
- dijit/tree/_dndSelector STUB
- dijit/tree/dndSource STUB
Miscellaneous Widgets¶
-
1.7+ A lighter version of dijit/Calendar, more geared for mobile devices (e.g. does not have keyboard navigation)
-
1.10+ A version of dijit/Dialog with built-in OK and cancel buttons.
-
1.10+ A version of dijit/TooltipDialog with built-in OK and cancel buttons.
dijit/DialogUnderlay STUB
Form Widgets and Handling¶
-
Text Boxes
-
A specialized input widget for monetary values, much like the currency type in spreadsheet programs
-
An easy-to-use date entry control which allows either typing or choosing a date from any calendar widget
-
A subclass of dijit/form/ValidationTextBox that is designed to be a base class for widgets that have a visible formatted display value, and a serializable value in a hidden input field which is actually sent to the server.
-
An input widget which restricts input to numeric input and offers down and up arrow buttons to “spin” the number up and down
-
A input widget which restricts input to numeric input
-
A base class for textbox form widgets which define a range of valid values.
-
A simple wrapper of <textarea>; equivalent functionality
-
An auto expanding/contracting <textarea>
-
A basic <input type=”text”>-style form control
-
A time input control which allows either typing or choosing a time from any time-picker widget
-
A class for textbox widgets with the ability to validate various types of content and to provide user feedback.
-
Select Type Widgets
-
A styleable drop-down select box (similar to
<select>) -
An “auto complete”, which allows the user to type any value and just gives suggested completions
-
Similar to a
<select>but with type-ahead filtering of the drop down list -
Allows the selection of multiple items (similar to
<select multiple>) -
Base class for widgets like dijit/form/Select
-
Buttons
-
A representation of a normal <button> or <input type=”submit/reset/button” />
-
A button with an arrow to show a drop down (often a menu)
-
A button which displays a menu or some other popup when you press it
-
A cross between a Button and a Checkbox widget
-
Slider
-
Horizontal ruler to use with a dijit/form/HorizontalSlider.
dijit/form/HorizontalRuleLabels
Horizontal ruler labels to use with a dijit/form/HorizontalSlider.
-
A scale with a handle you can drag left or right to select a value.
-
Vertical ruler to use with a dijit/form/VerticalSlider.
-
Vertical ruler labels to use with a dijit/form/VerticalSlider.
-
A vertical scale with a handle you can drag up or down to select a value.
-
Other form widgets
-
Nearly the same as an HTML checkbox, but with fancy styling
-
Corresponds to a <form> itself; wraps other widgets
-
To select one choice from a list
-
Base classes and mixins
-
Base class for all form widgets
-
Base class for form widgets with a value
dijit/form/_ListBase STUB
-
Note about programmatic instantiation¶
For most of the Dijit widgets, you can provide a refNode which is a placeholder to position your node. Beware that
any attribute set on it (form action, input value, etc.) won’t be taken into account. If you want to degrade nicely and
have a non-JS compatible version of your site and avoid duplicating attributes on controls and on instantiation, you
should use parser.instantiate():
require(["dojo/parser", "dojo/dom", "dijit/form/ValidationTextBox"], function(parser, dom, ValidationTextBox){
var myNode = dom.byId("myNode");
// All attributes of myNode will be preserved in the widget
parser.instantiate([ myNode ], {
data-dojo-type: "dijit/form/ValidationTextBox",
dojoSpecificAttr1: value,
dojoSpecificAttr2: value
});
});