📄 layout the dojo toolkit.mht
字号:
<P>And on the right... since you want to split the screen vertically the =
SplitContainer would actually contain another SplitContainer:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.SplitContainer"</SPAN> orientation=3D<SPAN=20
class=3Dst0>"horizontal"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A =
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.AccordionContainer"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.AccordionPane"</SPAN> <SPAN =
class=3Dkw3>title</SPAN>=3D<SPAN=20
class=3Dst0>"Mail"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN>...<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.AccordionPane"</SPAN> <SPAN =
class=3Dkw3>title</SPAN>=3D<SPAN=20
class=3Dst0>"News"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN>...<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.AccordionPane"</SPAN> <SPAN =
class=3Dkw3>title</SPAN>=3D<SPAN=20
class=3Dst0>"Alerts"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN>...<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR =
class=3Dgeshibr> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.SplitContainer"</SPAN> orientation=3D<SPAN=20
class=3Dst0>"vertical"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.ContentPane"</SPAN> <SPAN =
class=3Dkw3>title</SPAN>=3D<SPAN=20
class=3Dst0>"Table"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN>...<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.layout.ContentPane"</SPAN> <SPAN =
class=3Dkw3>title</SPAN>=3D<SPAN=20
class=3Dst0>"Preview"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN>...<SPAN =
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN></DIV>
<H2>Tips</H2>
<P><B>Sizing to browser viewport:</B> To make the outermost layout =
widget size=20
to the browser's viewport, in your page CSS you should have:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">html, body, =
#mainDiv=20
{<BR> width: 100%; height: 100%;<BR> border: =
0;=20
padding: 0; margin: 0;<BR> }</DIV>
<P>where mainDiv is the id of the outermost div.</P>
<P>Note that height=3Dwidth=3D100% means different things depending on =
the browser=20
when you have padding or border, so when using those tags it's best not =
to have=20
either of those. Put your padding, border, and margin on elements inside =
the=20
outer layout container.</P>
<P><B>Restrictions about visibility:</B> none of the layout widgets work =
if they=20
are inside a hidden element. This is very important and a mistake many =
people=20
make.</P>
<P><B>Startup call:</B> when building widgets programmatically, you =
create the=20
parent first, then add the children, and grandchildren... and finally =
call=20
startup(). Startup() is called once on the top element in the hierarchy, =
after=20
the whole hierarchy has been setup and the element inserted.</P>
<TABLE>
<TBODY>
<TR class=3Dodd>
<TD class=3Ddescription width=3D200><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/acc=
ordion-container"><B>Accordion=20
Container</B></A><BR>In this container, panes are pulled up or =
down like=20
window blinds by clicking the pane title. Only one shows in full =
at a=20
time. </TD>
<TD class=3Dget align=3Dright><A title=3D"View: accordion_pane.png"=20
=
href=3D"http://www.dojotoolkit.org/files/accordion_pane_1.png"><IMG=20
class=3Dinline title=3Daccordion_pane.png alt=3Daccordion_pane.png =
=
src=3D"http://www.dojotoolkit.org/files/accordion_pane_1.png"></A></TD></=
TR>
<TR class=3Deven>
<TD class=3Ddescription width=3D200><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/con=
tent-pane"><B>Content=20
Pane</B></A><BR>the leaves in the hierarchy. Contains arbitrary =
HTML.</TD>
<TD class=3Dget align=3Dright><A title=3D"View: content_pane.png"=20
href=3D"http://www.dojotoolkit.org/files/content_pane_1.png"><IMG=20
class=3Dinline title=3Dcontent_pane.png alt=3Dcontent_pane.png=20
=
src=3D"http://www.dojotoolkit.org/files/content_pane_1.png"></A></TD></TR=
>
<TR class=3Dodd>
<TD class=3Ddescription width=3D200><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/lay=
out-container"><B>Layout=20
Container</B></A><BR>Partitions children into =
top/left/bottom/right/center=20
sections. Useful (for example) to reserve the top 100px of the =
screen for=20
title and navigation, and then the rest of the viewport for the =
contents.=20
Note how in this case there would be just one scrollbar on the =
contents,=20
rather than on the browser window itself. </TD>
<TD class=3Dget align=3Dright><A title=3D"View: =
layout_container.png"=20
=
href=3D"http://www.dojotoolkit.org/files/layout_container_1.png"><IMG=20
class=3Dinline title=3Dlayout_container.png =
alt=3Dlayout_container.png=20
=
src=3D"http://www.dojotoolkit.org/files/layout_container_1.png"></A></TD>=
</TR>
<TR class=3Deven>
<TD class=3Ddescription width=3D200><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/spl=
it-container"><B>Split=20
Container</B></A><BR>Splits the children into sections where user =
can=20
adjust the size of each section (making one section bigger makes =
others=20
smaller)</TD>
<TD class=3Dget align=3Dright><A title=3D"View: split_container.png" =
=
href=3D"http://www.dojotoolkit.org/files/split_container_1.png"><IMG=20
class=3Dinline title=3Dsplit_container.png =
alt=3Dsplit_container.png=20
=
src=3D"http://www.dojotoolkit.org/files/split_container_1.png"></A></TD><=
/TR>
<TR class=3Dodd>
<TD class=3Ddescription width=3D200><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/sta=
ck-container"><B>Stack=20
Container</B></A><BR>base class for TabContainer and =
AccordionContainer=20
but allowing for user defined display to control which pane is =
shown</TD>
<TD class=3Dget align=3Dright><A title=3D"View: stack_container.png" =
=
href=3D"http://www.dojotoolkit.org/files/stack_container_1.png"><IMG=20
class=3Dinline title=3Dstack_container.png =
alt=3Dstack_container.png=20
=
src=3D"http://www.dojotoolkit.org/files/stack_container_1.png"></A></TD><=
/TR>
<TR class=3Deven>
<TD class=3Ddescription width=3D200><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/tab=
-container"><B>Tab=20
Container</B></A><BR>Like tabbed folders in a desk drawer, you =
click on a=20
title tab to bring the corresponding pane to the front. </TD>
<TD class=3Dget align=3Dright><A title=3D"View: tab_container.png"=20
href=3D"http://www.dojotoolkit.org/files/tab_container_1.png"><IMG =
class=3Dinline title=3Dtab_container.png alt=3Dtab_container.png=20
=
src=3D"http://www.dojotoolkit.org/files/tab_container_1.png"></A></TD></T=
R></TBODY></TABLE>
<DIV class=3Dbook-navigation>
<UL class=3Dmenu>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/acc=
ordion-container">AccordionContainer</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/con=
tent-pane">ContentPane</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/lay=
out-container">LayoutContainer</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/spl=
it-container">SplitContainer</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/sta=
ck-container">StackContainer</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/tab=
-container">TabContainer</A></LI></UL>
<DIV class=3D"page-links clear-block"><A class=3Dpage-previous=20
title=3D"Go to previous page"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-valid=
ation-specialized-input/textbox-validating-currency-number">=E2=80=B9=20
TextBox family: Validation, Currency, Number, Date, Time</A><A =
class=3Dpage-up=20
title=3D"Go to parent page"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0">up</A><=
A=20
class=3Dpage-next title=3D"Go to next page"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/acc=
ordion-container">AccordionContainer=20
=E2=80=BA</A></DIV></DIV></DIV>
<DIV class=3Dlinks>
<UL class=3D"links inline">
<LI class=3D"first book_printer"><A class=3Dbook_printer=20
title=3D"Show a printer-friendly version of this book page and its =
sub-pages."=20
href=3D"http://dojotoolkit.org/book/export/html/686">Printer-friendly=20
version</A>=20
<LI class=3Dcomment_forbidden><SPAN class=3Dcomment_forbidden><A=20
=
href=3D"http://dojotoolkit.org/user/login?destination=3Dnode/686%2523comm=
ent-form">Login</A>=20
or <A=20
=
href=3D"http://dojotoolkit.org/user/register?destination=3Dnode/686%2523c=
omment-form">register</A>=20
to post comments</SPAN>=20
<LI class=3D"last subscriptions_del_node"><A =
class=3Dsubscriptions_del_node=20
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -