📄 the client page the dojo toolkit.mht

📁 dojo学习资料,从初级开始学起,是初学都认识dojo的好帮手.
💻 MHT
📖 第 1 页 / 共 5 页
字号:
12 3 4 5 下一页
From: <由 Windows Internet Explorer 7 保存>
Subject: The Client Page | The Dojo Toolkit
Date: Sun, 2 Dec 2007 16:26:02 +0800
MIME-Version: 1.0
Content-Type: multipart/related;
	type="text/html";
	boundary="----=_NextPart_000_00E7_01C83500.07B873A0"
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.3198

This is a multi-part message in MIME format.

------=_NextPart_000_00E7_01C83500.07B873A0
Content-Type: text/html;
	charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Location: http://dojotoolkit.org/node/4586

=EF=BB=BF<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" =
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=3Den xml:lang=3D"en" =
xmlns=3D"http://www.w3.org/1999/xhtml"><HEAD><TITLE>The Client Page | =
The Dojo Toolkit</TITLE><!--=0A=
	section: default -->
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Dutf-8"><LINK=20
href=3D"/book/book-dojo/part-1-life-dojo-dojo-and-dijit-application-examp=
les/example-4-chatting-tech-suppor-0"=20
rel=3Dprev><LINK=20
href=3D"/book/book-dojo/part-1-life-dojo-dojo-and-dijit-application-examp=
les/example-4-chatting-tech-support"=20
rel=3Dup><LINK=20
href=3D"/book/book-dojo/part-1-life-dojo-dojo-and-dijit-application-examp=
les/example-3-chatting-tech-suppor-0"=20
rel=3Dnext>
<STYLE type=3Dtext/css>.geshifilter {
	FONT-FAMILY: monospace
}
.geshifilter .imp {
	FONT-WEIGHT: bold; COLOR: red
}
.geshifilter .kw1 {
	COLOR: #b1b100
}
.geshifilter .kw2 {
	FONT-WEIGHT: bold; COLOR: #000000
}
.geshifilter .kw3 {
	COLOR: #000066
}
.geshifilter .coMULTI {
	COLOR: #808080; FONT-STYLE: italic
}
.geshifilter .es0 {
	FONT-WEIGHT: bold; COLOR: #000099
}
.geshifilter .br0 {
	COLOR: #66cc66
}
.geshifilter .st0 {
	COLOR: #ff0000
}
.geshifilter .nu0 {
	COLOR: #cc66cc
}
.geshifilter .sc0 {
	COLOR: #00bbdd
}
.geshifilter .sc1 {
	COLOR: #ddbb00
}
.geshifilter .sc2 {
	COLOR: #009900
}
.geshifilter {
	FONT-FAMILY: monospace
}
.geshifilter .imp {
	FONT-WEIGHT: bold; COLOR: red
}
.geshifilter .kw1 {
	FONT-WEIGHT: bold; COLOR: #000066
}
.geshifilter .kw2 {
	FONT-WEIGHT: bold; COLOR: #003366
}
.geshifilter .kw3 {
	COLOR: #000066
}
.geshifilter .co1 {
	COLOR: #009900; FONT-STYLE: italic
}
.geshifilter .coMULTI {
	COLOR: #009900; FONT-STYLE: italic
}
.geshifilter .es0 {
	FONT-WEIGHT: bold; COLOR: #000099
}
.geshifilter .br0 {
	COLOR: #66cc66
}
.geshifilter .st0 {
	COLOR: #3366cc
}
.geshifilter .nu0 {
	COLOR: #cc0000
}
.geshifilter .me1 {
	COLOR: #006600
}
.geshifilter .re0 {
	COLOR: #0066ff
}
</STYLE>
<LINK href=3D"/sites/all/themes/dtk/favicon.ico" type=3Dimage/x-icon=20
rel=3D"shortcut icon">
<META content=3Den name=3Dlanguage>
<STYLE type=3Dtext/css media=3Dall>@import url( =
/files/css/4538c7b86f5ddf0e20fe837f59d90fef.css );
</STYLE>

<SCRIPT src=3D"http://dojotoolkit.org/dojo/config/6"=20
type=3Dtext/javascript></SCRIPT>

<SCRIPT=20
src=3D"http://dojotoolkit.org/sites/all/modules/dojo/dtk_build/dojo/dojo.=
js"=20
type=3Dtext/javascript></SCRIPT>

<SCRIPT =
type=3Dtext/javascript>dojo.addOnLoad(function(){dojo.addClass(dojo.body(=
),"tundra");});</SCRIPT>

<SCRIPT type=3Dtext/javascript>dojo.require("dojo.parser");</SCRIPT>

<SCRIPT =
type=3Dtext/javascript>document.documentElement.className=3D"js";</SCRIPT=
>

<SCRIPT src=3D"http://dojotoolkit.org/sites/all/themes/dtk/js/common.js" =

type=3Dtext/javascript></SCRIPT>

<SCRIPT type=3Dtext/javascript>
	dojo.require("dijit._base.sniff");
	</SCRIPT>

<META content=3D"MSHTML 6.00.6000.16544" name=3DGENERATOR></HEAD>
<BODY class=3D"" id=3Dbdy>
<DIV id=3Dpage-block><!-- region_user_header.php -->
<DIV id=3Dlogin-block><SPAN id=3Duser-header>&nbsp;</SPAN> <SPAN =
id=3Dlogin-prompt><A=20
href=3D"http://dojotoolkit.org/user">Login</A></SPAN> <SPAN =
id=3Dregister-prompt><A=20
href=3D"http://dojotoolkit.org/user/register">Register</A></SPAN> =
</DIV><!-- /region_user_header.php -->
<DIV id=3Dbody-block><!-- region_header.php -->
<DIV id=3Dlogo-block>
<DIV id=3Ddojo-logo><A title=3DHome =
href=3D"http://dojotoolkit.org/"><IMG=20
id=3Ddojo-logo-img alt=3D"The Dojo Toolkit"=20
src=3D"http://dojotoolkit.org/sites/all/themes/dtk/img/banner-logo-text.g=
if"></A>=20
</DIV>
<DIV id=3Dsearch-block>
<FORM id=3Dsearch-theme-form action=3D/search/node method=3Dpost>
<DIV>
<H6 class=3Dhidden><LABEL =
for=3Dsearch_theme_form_keys>Search</LABEL></H6>
<DIV class=3Dcontainer-inline id=3Dsearch>
<DIV class=3Dform-item><INPUT class=3Dform-text =
id=3Dedit-search-theme-form-keys=20
title=3D"Enter the terms you wish to search for." maxLength=3D128 =
size=3D25=20
name=3Dsearch_theme_form_keys><BUTTON class=3Dform-submit =
id=3Dedit-submit-1 name=3Dop=20
type=3Dsubmit><SPAN class=3Dhidden>Search</SPAN></BUTTON> <INPUT=20
id=3Dedit-search-theme-form type=3Dhidden value=3Dsearch_theme_form =
name=3Dform_id>=20
<INPUT id=3Da-unique-id type=3Dhidden =
value=3D3f69e328cbd47ff457e4b25037ebd4be=20
name=3Dform_token> </DIV></DIV></DIV></FORM></DIV></DIV><!-- =
/region_header.php -->
<DIV id=3Dglobal-menu-block>
<UL id=3Dglobal-menu>
  <LI id=3Dnav-about><A class=3Dplink =
href=3D"http://dojotoolkit.org/about">About</A>=20
  <LI id=3Dnav-demos><A class=3Dplink =
href=3D"http://dojotoolkit.org/demos">Demos</A>=20
  <LI id=3Dnav-downloads><A class=3Dplink=20
  href=3D"http://dojotoolkit.org/downloads">Downloads</A>=20
  <LI id=3Dnav-documentation><A class=3Dplink=20
  href=3D"http://dojotoolkit.org/docs">Documentation</A>=20
  <LI id=3Dnav-support><A class=3Dplink=20
  href=3D"http://dojotoolkit.org/support">Support</A>=20
  <LI id=3Dnav-community><A class=3Dplink=20
  href=3D"http://dojotoolkit.org/community">Community</A>=20
  <LI id=3Dnav-fullmenu><A onclick=3D"return false;"=20
  href=3D"http://dojotoolkit.org/node/4586#fullmenu">Full Menu</A> =
</LI></UL></DIV><!-- region_banner.php -->
<DIV class=3Dbanner-default id=3Dbanner-block>
<DIV id=3Dsection-heading>
<P>The Dojo Toolkit: Great experiences...for =
everyone.</P></DIV></DIV><!-- /region_banner.php -->
<DIV id=3Dtop-breadcrumb-block>
<DIV class=3Dbreadcrumb><A href=3D"http://dojotoolkit.org/">Home</A> =
=C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A> =C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo-0">Par=
t 1: Life=20
With Dojo</A> =C2=BB <A=20
href=3D"http://dojotoolkit.org/book/book-dojo/part-1-life-dojo-dojo-and-d=
ijit-application-examples/example-4-chatting-tech-support">Example=20
3: Chatting with Tech Support</A> =C2=BB The Client Page</DIV></DIV>
<DIV id=3Dcontent-block>
<DIV class=3Dcols-wide>
<DIV class=3D"col-a content-region-container" =
id=3Dsidebar-left-container></DIV>
<DIV class=3D"col-b content-region-container">
<DIV id=3Dmain-container><!-- main_content region -->
<H2>The Client Page</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by criecke on Sat, 11/24/2007 - =
22:27.</DIV>
<DIV class=3Dcontent>
<P>The client page uses some eye candy from Dojo. (Clients love eye =
candy!)</P>
<H2>Animation</H2>
<P>The client chat window can be open and closed at will. Laura decides =
that the=20
window should fade in and fade out - an easy thing to do with Dojo. </P>
<P>An <I>animation</I> in Dojo terms is the graduated movement of a DOM =
node=20
from one state to another. A fade-in, for example, is the movement of =
opacity=20
(the opposite of transparency) from 0% to 100%. Animations cover a set =
span of=20
time, so you can fade in over the course of milliseconds, seconds, or =
minutes.=20
In Dojo Animation, the most general form of an animation is a function. =
Some=20
animations are so popular, like fades and slides, that Dojo packages =
those=20
functions for you.</P>
<P>The animation for fading in, triggered by the Show button, looks like =

this:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2>&lt;button</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN><SPAN =
class=3Dkw2>&gt;</SPAN></SPAN><BR>Show /=20
Hide Tech Support Chat <BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2>&lt;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>&gt;</SPAN></SPAN><BR>&nbsp; &nbsp;var anim =3D =
dojo.fadeIn({ node:=20
helpNode.domNode, duration: 400 });<BR>&nbsp;=20
&nbsp;dojo.connect(anim,"beforeBegin",function(){<BR>&nbsp; &nbsp; =
&nbsp; &nbsp;=20
dojo.style(helpNode.domNode,"display","block");&nbsp;<BR>&nbsp; &nbsp; =
&nbsp;=20
&nbsp; helpNode.toggle();<BR>&nbsp; &nbsp; &nbsp; &nbsp;=20
_positionIt();<BR>&nbsp; &nbsp;});<BR>&nbsp; &nbsp;anim.play(); =
<BR><SPAN=20
class=3Dsc2><SPAN class=3Dkw2>&lt;/script&gt;</SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2>&lt;/button&gt;</SPAN></SPAN></DIV>
<P>The fade-in lasts for 400 ms. We hook a snippet of code in front of =
the=20
animation to set the panel to display:block mode first, turn it on and =
position=20
it to the top of the screen. This is necessary because opacity only =
works on an=20
element that's actually displayed ... if it's display:node, as our node =
starts=20
out as, the fade in won't work at all.</P>
<P>Because the corresponding fade-out for hiding is very similar, we =
rewrite the=20
extension point to handle both jobs. helpNode.open is true if the chat =
window is=20
currently open.</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2>&lt;button</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN><SPAN =
class=3Dkw2>&gt;</SPAN></SPAN><BR>Show /=20
Hide Tech Support Chat <BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2>&lt;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>&gt;</SPAN></SPAN><BR>&nbsp; &nbsp; var anim =3D =
dojo[(helpNode.open ?=20
"fadeOut" : "fadeIn")]({ node: helpNode.domNode, duration: 400 =
});<BR>&nbsp;=20
&nbsp; dojo.connect(anim,(helpNode.open ? "onEnd" :=20
"beforeBegin"),function(){<BR>&nbsp; &nbsp; &nbsp;=20
&nbsp;dojo.style(helpNode.domNode,"display",(helpNode.open ? "none" :=20
"block"));&nbsp; &nbsp; &nbsp; &nbsp;<BR>&nbsp; &nbsp; &nbsp;=20
&nbsp;helpNode.toggle();<BR>&nbsp; &nbsp; &nbsp; =
&nbsp;_positionIt();<BR>&nbsp;=20
&nbsp; });<BR>&nbsp; &nbsp; anim.play(); <BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2>&lt;/script&gt;</SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2>&lt;/button&gt;</SPAN></SPAN></DIV>
<H2>Keeping the Window Visible</H2>
<P>Of course we don't want the chat window to scroll up as the user =
scrolls up.=20
So we hook some code into the onScroll event of the window. onScroll is =
one of=20
those handy Dojo Events. It is actually a front for the DOM Level 2 =
event of the=20
same name, which Firefox implements in a standard way, and IE in a =
non-standard=20
way. Well, we don't have to worry about that. That gives Laura more time =
to be=20
creative.</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dco1>// this=20
puts our help box in the top/right corner on scroll and =
show</SPAN><BR><SPAN=20
class=3Dkw2>function</SPAN> _positionIt<SPAN =
class=3Dbr0>(</SPAN>evt<SPAN=20
class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR>&nbsp; &nbsp; <SPAN=20
class=3Dkw1>if</SPAN> <SPAN class=3Dbr0>(</SPAN>helpNode.<SPAN=20
class=3Dme1>domNode</SPAN>.<SPAN class=3Dme1>style</SPAN>.<SPAN=20
class=3Dme1>display</SPAN> =3D=3D <SPAN class=3Dst0>"block"</SPAN><SPAN=20
class=3Dbr0>)</SPAN><SPAN class=3Dbr0>{</SPAN><BR>&nbsp; &nbsp; &nbsp; =
&nbsp;=20
dojo.<SPAN class=3Dme1>style</SPAN><SPAN =
class=3Dbr0>(</SPAN>helpNode.<SPAN=20
class=3Dme1>domNode</SPAN>,<SPAN class=3Dst0>"top"</SPAN>,<SPAN=20
class=3Dbr0>(</SPAN>dijit.<SPAN class=3Dme1>getViewport</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dbr0>)</SPAN>.<SPAN =
class=3Dme1>t</SPAN> + <SPAN=20
class=3Dnu0>4</SPAN><SPAN class=3Dbr0>)</SPAN> + <SPAN =
class=3Dst0>"px"</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR>&nbsp; &nbsp; <SPAN =
class=3Dbr0>}</SPAN><BR><SPAN=20
class=3Dbr0>}</SPAN><BR class=3Dgeshibr><SPAN class=3Dkw2>var</SPAN> =
helpNode;=20
<BR>dojo.<SPAN class=3Dme1>addOnLoad</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dkw2>function</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>{</SPAN> <BR>&nbsp; &nbsp; dojo.<SPAN =
class=3Dme1>parser</SPAN>.<SPAN=20
class=3Dme1>parse</SPAN><SPAN class=3Dbr0>(</SPAN>dojo.<SPAN=20
class=3Dme1>body</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>)</SPAN><SPAN=20
class=3Dbr0>)</SPAN>; <BR>&nbsp; &nbsp; helpNode =3D dijit.<SPAN=20
class=3Dme1>byId</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>'helpPane'</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR>&nbsp; =
&nbsp; dojo.<SPAN=20
class=3Dme1>connect</SPAN><SPAN class=3Dbr0>(</SPAN>window,<SPAN=20
class=3Dst0>"onscroll"</SPAN>,<SPAN =
class=3Dst0>"_positionIt"</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR class=3Dgeshibr>&nbsp; &nbsp; <SPAN =
class=3Dco1>// this is a=20
placeholder for the cometd server, once we get a public =
one.</SPAN><BR>&nbsp;=20
&nbsp; dojox.<SPAN class=3Dme1>cometd</SPAN>.<SPAN =
class=3Dme1>init</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"http://comet.yours.com:9000/cometd"</SPAN><SPAN =
class=3Dbr0>)</SPAN>;=20
<BR><SPAN class=3Dbr0>}</SPAN><SPAN class=3Dbr0>)</SPAN>;</DIV>
<P>_positionIt repositions the window to be 4 pixels from the top of the =

viewport, which Dijit provides through its handy dijit.viewport =
function. The=20
four viewport coordinates are kept in properties t, b, l and w (top, =
bottom,=20
length, width).</P>
12 3 4 5 下一页
💿 文件大小 3972 K
👤 上传用户 devilgaze
📂 所属分类 Java书籍
🏷️ 相关标签

#dojo
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -