Dijit Theme Tester

Dijit Theme Test Page

Dijit Color Palette(7x10)

Test color is: .

Dijit Tooltips:

rich text tooltip Embedded bold RICH text weirdness! anchor tooltip tooltip on anchor

Dialogs:

show Popup Dialog
show Second Dialog

Various Form Elements:

[plain] Text Input:

Standard Dijit Checkbox
Disabled Dijit
Checked and Disabled Dijit
Standard
Standard [disabled]

Radio group #1: news talk weather Standard

Radio group #2: (no default value, and has breaks)
top 40
oldies
country
standard

(Note if using keyboard: tab to navigate, and use arrow or space to select)

Autocompleting dijit.form.FilteringSelect: (from tree datastore?)

Number Spinner: (enter a number or text)

Text Area: (sans any styling...)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Dijit ProgressBar

Indeterminate:

Dijit TitlePane (nested)

This is a title pane, containing another title pane ...

And this is the inner title pane...

Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

And this is the closing line for the outer title pane.

HTML After, check indent

Simple, drop down & combo buttons

Buttons can do an action, display a menu, or both:

Sizing

Short button, tall buttons, big buttons, small buttons... These buttons size to their content (just like <button>).

Customized buttons

Dojo users can mix in their styles. Here's an example:

Dijit InlineEditBox Test

before after

Dijit InlineEditBox vs. Textarea dijit

I'm one big paragraph. Go ahead and <i>edit</i> me. <b>I dare you.</b> The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...

These links will disable / enable the text area above.

Date text box:

FilteringSelect Dijit with JsonItemStore of States::

HTML After

This pane is closable, just for the icon ... background:transparent; in this box.

You can explore this single page after applying a Theme for use in creation of your own theme.

I am a Split Container, containing a Split Container on the right. TabContainer on the top right, Bottom-aligned Tab Container bottom right. AccordionPane on the left.

There is a right-click [context] pop-up menu here, as well.

I am the last Tab

I am the second dialog. I am parented by the Low Tab Pane #3