YUI
The Yahoo! User Interface Library
How is quot;YUIquot; pronounced?

  Within the YUI team, we tend to pronounce
  it quot;why-you-eyequot;. However, in the ...
developer.yahoo.com/yui
YUI = JS + CSS
A-graded browsers
Controls/
Core            Utilities                            CSS tools
                                  Widgets
       ...
Events
<script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>

<div
id=quot;containerquot;>
  <p>Click...
Events
<script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>

<a
href=quot;...quot;
id=quot;firstAquo...
<script>

(function()
{


  var
helloWorld
=
function(e)
{
  

  
     alert(quot;Hello
World!quot;);
  }

  YAHOO.util.Ev...
<script>

(function()
{


  var
helloWorld
=
function(e)
{
  
     YAHOO.log(quot;helloWorld
function
firing.quot;,
quot;i...
Custom events
var
onSizeChange
=
new
YAHOO.util.CustomEvent
(quot;onSizeChangequot;);

function
fnClick(e)
{
     .
.
.

 ...
DOM collection
<script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>


<script
src=quot;/js/yui/yahoo...
DOM collection
var
testClass
=
function
(e)
{
   alert
(YAHOO.util.Dom.hasClass
('foo',
'baz'));
};


var
addClass
=
funct...
Drag & drop
<script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<script
src=quot;/js/yui/dragdrop/d...
Animation
<script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<script
src=quot;/js/yui/animation/an...
Animating motion; animated scrolling
<script
type=quot;text/javascriptquot;>
(function()
{





var
attributes
=
{







...
developer.yahoo.com/yui/examples
Краткий обзор библиотеки YUI
Краткий обзор библиотеки YUI
Краткий обзор библиотеки YUI
Краткий обзор библиотеки YUI
Краткий обзор библиотеки YUI
Краткий обзор библиотеки YUI
Upcoming SlideShare
Loading in …5
×

Краткий обзор библиотеки YUI

699 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
699
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Краткий обзор библиотеки YUI

  1. 1. YUI The Yahoo! User Interface Library
  2. 2. How is quot;YUIquot; pronounced? Within the YUI team, we tend to pronounce it quot;why-you-eyequot;. However, in the wider world we more often hear it pronounced quot;yooey.quot; There's no wrong answer here.
  3. 3. developer.yahoo.com/yui
  4. 4. YUI = JS + CSS
  5. 5. A-graded browsers
  6. 6. Controls/ Core Utilities CSS tools Widgets AutoComplete YAHOO Animation CSS Reset global object Calendar Browser history CSS Base DOM ColorPicker collection Connection CSS Fonts manager (Ajax) Container Event utility CSS Grids Drag & drop Logger Image loader Menu YUI loader Rich text editor Slider TabView TreeView
  7. 7. Events <script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script> <div
id=quot;containerquot;> <p>Click
for
Hello
World
alert.</p> </div> var
helloWorld
=
function
(e)
{ 
 alert
(quot;Hello
World!quot;); } YAHOO.util.Event.addListener
(quot;containerquot;,
quot;clickquot;,
helloWorld);
  8. 8. Events <script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script> <a
href=quot;...quot;
id=quot;firstAquot;>...</a> <a
href=quot;...quot;
id=quot;secondAquot;>...</a> var
interceptLink
=
function(e)
{ 
 YAHOO.util.Event.preventDefault
(e); 
 alert
(quot;You
clicked
on
the
second
YUI
link.quot;); } YAHOO.util.Event.addListener
(quot;secondAquot;,
quot;clickquot;,
interceptLink);
  9. 9. <script> (function()
{ 
 var
helloWorld
=
function(e)
{ 
 
 alert(quot;Hello
World!quot;); } YAHOO.util.Event.addListener(quot;containerquot;,
quot;clickquot;,
helloWorld); var
interceptLink
=
function(e)
{ 
 YAHOO.util.Event.preventDefault(e); 
 alert(quot;You
clicked
on
the
second
YUI
link.quot;); } YAHOO.util.Event.addListener(quot;secondAquot;,
quot;clickquot;,
interceptLink); })(); </script>
  10. 10. <script> (function()
{ 
 var
helloWorld
=
function(e)
{ 
 YAHOO.log(quot;helloWorld
function
firing.quot;,
quot;infoquot;,
quot;examplequot;); 
 alert(quot;Hello
World!quot;); } YAHOO.util.Event.addListener(quot;containerquot;,
quot;clickquot;,
helloWorld); var
interceptLink
=
function(e)
{ 
 YAHOO.util.Event.preventDefault(e); 
 YAHOO.log(quot;You
clicked
on
the
second
YUI
link.quot;,
quot;infoquot;,
quot;examplequot;); 
 alert(quot;You
clicked
on
the
second
YUI
link.quot;); } YAHOO.util.Event.addListener(quot;secondAquot;,
quot;clickquot;,
interceptLink); YAHOO.log(quot;When
you
begin
interacting
with
the
example
at
left,
you'll
see
log
 messages
appear
here.quot;,
quot;infoquot;,
quot;examplequot;); })(); </script>
  11. 11. Custom events var
onSizeChange
=
new
YAHOO.util.CustomEvent
(quot;onSizeChangequot;); function
fnClick(e)
{ .
.
.
 onSizeChange.fire
({width:
newWidth, 









height:
newHeight});
 } onSizeChange.subscribe
(fnSubscriberWidth); onSizeChange.subscribe
(fnSubscriberHeight); fnSubscriberWidth
=
function
(type,
args)
{ 
 var
newWidth
=
args[0].width; 

.
.
. } fnSubscriberHeight
=
function(type,
args)
{
 
 var
newHeight
=
args[0].height; 
 .
.
. }

  12. 12. DOM collection <script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script> <script
src=quot;/js/yui/yahoo/yahoo.jsquot;></script> <script
src=quot;/js/yui/dom/dom.jsquot;></script> YAHOO.util.Event.on
(document,
quot;clickquot;,
move); var
move
=
function
(e)
{ YAHOO.util.Dom.setXY
('foo',
YAHOO.util.Event.getXY
(e)); }; var
move
=
function()
{ var
xy
=
YAHOO.util.Dom.getXY
('bar'); 

YAHOO.util.Dom.setXY
('foo',
xy); }; YAHOO.util.Dom.setStyle
('foo',
'opacity',
0.5); var
bgcolor
=
YAHOO.util.Dom.getStyle
('bar',
'backgroundColor'); YAHOO.util.Dom.setStyle
('foo',
'backgroundColor',
bgcolor);
  13. 13. DOM collection var
testClass
=
function
(e)
{ alert
(YAHOO.util.Dom.hasClass
('foo',
'baz')); }; var
addClass
=
function
(e)
{ YAHOO.util.Dom.addClass
('foo',
'baz'); alert
(YAHOO.util.Dom.get
('foo').className); }; var
removeClass
=
function
(e)
{ YAHOO.util.Dom.removeClass
('foo',
'baz'); alert
(YAHOO.util.Dom.get('foo').className); }; var
getByClass
=
function
(e)
{ alert
('found:
'
+ 






YAHOO.util.Dom.getElementsByClassName
('bar',
'div').length
+ 





'
elements'); };
  14. 14. Drag & drop <script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script> <script
src=quot;/js/yui/dragdrop/dragdrop.jsquot;></script> <div
id=quot;dd‐demo‐1quot;
class=quot;dd‐demoquot;></div> <div
id=quot;dd‐demo‐2quot;
class=quot;dd‐demoquot;></div> <div
id=quot;dd‐demo‐3quot;
class=quot;dd‐demoquot;></div> <script
type=quot;text/javascriptquot;> 



(function()
{ 







var
dd,
dd2,
dd3; 







YAHOO.util.Event.onDOMReady
(function()
{ 











dd
=
new
YAHOO.util.DD
(quot;dd‐demo‐1quot;); 











dd2
=
new
YAHOO.util.DD
(quot;dd‐demo‐2quot;); 











dd3
=
new
YAHOO.util.DD
(quot;dd‐demo‐3quot;); 







}); 



})(); </script>
  15. 15. Animation <script
src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script> <script
src=quot;/js/yui/animation/animation.jsquot;></script> var
attributes
=
{ width:
{
to:
0
} }; var
anim
=
new
YAHOO.util.Anim
('demo',
attributes); YAHOO.util.Event.on
('demo‐run',
'click',
function()
{ anim.animate(); }); var
attributes
=
{ width:
{
from:
30,
to:
10,
unit:'em'
} }; var
attributes
=
{ height:
{
to:
50
}, width:
{
to:
50
} };
  16. 16. Animating motion; animated scrolling <script
type=quot;text/javascriptquot;> (function()
{ 



var
attributes
=
{ 







points:
{
to:
[600,
10]
} 



}; 



var
anim
=
new
YAHOO.util.Motion
('demo',
attributes); 



YAHOO.util.Event.on
('demo‐run',
'click',
function()
{ 







anim.animate(); 



}); })(); </script> var
attributes
=
{ points:
{
to:
[600,
10],
control:
[
[300,
100],
[800,
800]
]
} }; var
attributes
=
{ scroll:
{
to:
[0,
200]
} }; var
anim
=
new
YAHOO.util.Scroll('demo',
attributes);
  17. 17. developer.yahoo.com/yui/examples

×