common features the dojo toolkit.mht
来自「dojo学习资料,从初级开始学起,是初学都认识dojo的好帮手.」· MHT 代码 · 共 1,856 行 · 第 1/5 页
MHT
1,856 行
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/dijit-glan=
ce">Dijit=20
at a Glance</A>=20
<LI class=3Dleaf id=3Dmenu-item-328><A class=3Dactive=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/common-att=
ributes">Common=20
Features</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-329><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-valid=
ation-specialized-input">Form,=20
Validation, Specialized Input</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-330><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout">La=
yout</A>=20
<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>Common Features</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by criecke on Mon, 04/09/2007 - =
23:59.</DIV>
<DIV class=3Dcontent>
<H3>Attributes, Methods, Extension Points</H3>
<P>Each Dijit component has interaction points, so you can customize =
them for=20
your app. In order of complexity:</P>
<UL>
<LI>An <B>attribute</B> is a data element used for controlling display =
or=20
behavior. For example, the label attribute of a ContentPane displays =
when that=20
pane is part of a TabbedContainer.=20
<P><I>Attributes are settable only at creation time.</I> That means =
you can=20
set them in the declarative tag, or in the <CODE=20
class=3D"geshifilter javascript"><SPAN class=3Dkw2>new</SPAN> =
dijit.___<SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dbr0>)</SPAN></CODE> call. After =
that, you may=20
not set them directly. Some attributes can be changed by a method =
call,=20
usually with the name <CODE=20
class=3D"geshifilter javascript">setAttributeName<SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dbr0>)</SPAN></CODE>. We'll note these in the guide where =
applicable.</P>
<LI>A <B>method</B> is a function you call to control something. For =
example,=20
in a NumberSpinner the user can click the Up and Down buttons to =
adjust a=20
number. But you can call the method adjust() to do the same thing.=20
<LI>An <B>extension point</B> is a function you provide to override =
behavior.=20
For example, a ValidationTextBox has an isValid() extension point. If =
your=20
validation involves several fields or needs more power than regular=20
expressions provide, you can create a new subclass of =
ValidationTextBox and=20
provide your own isValid function. </LI></UL>
<H3>Common Attributes</H3>
<P>These attributes may be specified in any widget, in addition to all =
the=20
normal HTML attributes (which are simply passed through unchanged to the =
finished widget).</P>
<TABLE>
<TBODY>
<TR clas=3D'=3D"even"'>
<TD class=3Dforum><B>Attribute</B></TD>
<TD class=3Dposts><B>Type or values</B></TD>
<TD class=3Dposts><B>Default</B></TD>
<TD class=3Dposts><B>Description</B></TD></TR>
<TR class=3Dodd>
<TD class=3Dforum>domNode</TD>
<TD class=3Dposts>Node</TD>
<TD class=3Dposts>None</TD>
<TD class=3Dposts>this is our visible representation of the widget! =
Other=20
DOM Nodes may by assigned to other properties, usually through the =
template system's dojoAttachPoint syntax, but the domNode property =
is the=20
canonical "top level" node in widget UI. In non-templated widgets, =
this=20
will equal the srcNodeRef. </TD></TR>
<TR class=3Deven>
<TD class=3Dforum>id</TD>
<TD class=3Dposts>String</TD>
<TD class=3Dposts>None</TD>
<TD class=3Dposts>a unique, opaque ID string that can be assigned by =
users=20
or by the system. If the developer passes an ID which is known not =
to be=20
unique, the specified ID is ignored and the system-generated ID is =
used=20
instead.</TD></TR>
<TR class=3Dodd>
<TD class=3Dforum>lang</TD>
<TD class=3Dposts>String</TD>
<TD class=3Dposts>djConfig.locale or default provided by navigator =
object</TD>
<TD class=3Dposts>overrides the page-wide setting to use a different =
language for this widget only. Must choose from bootstrapped =
languages in=20
djConfig.extraLocale. It's usually best to default to the page =
settings so=20
that the page can be localized with a single setting or the =
default. Use=20
of this attribute is typically limited to demonstrations or pages =
with=20
multiple languages besides the user's.</TD></TR>
<TR class=3Deven>
<TD class=3Dforum>layoutAlign</TD>
<TD class=3Dposts>String</TD>
<TD class=3Dposts>Depends onorder within LayoutContainer</TD>
<TD class=3Dposts>Only applies to Dijit components in <A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/lay=
out-container">dijit.layout.LayoutContainer</A>.=20
Possible values: "left", "right", "bottom", "top", and "client". =
The=20
LayoutContainer takes its children marked as =
left/top/bottom/right, and=20
lays them out along the edges of the box, and then it takes the =
child=20
marked "client" and puts it into the remaining space in the =
middle.</TD></TR>
<TR class=3Dodd>
<TD class=3Dforum>srcNodeRef</TD>
<TD class=3Dposts>Node</TD>
<TD class=3Dposts>DOM Node which has the dojoType attribute.</TD>
<TD class=3Dposts>Consider this attribute Read Only. In templated =
widgets,=20
usually this node will disappear, replaced by a filled-in=20
template.</TD></TR></TBODY></TABLE>
<H3>Extension Points</H3>
<P>Both methods and extension points are JavaScript functions, and the=20
difference between them is a semantic one. We use the term method for =
"functions=20
programmers normally call" and extension point for "functions the Dijit=20
component normally calls". There's no technical reason you couldn't call =
an=20
extension point yourself, or override a method yourself, but it makes =
little=20
sense to do so.</P>
<P>You can easily provide an extension point function for declarative =
elements.=20
As an example, here's how to extend a ValidationTextBox:</P>
<OL>
<LI>First, find the extension point on the appropriate Dijit page. In =
our=20
case, it's <A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-valid=
ation-specialized-input/textbox-validating-currency-number">dijit.form.Va=
lidationTextBox.isValid</A>=20
<LI>Copy the signature from the API documentation. For example, =
isValid() for=20
ValidatingTextBox has signature function(/* Boolean*/ isFocused) and =
returns a=20
boolean.=20
<LI>Then, use a dojo/method call directly in the markup, like this:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.ValidatingTextBox"</SPAN> isValid=3D<SPAN=20
class=3Dst0>"my.form.isValid"</SPAN> ...<SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN =
class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"isValid"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
//=20
Flip a coin to determine validity. *evil laughter!* =
<BR> =20
return Math.round(Math.random() * =
100) % 2=20
=3D=3D 0;<BR> <SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN> =
<BR> =20
<SPAN class=3Dsc2><SPAN=20
class=3Dkw2></input></SPAN></SPAN></DIV></LI></OL>
<P>Of course, if your isValid function is the same for many widgets, you =
don't=20
want to define it over and over. So alternatively:=20
<OL>
<LI>Follow first 2 steps above=20
<LI>Write your function:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">my.<SPAN=20
class=3Dme1>form</SPAN>.<SPAN class=3Dme1>isValid</SPAN> =3D <SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN>isFocused<SPAN=20
class=3Dbr0>)</SPAN> <SPAN class=3Dbr0>{</SPAN><BR> <SPAN =
class=3Dco1>//=20
Flip a coin to determine validity. *evil laughter!* =20
</SPAN><BR> <SPAN class=3Dkw1>return</SPAN> Math.<SPAN=20
class=3Dme1>round</SPAN><SPAN class=3Dbr0>(</SPAN>Math.<SPAN=20
class=3Dme1>random</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>)</SPAN> *=20
<SPAN class=3Dnu0>100</SPAN><SPAN class=3Dbr0>)</SPAN> % <SPAN =
class=3Dnu0>2</SPAN>=20
=3D=3D <SPAN class=3Dnu0>0</SPAN>;<BR><SPAN class=3Dbr0>}</SPAN></DIV>
<LI>Connect the function to the extension point through an HTML =
attribute:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.ValidatingTextBox"</SPAN> isValid=3D<SPAN=20
class=3Dst0>"my.form.isValid"</SPAN> .../<SPAN=20
class=3Dkw2>></SPAN></SPAN></DIV></LI></OL>
<H3>Other Things You Can Do With Dijit</H3>
<UL>
<LI>You can change the style individual components, a Dijit class, or =
even=20
create an entire theme spanning all Dijit components. <A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/themes-and-design">The =
Themes=20
and Design section</A> tells you how.=20
<LI>You can create all Dijit components <A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/manipulating-widgets-through-code">programmatically</A>=20
as well as declaratively (through markup). All attributes, methods and =
extension points are available through JavaScript.=20
<LI>You can create subclasses of existing Dijit classes, or create =
your own=20
from scratch, described in the <A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/manipulating-widgets-through-code/writing-your">Writing=20
Your Own Widget</A> section. </LI></UL>
<DIV class=3Dbook-navigation>
<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/dijit-glan=
ce">=E2=80=B9=20
Dijit at a Glance</A><A class=3Dpage-up 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/form-valid=
ation-specialized-input">Form,=20
Validation, Specialized Input =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/716">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/716%2523comm=
ent-form">Login</A>=20
or <A=20
=
href=3D"http://dojotoolkit.org/user/register?destination=3Dnode/716%2523c=
omment-form">register</A>=20
to post comments</SPAN>=20
<LI class=3D"last subscriptions_add_node"><A =
class=3Dsubscriptions_add_node=20
title=3D"Receive an e-mail whenever a comment is posted to this Book =
page."=20
href=3D"http://dojotoolkit.org/subscriptions/add/node/716">Subscribe =
post</A>=20
</LI></UL></DIV></DIV>
<DIV id=3Dcomments><A id=3Dcomment-6869></A>
<DIV class=3Dcomment>
<H3 class=3Dtitle><A class=3Dactive=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/common-att=
ributes#comment-6869">Where=20
does "my.form" come from? This page doesn't define it.</A></H3>
<DIV class=3Dsubmitted>Submitted by Russell_Jones on Thu, 10/04/2007 -=20
10:20.</DIV>
<DIV class=3Dcontent>
<P>I'm trying to do something similar with a d.f.CheckBox:<BR>
<DIV class=3Dgeshifilter><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"checkbox"</SPAN> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.CheckBox"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"sectionb"</SPAN> <SPAN class=3Dkw3>name</SPAN>=3D<SPAN=20
class=3Dst0>"sectionb"</SPAN> <SPAN class=3Dkw3>tabindex</SPAN>=3D<SPAN=20
class=3Dst0>"103"</SPAN> <SPAN class=3Dkw3>onClick</SPAN>=3D<SPAN=20
class=3Dst0>"my.form.onClick <- ???"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"onClick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN> skip_section('b'); <SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></input></SPAN></SPAN></DIV>
<P>Why do I need to refer to a form? What is the form for? Why does the =
widget=20
care about what form it's in? What if I don't want to put the control in =
a form?=20
The page doesn't explain any of these things or link to where it is =
explained=20
that I can see.</P></DIV>
<DIV class=3Dlinks>
<UL class=3Dlinks>
<LI class=3D"first last comment_forbidden"><SPAN =
class=3Dcomment_forbidden><A=20
=
href=3D"http://dojotoolkit.org/user/login?destination=3Dnode/716%2523comm=
ent-form">Login</A>=20
or <A=20
=
href=3D"http://dojotoolkit.org/user/register?destination=3Dnode/716%2523c=
omment-form">register</A>=20
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?