📄 layout the dojo toolkit.mht
字号:
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/sta=
ck-container">StackContainer</A>=20
<LI class=3Dleaf id=3Dmenu-item-480><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/tab=
-container">TabContainer</A>=20
</LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-331><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/command-co=
ntrol">Command=20
Control</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-332><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/user-assis=
tance-and-feedback">User=20
Assistance and Feedback</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-353><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-e=
diting-and-display">Advanced=20
Editing and Display</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-314><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/themes-and=
-design">Themes=20
and Design</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-315><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/a11y">Acce=
ssibility=20
</A></LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-299><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo-0">Part=20
3: JavaScript With Dojo and Dijit</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-300><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo-0">Par=
t 4:=20
Testing, Tuning and Debugging</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-301><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-5-dojox-extensions=
-dojo-0">Part=20
5: DojoX</A> </LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-54><A title=3D"The Dojo Book, =
0.4"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-4">The Dojo Book, =
0.4</A>=20
</LI></UL></DIV></DIV></DIV></DIV>
<DIV class=3D"col-b content-region-container">
<DIV id=3Dmain-container><!-- main_content region -->
<H2>Layout</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by bill on Sun, 04/08/2007 - =
00:08.</DIV>
<DIV class=3Dcontent>
<H2>HTML and Layouts</H2>
<P>Typically HTML has bottom-up sizing, where a container is as big as =
it's=20
contents, so that given</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> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"outer"</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> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"inner1"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
Part 1<BR> <SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></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> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"inner2"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
Part 2<BR> <SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN></DIV>
<P>inner1 is big enough to hold the text "Part 1", inner2 is big enough =
to hold=20
the text "Part 2", and outer is big enough to hold the divs. And if =
outer is=20
bigger than the browser's viewport, the browser window displays a =
scrollbar. The=20
web page you're reading now uses that layout, and unless your monitor is =
3 feet=20
tall (in which case, we envy you!) you see the scrollbar on the right. =
</P>
<P>But for some web pages, you want them to work with the opposite =
pattern,=20
where you start with a given size, typically the browser viewport, and =
then=20
partition it into smaller sections. This is the way desktop application =
look,=20
for example a mail program that has a tree on the left, a list of =
messages in=20
the upper right, and the message preview on the lower right.</P>
<P>Note that in this scenario, there's no scrollbar on the browser =
window=20
itself, but if any pane is too small to display all the text it contains =
then it=20
gets a scrollbar.</P><A title=3D"View: maildemo.png"=20
href=3D"http://www.dojotoolkit.org/files/maildemo_0.png"><IMG =
class=3Dinline=20
title=3Dmaildemo.png alt=3Dmaildemo.png=20
src=3D"http://www.dojotoolkit.org/files/maildemo_0.png"></A>=20
<P>Layout like the picture above can be done using tables or fancy CSS =
(see=20
recent <A=20
href=3D"http://www.alistapart.com/articles/conflictingabsolutepositions">=
A List=20
Apart article about CSS sizing</A>), but that technique has it's =
limits... it=20
doesn't allow things like tabs or accordions or split containers where =
the user=20
can adjust the size of each pane.</P>
<H2>Dijit Layout</H2>
<P>Dijit has a number of layout widgets which can be combined in a =
hierarchy to=20
achieve that. Every layout widget contains a list of other layout =
widgets,=20
except for the "leaf" nodes in the hierarchy, which are typically=20
ContentPanes.</P>
<P>How does this work in practice? You need to think about the =
application above=20
in a top-down (or outside-in) way:</P>
<OL>
<LI>the screen is split into two parts. The top is a toolbar and=20
<LI>the bottom is split into a left section and right section=20
<LI>the left section has three panes one of which is shown at a time=20
<LI>the right section is split into two parts, a list of messages and =
a=20
preview pane. </LI></OL>
<P>Conceptually it's a set of containers like this:</P><A=20
title=3D"View: layoutblock.png"=20
href=3D"http://www.dojotoolkit.org/files/layoutblock_1.png"><IMG =
class=3Dinline=20
title=3Dlayoutblock.png alt=3Dlayoutblock.png=20
src=3D"http://www.dojotoolkit.org/files/layoutblock_1.png"></A>=20
<P>There are three types of elements in that picture:</P>
<OL>
<LI>containers that display all their children side by side=20
<LI>containers that display one child at a time=20
<LI>leaf nodes containing content </LI></OL>
<P>#1 is either LayoutContainer or SplitContainer. A LayoutContainer is =
used=20
when all but one of the elements is a constant size. (In this case, the =
toolbar=20
is a constant size and the the bottom section takes the rest of the =
screen, so=20
we will use a LayoutContainer for that, and SplitContainers for the =
other=20
parts.</P>
<P>#2 is AccordionContainer, TabContainer, or StackContainer. They all =
do=20
basically the same thing, but look different.</P>
<P>#3 is typically ContentPane but could be any widget. An important=20
consideration is whether or not the widget's size is adjustable (like a=20
ContentPane) or not (like a Toolbar). See #1 above.</P>
<P>So keeping those rules in mind and picking which widgets to use it =
will look=20
like:</P>
<UL>
<LI>LayoutContainer=20
<UL>
<LI>Toolbar=20
<LI>Horizontal Split Container=20
<UL>
<LI>Accordion Container=20
<UL>
<LI>ContentPane #1=20
<LI>ContentPane #2=20
<LI>ContentPane #3 </LI></UL>
<LI>Vertical Split Container=20
<UL>
<LI>Content Pane #4=20
<LI>Content Pane #5 </LI></UL></LI></UL></LI></UL></LI></UL>
<P>And then from there it's easy to convert to HTML. Starting from the=20
outside:</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.LayoutContainer"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"mainDiv"</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 =
class=3Dst0>"dijit.Toolbar"</SPAN>=20
layoutAlign=3D<SPAN class=3Dst0>"top"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN>...<SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></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.SplitContainer"</SPAN> orientation=3D<SPAN=20
class=3Dst0>"horizontal"</SPAN> layoutAlign=3D<SPAN =
class=3Dst0>"client"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> see below<BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN></DIV>
<P>Note that the layoutAlign arguments on the child nodes are actually =
processed=20
by the parent, but the other arguments are processed by the child. A bit =
confusing but that's the way it works.</P>
<P>The split container will look like:</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
(left part)<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.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> =
(right=20
part, see below)<BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN></DIV>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -