|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: Animation: Animated Scrolling</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
<link href="assets//anim.css" rel="stylesheet" type="text/css"> |
|
|
20 |
|
|
|
21 |
</head> |
|
|
22 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
23 |
<div id="custom-doc" class="yui-t2"> |
|
|
24 |
<div id="hd"> |
|
|
25 |
<div id="ygunav"> |
|
|
26 |
<p> |
|
|
27 |
<em> |
|
|
28 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
29 |
</em> |
|
|
30 |
</p> |
|
|
31 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
32 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
33 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
34 |
<div id="sitesearch"> |
|
|
35 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
36 |
<input type="text" id="searchinput" name="p"> |
|
|
37 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
38 |
</div> |
|
|
39 |
</form> |
|
|
40 |
</div> |
|
|
41 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
42 |
<div id="pagetitle"><h1>YUI Library Examples: Animation: Animated Scrolling</h1></div> |
|
|
43 |
</div> |
|
|
44 |
<div id="bd"> |
|
|
45 |
|
|
|
46 |
|
|
|
47 |
<div id="yui-main"> |
|
|
48 |
<div class="yui-b"> |
|
|
49 |
<div class="yui-ge"> |
|
|
50 |
<div class="yui-u first example" id="main"> |
|
|
51 |
|
|
|
52 |
<h2>Animation: Animated Scrolling</h2> |
|
|
53 |
|
|
|
54 |
<div id="example" class="promo"> |
|
|
55 |
<div class="example-intro"> |
|
|
56 |
<p>This demonstrates how to animate the <code>scroll</code> of an element.</p> |
|
|
57 |
<p>Click the arrows to scroll the content up or down.</p> |
|
|
58 |
</div> |
|
|
59 |
|
|
|
60 |
<div class="module example-container "> |
|
|
61 |
<div class="hd exampleHd"> |
|
|
62 |
<p class="newWindowButton yui-skin-sam"> |
|
|
63 |
<a href="scroll_clean.html" target="_blank">View example in new window.</a> |
|
|
64 |
</p> |
|
|
65 |
</div> <div id="example-canvas" class="bd"> |
|
|
66 |
|
|
|
67 |
|
|
|
68 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
69 |
|
|
|
70 |
<div id="demo" class="yui-module yui-scroll"> |
|
|
71 |
<div class="yui-hd"> |
|
|
72 |
<h4>Animation Demo</h4> |
|
|
73 |
<span class="yui-scroll-controls"> |
|
|
74 |
<a title="scroll up" class="yui-scrollup"><em>scroll up</em></a> |
|
|
75 |
<a title="scroll down" class="yui-scrolldown"><em>scroll down</em></a> |
|
|
76 |
</span> |
|
|
77 |
</div> |
|
|
78 |
<div class="yui-bd"> |
|
|
79 |
<p>This an example of what you can do with the YUI Animation Utility.</p> |
|
|
80 |
<p><em>Follow the instructions above to see the animation in action.</em></p> |
|
|
81 |
<p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten. |
|
|
82 |
Waarom gebruiken we het? |
|
|
83 |
|
|
|
84 |
Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p> |
|
|
85 |
|
|
|
86 |
</div> |
|
|
87 |
</div> |
|
|
88 |
|
|
|
89 |
<script type="text/javascript"> |
|
|
90 |
YUI({base:"../../build/", timeout: 10000}).use("anim", function(Y) { |
|
|
91 |
var node = Y.get('#demo .yui-bd'); |
|
|
92 |
var anim = new Y.Anim({ |
|
|
93 |
node: node, |
|
|
94 |
to: { |
|
|
95 |
scroll: function(node) { |
|
|
96 |
return [0, node.get('scrollTop') + node.get('offsetHeight')] |
|
|
97 |
} |
|
|
98 |
}, |
|
|
99 |
easing: Y.Easing.easeOut |
|
|
100 |
}); |
|
|
101 |
|
|
|
102 |
var onClick = function(e) { |
|
|
103 |
var y = node.get('offsetHeight'); |
|
|
104 |
if (e.currentTarget.hasClass('yui-scrollup')) { |
|
|
105 |
y = 0 - y; |
|
|
106 |
} |
|
|
107 |
|
|
|
108 |
anim.set('to', { scroll: [0, y + node.get('scrollTop')] }); |
|
|
109 |
anim.run(); |
|
|
110 |
}; |
|
|
111 |
|
|
|
112 |
Y.all('#demo .yui-hd a').on('click', onClick); |
|
|
113 |
}); |
|
|
114 |
|
|
|
115 |
</script> |
|
|
116 |
|
|
|
117 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
118 |
|
|
|
119 |
|
|
|
120 |
</div> |
|
|
121 |
</div> |
|
|
122 |
</div> |
|
|
123 |
|
|
|
124 |
<h3>Setting up the HTML</h3> |
|
|
125 |
<p>First we add some HTML to animate. We'll add a bunch of arbitrary content to demonstrate the scroll effect.</p> |
|
|
126 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-module"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-hd"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">h4</span>></span>Animation Demo<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-scroll-controls"</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">a</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">"scroll up"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-scrollup"</span>><<span class="kw2">em</span>></span>scroll up<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">a</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">"scroll down"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-scrolldown"</span>><<span class="kw2">em</span>></span>scroll down<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-bd yui-scroll"</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">p</span>></span>This an example of what you can do with the YUI Animation Utility.<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>><<span class="kw2">em</span>></span>Follow the instructions above to see the animation in action.<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</div></li><li class="li1"><div class="de1"> Waarom gebruiken we het?</div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-module"</span>></span> |
|
|
127 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-hd"</span>></span> |
|
|
128 |
<span class="sc2"><<span class="kw2">h4</span>></span>Animation Demo<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span> |
|
|
129 |
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-scroll-controls"</span>></span> |
|
|
130 |
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">"scroll up"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-scrollup"</span>><<span class="kw2">em</span>></span>scroll up<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>></span> |
|
|
131 |
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">"scroll down"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-scrolldown"</span>><<span class="kw2">em</span>></span>scroll down<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>></span> |
|
|
132 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>></span> |
|
|
133 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
134 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-bd yui-scroll"</span>></span> |
|
|
135 |
<span class="sc2"><<span class="kw2">p</span>></span>This an example of what you can do with the YUI Animation Utility.<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
|
136 |
<span class="sc2"><<span class="kw2">p</span>><<span class="kw2">em</span>></span>Follow the instructions above to see the animation in action.<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
|
137 |
<span class="sc2"><<span class="kw2">p</span>></span>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten. |
|
|
138 |
Waarom gebruiken we het? |
|
|
139 |
|
|
|
140 |
Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span> |
|
|
141 |
|
|
|
142 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
143 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax1-plain"><div id="demo" class="yui-module"> |
|
|
144 |
<div class="yui-hd"> |
|
|
145 |
<h4>Animation Demo</h4> |
|
|
146 |
<span class="yui-scroll-controls"> |
|
|
147 |
<a title="scroll up" class="yui-scrollup"><em>scroll up</em></a> |
|
|
148 |
<a title="scroll down" class="yui-scrolldown"><em>scroll down</em></a> |
|
|
149 |
</span> |
|
|
150 |
</div> |
|
|
151 |
<div class="yui-bd yui-scroll"> |
|
|
152 |
<p>This an example of what you can do with the YUI Animation Utility.</p> |
|
|
153 |
<p><em>Follow the instructions above to see the animation in action.</em></p> |
|
|
154 |
<p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten. |
|
|
155 |
Waarom gebruiken we het? |
|
|
156 |
|
|
|
157 |
Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p> |
|
|
158 |
|
|
|
159 |
</div> |
|
|
160 |
</div></textarea></div> |
|
|
161 |
<h3>Creating the Anim Instance</h3> |
|
|
162 |
<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate.</p> |
|
|
163 |
|
|
|
164 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> node <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#demo'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> node<span class="sy0">,</span></div></li><li class="li2"><div class="de2"> duration<span class="sy0">:</span> <span class="nu0">1.5</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> node <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#demo'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
165 |
|
|
|
166 |
<span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span> |
|
|
167 |
node<span class="sy0">:</span> node<span class="sy0">,</span> |
|
|
168 |
duration<span class="sy0">:</span> <span class="nu0">1.5</span><span class="sy0">,</span> |
|
|
169 |
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span> |
|
|
170 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">var node = Y.get('#demo'); |
|
|
171 |
|
|
|
172 |
var anim = new Y.Anim({ |
|
|
173 |
node: node, |
|
|
174 |
duration: 1.5, |
|
|
175 |
easing: Y.Easing.easeOut |
|
|
176 |
});</textarea></div> |
|
|
177 |
<h3>Changing Attributes</h3> |
|
|
178 |
<p>Depending on which control is clicked, we may be scrolling up or down, so an event handler will update the <code>to</code> attribute's <code>scroll</code> behavior before calling <code>run</code>.</p> |
|
|
179 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> onClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> y <span class="sy0">=</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'yui-scrollup'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> y <span class="sy0">=</span> <span class="nu0">0</span> <span class="sy0">-</span> y<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> anim.<span class="me1">set</span><span class="br0">(</span><span class="st0">'to'</span><span class="sy0">,</span> <span class="br0">{</span> <span class="kw3">scroll</span><span class="sy0">:</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> y <span class="sy0">+</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'scrollTop'</span><span class="br0">)</span><span class="br0">]</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> onClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
180 |
<span class="kw2">var</span> y <span class="sy0">=</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
181 |
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'yui-scrollup'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
182 |
y <span class="sy0">=</span> <span class="nu0">0</span> <span class="sy0">-</span> y<span class="sy0">;</span> |
|
|
183 |
<span class="br0">}</span> |
|
|
184 |
|
|
|
185 |
anim.<span class="me1">set</span><span class="br0">(</span><span class="st0">'to'</span><span class="sy0">,</span> <span class="br0">{</span> <span class="kw3">scroll</span><span class="sy0">:</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> y <span class="sy0">+</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'scrollTop'</span><span class="br0">)</span><span class="br0">]</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
186 |
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
187 |
<span class="br0">}</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">var onClick = function(e) { |
|
|
188 |
var y = node.get('offsetHeight'); |
|
|
189 |
if (e.currentTarget.hasClass('yui-scrollup')) { |
|
|
190 |
y = 0 - y; |
|
|
191 |
} |
|
|
192 |
|
|
|
193 |
anim.set('to', { scroll: [0, y + node.get('scrollTop')] }); |
|
|
194 |
anim.run(); |
|
|
195 |
};</textarea></div> |
|
|
196 |
<h3>Running the Animation</h3> |
|
|
197 |
<p>Finally we add an event handler to run the animation. Both of our controls use the same handler, so we can use the <code>Y.all</code> method to assign the handler to both.</p> |
|
|
198 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#demo .yui-hd a'</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> onClick<span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#demo .yui-hd a'</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> onClick<span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">Y.all('#demo .yui-hd a').on('click', onClick);</textarea></div> |
|
|
199 |
<h3>Full Script Source</h3> |
|
|
200 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'anim'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#demo .yui-bd'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span> node<span class="sy0">,</span></div></li><li class="li2"><div class="de2"> to<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">scroll</span><span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'scrollTop'</span><span class="br0">)</span> <span class="sy0">+</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> onClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> y <span class="sy0">=</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'yui-scrollup'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> y <span class="sy0">=</span> <span class="nu0">0</span> <span class="sy0">-</span> y<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> anim.<span class="me1">set</span><span class="br0">(</span><span class="st0">'to'</span><span class="sy0">,</span> <span class="br0">{</span> <span class="kw3">scroll</span><span class="sy0">:</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> y <span class="sy0">+</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'scrollTop'</span><span class="br0">)</span><span class="br0">]</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#demo .yui-hd a'</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> onClick<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">'anim'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
201 |
<span class="kw2">var</span> node <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#demo .yui-bd'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
202 |
<span class="kw2">var</span> anim <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span> |
|
|
203 |
node<span class="sy0">:</span> node<span class="sy0">,</span> |
|
|
204 |
to<span class="sy0">:</span> <span class="br0">{</span> |
|
|
205 |
<span class="kw3">scroll</span><span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span> |
|
|
206 |
<span class="kw1">return</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'scrollTop'</span><span class="br0">)</span> <span class="sy0">+</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="br0">]</span> |
|
|
207 |
<span class="br0">}</span> |
|
|
208 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
209 |
easing<span class="sy0">:</span> Y.<span class="me1">Easing</span>.<span class="me1">easeOut</span> |
|
|
210 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
211 |
|
|
|
212 |
<span class="kw2">var</span> onClick <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
213 |
<span class="kw2">var</span> y <span class="sy0">=</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'offsetHeight'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
214 |
<span class="kw1">if</span> <span class="br0">(</span>e.<span class="me1">currentTarget</span>.<span class="me1">hasClass</span><span class="br0">(</span><span class="st0">'yui-scrollup'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
215 |
y <span class="sy0">=</span> <span class="nu0">0</span> <span class="sy0">-</span> y<span class="sy0">;</span> |
|
|
216 |
<span class="br0">}</span> |
|
|
217 |
|
|
|
218 |
anim.<span class="me1">set</span><span class="br0">(</span><span class="st0">'to'</span><span class="sy0">,</span> <span class="br0">{</span> <span class="kw3">scroll</span><span class="sy0">:</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> y <span class="sy0">+</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">'scrollTop'</span><span class="br0">)</span><span class="br0">]</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
219 |
anim.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
220 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
221 |
|
|
|
222 |
Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">'#demo .yui-hd a'</span><span class="br0">)</span>.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> onClick<span class="br0">)</span><span class="sy0">;</span> |
|
|
223 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">YUI().use('anim', function(Y) { |
|
|
224 |
var node = Y.get('#demo .yui-bd'); |
|
|
225 |
var anim = new Y.Anim({ |
|
|
226 |
node: node, |
|
|
227 |
to: { |
|
|
228 |
scroll: function(node) { |
|
|
229 |
return [0, node.get('scrollTop') + node.get('offsetHeight')] |
|
|
230 |
} |
|
|
231 |
}, |
|
|
232 |
easing: Y.Easing.easeOut |
|
|
233 |
}); |
|
|
234 |
|
|
|
235 |
var onClick = function(e) { |
|
|
236 |
var y = node.get('offsetHeight'); |
|
|
237 |
if (e.currentTarget.hasClass('yui-scrollup')) { |
|
|
238 |
y = 0 - y; |
|
|
239 |
} |
|
|
240 |
|
|
|
241 |
anim.set('to', { scroll: [0, y + node.get('scrollTop')] }); |
|
|
242 |
anim.run(); |
|
|
243 |
}; |
|
|
244 |
|
|
|
245 |
Y.all('#demo .yui-hd a').on('click', onClick); |
|
|
246 |
});</textarea></div> |
|
|
247 |
</div> |
|
|
248 |
<div class="yui-u sidebar"> |
|
|
249 |
|
|
|
250 |
|
|
|
251 |
<div id="examples" class="mod box4"> |
|
|
252 |
<div class="hd"> |
|
|
253 |
<h4> |
|
|
254 |
Animation Examples:</h4> |
|
|
255 |
</div> |
|
|
256 |
<div class="bd"> |
|
|
257 |
<ul> |
|
|
258 |
<li><a href='../anim/basic.html'>Basic Animation</a></li><li><a href='../anim/easing.html'>Animation Easing</a></li><li><a href='../anim/colors.html'>Animating Colors</a></li><li><a href='../anim/alt-iterations.html'>Alternating Iterations</a></li><li><a href='../anim/anim-xy.html'>Animating XY Position</a></li><li><a href='../anim/curve.html'>Animating Along a Curved Path</a></li><li class='selected'><a href='../anim/scroll.html'>Animated Scrolling</a></li><li><a href='../anim/reverse.html'>Reversing an Animation</a></li><li><a href='../anim/end-event.html'>Using the End Event</a></li><li><a href='../anim/anim-chaining.html'>Chaining Animations Using the <code>end</code> Event</a></li><li><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin (included with examples for Overlay)</a></li><li><a href='../async-queue/queue_app.html'>Building a UI with AsyncQueue (included with examples for AsyncQueue)</a></li><li><a href='../console/console_global.html'>Creating a universal Console (included with examples for Console)</a></li> </ul> |
|
|
259 |
</div> |
|
|
260 |
</div> |
|
|
261 |
|
|
|
262 |
<div class="mod box4"> |
|
|
263 |
<div class="hd"> |
|
|
264 |
<h4>More Animation Resources:</h4> |
|
|
265 |
</div> |
|
|
266 |
<div class="bd"> |
|
|
267 |
<ul> |
|
|
268 |
<!-- <li><a href="http://developer.yahoo.com/yui/anim/">User's Guide</a> (external)</li> --> |
|
|
269 |
<li><a href="../../api/module_anim.html">API Documentation</a></li></ul> |
|
|
270 |
</div> |
|
|
271 |
</div> |
|
|
272 |
</div> |
|
|
273 |
</div> |
|
|
274 |
|
|
|
275 |
</div> |
|
|
276 |
</div> |
|
|
277 |
|
|
|
278 |
|
|
|
279 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
280 |
<!-- TABLE OF CONTENTS --> |
|
|
281 |
<div id="toc"> |
|
|
282 |
|
|
|
283 |
<ul> |
|
|
284 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="selected "><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
|
285 |
</div> |
|
|
286 |
</div> |
|
|
287 |
</div><!--closes bd--> |
|
|
288 |
|
|
|
289 |
<div id="ft"> |
|
|
290 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
291 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
292 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
293 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
294 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
295 |
</div> |
|
|
296 |
</div> |
|
|
297 |
<script language="javascript"> |
|
|
298 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
299 |
</script> |
|
|
300 |
<script src="../../assets/syntax.js"></script> |
|
|
301 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
302 |
<script language="javascript"> |
|
|
303 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
304 |
</script> |
|
|
305 |
</body> |
|
|
306 |
</html> |