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 the quickstart guides and the Tutorials cover some basics.
Base Utilities¶
- dijit/_base STUB
- dijit/_base/focus COPIED
- dijit/_base/place COPIED
- dijit/_base/popup COPIED
- dijit/_base/typematic COPIED
- dijit/_base/manager STUB
- dijit/_base/scroll STUB
- dijit/_base/sniff STUB
- dijit/_base/wai STUB
- dijit/_base/window STUB
Utility Classes¶
Utility methods and classes used by widgets or by applications with widgets.
- dijit.focus - keeps track of focused node and active widgets
- dijit.hccss - for detecting when IE or FF is in high contrast (aka no background images) mode
- 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”
Infrastructure Widgets¶
- dijit._WidgetBase (and also deprecated dijit._Widget)
- dijit._TemplatedMixin (and also deprecated dijit._Templated)
- dijit._WidgetsInTemplateMixin
- dijit._CssStateMixin
- dijit._FocusMixin
- dijit._HasDropDown
- dijit._OnDijitClickMixin
- dijit._BidiSupport STUB
- dijit._Calendar STUB
- dijit._Contained STUB
- dijit._Container STUB
- dijit._DialogMixin STUB
- dijit._KeyNavContainer STUB
- dijit._MenuBase STUB
- dijit._PaletteMixin STUB
- dijit._TimePicker STUB
Tree Widgets¶
- dijit.Tree
- dijit/_tree STUB
- 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)
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 STUB
- dijit.form._AutoCompleterMixin STUB
- dijit.form._ButtonMixin STUB
- dijit.form._CheckBoxMixin STUB
- dijit.form._ComboBoxMenu STUB
- dijit.form._DateTimeTextBox STUB
- dijit.form._ExpandingTextAreaMixin STUB
- dijit.form._FormMixin STUB
- dijit.form._FormValueMixin STUB
- dijit.form._FormWidgetMixin STUB
- dijit.form._ListBase STUB
- dijit.form._ListMouseMixin <dijit/form/_ListMouseMixin STUB
- dijit.form._RadioButtonMixin <dijit/form/_RadioButtonMixin STUB
- dijit.form._Spinner STUB
- dijit.form._TextBoxMixin STUB
- dijit.form._ToggleButtonMixin STUB
Layout¶
- dijit.layout
- dijit/layout/utils STUB
- dijit.layout.ScrollingTabController STUB
- dijit.layout.StackController STUB
- dijit.layout.TabController 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
});
});