This dijit.layout.ContentPane is contained in a dijit.layout.AccordionContainer.
Like an TabContainer, an AccordionContainer holds a set of panes whose titles are all visible, but only one pane’s content is visible at a time.
Clicking on a pane title slides the currently-displayed one away, similar to a garage door. Users can explicitly select the pane that is to be made visible when the widget is loaded. If it is not specified, then the first pane is taken by default. In this case "calendar" is selected=true. More..Dojotoolkit.org
This page is based on the themeTester from the diojotoolset.org. However, a lot of error corrction and enhancment has been added.
The page can be loaded in three configurations:
- themeTester.php (Gets Dojo 1.6.0 from ajax.googleapis.com)
- themeTester.php?dev=dev (Gets Dojo 1.6.1 development version from pmis.biz
- themeTester.php?dev=dep (Gets Dojo 1.6.1 deployment version from pmis.biz
Tooltips
- rich text tooltip
- anchor tooltip
|
tooltip below, with showDelay
|
||
|
tooltip after
|
tooltip before
|
|
|
tooltip above
|
Dialogs
Selecting a color will change the background color of the page. Use this to test how tooltips and drop downs appear with different backgrounds.
3x4 html 4
7x10
Selecting a color will change the background color of the page. Use this to test how tooltips and drop downs appear with different backgrounds.
3x4
7x10
Buttons
Buttons can do an action, display a menu, or both:
Enabled:Disabled:
CheckBox
Radio Buttons
dijit.form.DateTextBox
dijit.form.TimeTextBox
dijit.form.CurrencyTextBox
dijit.form.NumberSpinner max=100
dijit.form.Select
Mexico
Mexico
dijit.form.FilteringSelect
dijit.form.Textarea
Enabled:
Disabled:
dijit.form.SimpleTextarea
Enabled:
Disabled:
Enabled:
- Lorem and a link, what do you think?
- This is the Editor with a Toolbar attached.
Disabled:
- Lorem and a link, what do you think?
- This is the Editor with a Toolbar attached.
Enabled
- 0
- 100
Slider2 Value:
- lowest
- normal
- highest
Value:
small
medium
large
Disabled
- 0
- 100
- lowest
- normal
- highest
small
medium
large
TitlePane
This is a title pane (dijit.TitlePane). It can be expanded and collapsed.style:'
A TitlePane is a pane that can be opened or collapsed, with a title on top. The visibility of the pane’s contents is toggled by activating an arrow “button” on the title bar via the mouse or keyboard. It extends ContentPane but since it isn’t used inside other layout widgets it’s not in the dijit.layout module..
This may be used for training (first excample + the extention): TitlePane.html
Please agree to the following terms and conditions:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices. Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat, lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper risus est et erat....
ProgressBar
Indeterminate:dijit.InlineEditBox + dijit.form.TextBox on <h3>
(HTML before)Edit me - I trigger the onChange callback
(HTML after)dijit.InlineEditBox + dijit.form.Textarea
(HTML before)I'm one big paragraph. Go ahead and edit me. I dare you. The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...
(HTML after)These links will disable / enable the text area above.
dijit.form.DateTextBox
(HTML inline before) (HTML after)dijit.form.TimeTextBox
(HTML inline before) (HTML after)dijit.form.FilteringSelect + Inline + remote data store
(HTML inline before) Indiana (HTML after)Source 1
Source 2
You can explore this single page after applying a Theme for use in creation of your own theme.
I am whole slew of Widgets on a page. Jump to dijit tests to test individual components.
There is a right-click [context] pop-up menu here, as well.
I am Tab 3
Note that I can be closed. I you close me then I am lost! closable:true
Unknown modal dialog (Only available if lower tab /botton 3 is available!)
ContentsPane 1
This dijit.layout.ContentPane is contained in a dijit.layout.AccordionContainer.
Why not a dijit.layout.TabContainer ?
Like StackContainer and TabContainer, an AccordionContainer holds a set of panes whose titles are all visible, but only one pane’s content is visible at a time. Clicking on a pane title slides the currently-displayed one away, similar to a garage door. Users can explicitly select the pane that is to be made visible when the widget is loaded. If it is not specified, then the first pane is taken by default. More..Dojotoolkit.org
ContentsPane 2
How to Retrieving the currently selected Container: var selectedContainer = yourContainer.selectedChildWidge
yourContainer has to be a reference (for example: dijit.byId("myStackContainer")) to the ContainerWidget, meaning the StackContainer or any widgets inheriting from StackContainer. More..Dojotoolkit.org
ContentsPane 3
Here I list known issues:
Color picker do not work with google source?
Language select is not implemented yet!
Note on dojox vs. dijit
how to cache dojo source? dojo.cache
<div id="header" data-dojo-type="dijit.MenuBar" data-dojo-props="region:'top', title:'Titel head'">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="top" title="title head">
Java script:..
.selectChild(obj) vs. Selectedchild:'id'
How tro use dojo.provide()
dojo.declare() vs. dojo.require()
What is dojoAttachPoint, dojoAttachEvent _onClick
onclick (html) vs. onClick (dojo)
This page explain issus around dijit layout
An dijit.layout.BorderContainer the higest level in the dijit layout. This container can organizize a number of design ellements e.g. some containers:
- dijit.layout.AccordionContainer
- dijit.layout.StackContainer
- dijit.layout.TabContainer
- ....
All the containers use the dijit.layout.ContentPane as items in the container.
Login options in dijit layout
Note that if <button> is used here it creates problem in IE and Crome.
Use the <div> insted:
<div data-dojo-type="dijit.form.DropDownButton">
Please provide your email and your password:
Signup for a new account
On completion of this form and verification of your answers, you will be sent a confirmation e-mail to the e-mail address you specified. Using the confirmation e-mail, you will be able to activate your account. If you fail to activate your account within seven days, it will be purged. You must specify a valid e-mail address in order to receive the account confirmation e-mail.
Please enter your email and password:
REQUEST:If you fail to activate your account within seven days, it will be purged. You must specify a valid e-mail address in order to receive the account confirmation e-mail.
Array ( ) GET:
Array ( )