ÿþ T y t u B o r y g i n a Bu : j Q u e r y : N o v i c e t o N i n j a b y E a r l e C a s t l e d i n e a n d C r a i g S h a r k i e
T Bu m a c z e n i e : M a r e k P t l i c k i
I S B N : 9 7 8 - 8 3 - 2 4 6 - 3 6 1 8 - 1
© H e l i o n S . A . 2 0 1 2
A u t h o r i z e d t r a n s l a t i o n o f t h e E n g l i s h e d i t i o n o f j Q u e r y : N o v i c e t o N i n j a , 1 s t E d i t i o n I S B N 9 7 8 0 9 8 0 5 7 6 8 5 6
© 2 0 1 0 , S i t e P o i n t P t y . L t d . T h i s t r a n s l a t i o n i s p u b l i s h e d a n d s o l d b y p e r m i s s i o n o f O ' R e i l l y M e d i a , I n c . , t h e
o w n e r o f a l l r i g h t s t o p u b l i s h a n d s e l l t h e s a m e .
A l l r i g h t s r e s e r v e d . N o p a r t o f t h i s b o o k m a y b e r e p r o d u c e d o r t r a n s m i t t e d i n a n y f o r m o r b y a n y m e a n s ,
e l e c t r o n i c o r m e c h a n i c a l , i n c l u d i n g p h o t o c o p y i n g , r e c o r d i n g o r b y a n y i n f o r m a t i o n s t o r a g e r e t r i e v a l s y s t e m ,
w i t h o u t p e r m i s s i o n f r o m t h e P u b l i s h e r .
W s z e l k i e p r a w a z a s t r z e |o n e . N i e a u t o r y z o w a n e r o z p o w s z e c h n i a n i e c a Bo [c i l u b f r a g m e n t u n i n i e j s z e j
p u b l i k a c j i w j a k i e j k o l w i e k p o s t a c i j e s t z a b r o n i o n e . W y k o n y w a n i e k o p i i m e t o d k s e r o g r a f i c z n ,
f o t o g r a f i c z n , a t a k |e k o p i o w a n i e k s i |k i n a n o [n i k u f i l m o w y m , m a g n e t y c z n y m l u b i n n y m p o w o d u j e
n a r u s z e n i e p r a w a u t o r s k i c h n i n i e j s z e j p u b l i k a c j i .
W s z y s t k i e z n a k i w y s t p u j c e w t e k [c i e s z a s t r z e |o n y m i z n a k a m i f i r m o w y m i b d z t o w a r o w y m i i c h
w Ba [c i c i e l i .
A u t o r o r a z W y d a w n i c t w o H E L I O N d o Bo |y l i w s z e l k i c h s t a r a D, b y z a w a r t e w t e j k s i |c e i n f o r m a c j e b y By
k o m p l e t n e i r z e t e l n e . N i e b i o r j e d n a k |a d n e j o d p o w i e d z i a l n o [c i a n i z a i c h w y k o r z y s t a n i e , a n i z a z w i z a n e
z t y m e w e n t u a l n e n a r u s z e n i e p r a w p a t e n t o w y c h l u b a u t o r s k i c h . A u t o r o r a z W y d a w n i c t w o H E L I O N
n i e p o n o s z r ó w n i e | |a d n e j o d p o w i e d z i a l n o [c i z a e w e n t u a l n e s z k o d y w y n i k Be z w y k o r z y s t a n i a i n f o r m a c j i
z a w a r t y c h w k s i |c e .
W y d a w n i c t w o H E L I O N
u l . K o [c i u s z k i 1 c , 4 4 - 1 0 0 G L I W I C E
t e l . 3 2 2 3 1 2 2 1 9 , 3 2 2 3 0 9 8 6 3
e - m a i l : h e l i o n @ h e l i o n . p l
W W W : h t t p : / / h e l i o n . p l ( k s i g a r n i a i n t e r n e t o w a , k a t a l o g k s i |e k )
P l i k i z p r z y k Ba d a m i o m a w i a n y m i w k s i |c e m o |n a z n a l e z p o d a d r e s e m :
f t p : / / f t p . h e l i o n . p l / p r z y k l a d y / j q n o n i . z i p
D r o g i C z y t e l n i k u !
J e |e l i c h c e s z o c e n i t k s i |k , z a j r z y j p o d a d r e s
h t t p : / / h e l i o n . p l / u s e r / o p i n i e / j q n o n i
M o |e s z t a m w p i s a s w o j e u w a g i , s p o s t r z e |e n i a , r e c e n z j .
P r i n t e d i n P o l a n d .
" K u p k s i |k " K s i g a r n i a i n t e r n e t o w a
" P o l e k s i |k " L u b i t o ! » N a s z a s p o Be c z n o [
" O c e D k s i |k
S p i s t r e c i
W s t p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1
K t o p o w i n i e n p r z e c z y t a t k s i k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1
C o z n a j d z i e s z w t e j k s i c e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2
P o d z i k o w a n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4
K o n w e n c j e z a s t o s o w a n e w k s i c e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4
R o z d z i a 1 . Z a k o c h a s i w j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7
C o s z c z e g ó l n e g o m a w s o b i e j Q u e r y ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 8
Z g o d n o z r ó n y m i p r z e g l d a r k a m i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 8
S e l e k t o r y C S S 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9
U y t e c z n e n a r z d z i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9
j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9
W t y c z k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0
C z y s t o k o d u H T M L . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1
S z e r o k a p o p u l a r n o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1
G d z i e j e s t h a c z y k ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2
P o b i e r a n i e i i n s t a l a c j a j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3
P o b i e r a n i e j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3
G o o g l e C D N . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4
C o d z i e n n e w e r s j e r o z w o j o w e i S u b v e r s i o n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5
W e r s j a n i e s k o m p r e s o w a n a c z y s k o m p r e s o w a n a ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5
A n a t o m i a s k r y p t u j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6
A l i a s j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6
A n a l i z a w y w o a j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6
E l e m e n t y d o k u m e n t u H T M L , c z y l i D O M . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7
J e l i s i z d e c y d u j e s z & . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 9
R o z d z i a 2 . W y b i e r a n i e , d e k o r o w a n i e i r o z s z e r z a n i e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1
C z e k a m y n a z a a d o w a n i e s t r o n y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2
S e l e k t o r y s e r c e j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2
P r o s t e s e l e k t o r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 3
Z a w a n i e s e l e k c j i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 5
T e s t u j e m y s e l e k c j . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 5
F i l t r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 6
W y b i e r a n i e w i e l u e l e m e n t ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 6
J a k t w o r z y d o b r e s e l e k t o r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 7
P o l e k s i |k
K u p k s i |k
6 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
D e k o r o w a n i e o b s u g a C S S w j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 7
O d c z y t y w a n i e w a c i w o c i C S S . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 7
U s t a w i a n i e w a c i w o c i C S S . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 8
K l a s y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 0
R o z s z e r z a n i e d o d a w a n i e e f e k t ó w z a p o m o c j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2
U k r y w a n i e i w y w i e t l a n i e e l e m e n t ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2
S t o p n i o w e u d o s k o n a l a n i e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 6
D o d a w a n i e e l e m e n t ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 7
U s u w a n i e i s t n i e j c y c h e l e m e n t ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 9
M o d y f i k o w a n i e i s t n i e j c y c h e l e m e n t ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 0
P o d s t a w o w e a n i m a c j e e f e k t o w n e u k r y w a n i e i w y w i e t l a n i e . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 0
F u n k c j e z w r o t n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2
K i l k a s z t u c z e k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3
P o d w i e t l a n i e p r z y n a j e c h a n i u m y s z . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3
S o d k i e t a j e m n i c e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 4
Z a n i m p r z e j d z i e m y d a l e j . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 5
R o z d z i a 3 . A n i m a c j e , p r z e w i j a n i e i z m i a n a r o z m i a r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 7
A n i m a c j e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 7
A n i m o w a n i e w a c i w o c i C S S . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 7
A n i m a c j a k o l o r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 9
D y n a m i k a a n i m a c j i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 0
Z a a w a n s o w a n e o p c j e d y n a m i k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1
P o d s k a k u j c e p a n e l e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2
K o l e j k a a n i m a c j i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 5
a c u c h y m e t o d . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 5
Z a t r z y m y w a n i e a c u c h a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 6
A n i m o w a n a n a w i g a c j a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 7
A n i m o w a n a n a w i g a c j a , w e r s j a 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 9
B i b l i o t e k a j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1
D a j s i p o r u s z y ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3
P r z e w i j a n i e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3
Z d a r z e n i e p r z e w i j a n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3
P y w a j c a n a w i g a c j a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4
P r z e w i j a n i e d o k u m e n t u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 5
M o d y f i k a c j a p a s k a p r z e w i j a n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 7
Z m i a n a r o z m i a r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 8
Z d a r z e n i e z m i a n y r o z m i a r ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 9
E l e m e n t y o b s u g u j c e z m i a n r o z m i a r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 1
W a n i e t a k s i a n i m u j e , p r z e w i j a i z m i e n i a w y m i a r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 6
P o l e k s i |k
K u p k s i |k
S P I S T R E C I 7
R o z d z i a 4 . I l u s t r a c j e i p o k a z y s l a j d ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 7
L i g h t b o x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 7
W a s n a w e r s j a l i g h t b o k s a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 8
D i a g n o z o w a n i e s k r y p t u z a p o m o c c o n s o l e . l o g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1
C o l o r B o x w t y c z k a t y p u l i g h t b o x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2
P r z y c i n a n i e i l u s t r a c j i z a p o m o c J c r o p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 5
P o k a z y s l a j d ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 8
P o k a z y s l a j d ó w z p r z e n i k a n i e m . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 8
P r z e w i j a n e p o k a z y s l a j d ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 0 9
W i d e t g a l e r i i o b r a z ó w w s t y l u i P h o t o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 5
P e n y o b r a z . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 0
R o z d z i a 5 . M e n u , k a r t y , d y m k i i p a n e l e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 1
M e n u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 1
R o z w i j a n e m e n u p i o n o w e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 2
I k o n y s t a n u z w i n i c i a l u b r o z w i n i c i a m e n u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 6
R o z w i j a n i e m e n u p o z a t r z y m a n i u n a d n i m w s k a n i k a m y s z y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 7
R o z w i j a n e m e n u p o z i o m e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 8
M e n u a k o r d e o n o w e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 2
P r o s t y a k o r d e o n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 2
A k o r d e o n y w i e l o p o z i o m o w e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 5
A k o r d e o n w j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 7
K a r t y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 8
P r o s t a i m p l e m e n t a c j a k a r t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 8
K a r t y w j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 0
P a n e l e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 3
P o j a w i a j c y s i f o r m u l a r z l o g o w a n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 3
P a n e l w y s u w a n y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 5
D y m k i p o d p o w i e d z i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 7
P r o s t e d y m k i p o d p o w i e d z i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 8
Z a a w a n s o w a n y d y m e k p o d p o w i e d z i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 1
Z a m ó w i e n i e z m e n u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 6
R o z d z i a 6 . K o n s t r u k c j a , A J A X i i n t e r a k c j e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 7
K o n s t r u k c j a n a j l e p s z e p r a k t y k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 7
C z y s t s z e j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 8
S z a b l o n y p o s t r o n i e k l i e n t a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 2
P r o g r a m o w a n i e p o d k t e m w e r s j i p r z e g l d a r k i ( j e s t z e ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 4
P r z y s p i e s z o n y k u r s t e c h n o l o g i i A J A X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 6
C z y m j e s t A J A X ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 6
a d o w a n i e z e w n t r z n e g o k o d u H T M L . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 6
R o z s z e r z a n i e m o l i w o c i o d n o n i k ó w z a p o m o c t e c h n i k i h i j a x . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 7
P o l e k s i |k
K u p k s i |k
8 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
W y b i e r a n i e f r a g m e n t u k o d u H T M L z a p o m o c s e l e k t o r ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 8
Z a a w a n s o w a n e m e c h a n i z m y m e t o d y l o a d ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 9
P r z y g o t u j s i n a p r z y s z o l i v e o r a z d i e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 0
P o b i e r a n i e d a n y c h z a p o m o c m e t o d y $ . g e t J S O N ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 1
W y s z u k i w a r k a k o m e n t a r z y T w i t t e r a p o s t r o n i e k l i e n t a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 2
N a r z d z i a o b s u g i A J A X w j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 3
C z s t o u y w a n e u s t a w i e n i a d a A J A X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 4
a d o w a n i e z e w n t r z n y c h s k r y p t ó w $ . g e t S c r i p t ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 4
d a n i a G E T i P O S T . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 5
Z d a r z e n i a z w i z a n e z d a n i a m i A J A X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 5
I n t e r a k c j a z u y c i e m t e c h n o l o g i i A J A X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 6
G a l e r i a o b r a z ó w o p a r t a n a A J A K S I E . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 7
S o w a k l u c z o w e o b r a z ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 8 9
W o j o w n i c y n i n j a , m i s t r z o w i e t e c h n i k i A J A X ? O b e c n i ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 3
R o z d z i a 7 . F o r m u l a r z e , w i d e t y i o k n a d i a l o g o w e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 5
F o r m u l a r z e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 5
P r o s t a w a l i d a c j a f o r m u l a r z y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 6
W a l i d a c j a f o r m u l a r z y z w t y c z k V a l i d a t i o n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 9
W s k a n i k m a k s y m a l n e j d u g o c i t e k s t u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 1
W s k a z ó w k i f o r m u l a r z a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 2
Z a z n a c z e n i e p ó l o p c j i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 4
P r o g r a m o w e m o d y f i k o w a n i e w a r t o c i p ó l . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 5
A u t o u z u p e n i a n i e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 8
W i d e t o c e n y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 0
E l e m e n t y k o n t r o l n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 5
W i d e t w y b o r u d a t y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 5
S u w a k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 8
P r z e c i g n i j i u p u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 1
S o r t o w a n i e o b i e k t ó w w j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 6
P a s e k p o s t p u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 8
O k n a d i a l o g o w e i p o w i a d o m i e n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 0
P r o s t e m o d a l n e o k n o d i a l o g o w e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 0
D i a l o g z j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 3
P o w i a d o m i e n i a w s t y l u G r o w l . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 6
P o w i a d o m i e n i a 1 - u p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 8
Z m i a n a f o r m u l a r z y n a l e p s z e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 1
R o z d z i a 8 . L i s t y , d r z e w a i t a b e l e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 3
L i s t y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 3
E l e m e n t s e l e c t a b l e z j Q u e r y U I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 4
S o r t o w a n i e l i s t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 9
Z a r z d z a n i e l i s t a m i p ó l w y b o r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5 0
P o l e k s i |k
K u p k s i |k
S P I S T R E C I 9
D r z e w a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5 4
D r z e w o r o z w i j a n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5 4
D e l e g a c j a z d a r z e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5 7
T a b e l e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5 9
B l o k a d a n a g ó w k ó w t a b e l i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 5 9
P o w t a r z a n i e n a g ó w k a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6 2
S i a t k i d a n y c h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6 4
Z a z n a c z a n i e w i e r s z y t a b e l z u y c i e m p ó l o p c j i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 2
P o c z t e k l i s t y s u k c e s ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 4
R o z d z i a 9 . W t y c z k i , m o t y w y i t e c h n i k i z a a w a n s o w a n e . . . . . . . . . . . . . . . . . . . . . . . . 2 7 7
W t y c z k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 7
T w o r z e n i e w t y c z k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 8
Z a g a d n i e n i a z a a w a n s o w a n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 8 5
R o z s z e r z a n i e j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 8 5
Z d a r z e n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 9 0
I n n e s z c z e g ó o w e z a g a d n i e n i a s z k o l e n i a w o j o w n i k a n i n j a j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 0
U n i k a n i e k o n f l i k t ó w n a z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 0
K o l e j k o w a n i e a n i m a c j i i u s u w a n i e k o l e j k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 1
T r a k t o w a n i e o b i e k t ó w J a v a S c r i p t t a k j a k o b i e k t ó w j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 3
T w o r z e n i e m o t y w ó w w i z u a l n y c h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 4
U y w a n i e g a l e r i i m o t y w ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 4
D e f i n i o w a n i e w a s n e g o m o t y w u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 5
O b s u g a m o t y w ó w w e w a s n y c h k o m p o n e n t a c h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 6
S t a r T r a c k r ! e p i l o g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 8
D o d a t e k A P o d r c z n a c i g a w k a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 9
O p c j e m e t o d y $ . a j a x ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 9
F l a g i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0 9
U s t a w i e n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 0
F u n k c j e o b s u g i z d a r z e A J A X i f u n k c j e z w r o t n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 2
O p c j e $ . s u p p o r t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 2
Z d a r z e n i a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 5
W a c i w o c i z d a r z e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 5
M e t o d y z d a r z e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 5
W a s n e o b i e k t y z d a r z e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 6
D o d a t e k B S p e c y f i k a j z y k a J a v a S c r i p t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 7
K o e r c j a t y p ó w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 7
O p e r a t o r y r ó w n o c i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 8
P r a w d a i f a s z . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1 9
P o l e k s i |k
K u p k s i |k
1 0 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
D o d a t e k C Z a a w a n s o w a n e n a r z d z i a d o t w o r z e n i a w t y c z e k . . . . . . . . . . . . . . . . . . . . . . . . 3 2 1
S e l e k t o r i k o n t e k s t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2 1
S t o s j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2 2
M i n i m a l i z a c j a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2 3
S k o r o w i d z . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2 5
P o l e k s i |k
K u p k s i |k
R o z d z i a
A n i m a c j e , p r z e w i j a n i e i z m i a n a r o z m i a r u
K l i e n t j e s t n i e z w y k l e z a d o w o l o n y z p i e r w s z e j r u n d y n a s z y c h z m i a n i p o p r a w e k i c h c e p ó j [ j e s z -
c z e d a l e j . J e g o f i r m a w s p ó Bp r a c u j e z p r z e m y s Be m r o z r y w k o w y m i , j e g o z d a n i e m , s t r o n a W W W
p o w i n n a o d z w i e r c i e d l a e k s c y t u j c i d y n a m i c z n n a t u r t e j g a Bz i p r z e m y s Bu . W i e r z y t e |, |e a t r a k -
c y j n e a n i m a c j e p o m o g z w i k s z y s p r z e d a |.
S d z , |e p o t r z e b u j e m y c z e g o [ z g o d n e g o z W e b 2 . 0 , o k t ó r y m w i e l e s By s z a Be m . C z y m o |e c i e c o [
z r o b i , |e b y s t r o n a b a r d z i e j k o j a r z y Ba s i z W e b 2 . 0 ? .
R z e c z y w i [c i e , m o |e m y . K l i e n t w r c z a n a m k o l e j n l i s t s u g e r o w a n y c h p o p r a w e k , p e Bn e k s c y t u -
j c y c h z m i a n . T a l i s t a p o m o |e n a m w y j [ p o z a p r o s t e z a d a n i a p o l e g a j c e n a u k r y w a n i u i w y [w i e -
t l a n i u e l e m e n t ó w i p r z y b l i |y n a s d o s t a t u s u w o j o w n i k a n i n j a j Q u e r y .
A n i m a c j e
B i b l i o t e k a j Q u e r y p o w s t a Ba w Ba [n i e p o t o , |e b y t w o r z y a n i m a c j e . S t o p n i o w e z a n i k a n i e k o m u n i -
k a t u o b Bd z i e p o n i e u d a n y m l o g o w a n i u , r o z w i j a n i e m e n u c z y n a w e t w i z u a l n e p r z e w i j a n i e s t r o n
t r e [c i p r z y p o m i n a j c e p r z e k Ba d a n i e k a r t k s i |k i l u b g r y p o l e g a j c e n a s t r z e l a n i u d o k o s m i t ó w :
w s z y s t k i e t e z a d a n i a s Ba t w e d o r e a l i z a c j i d z i k i w b u d o w a n y m m e t o d o m , w s p o m a g a n y m n i e z l i -
c z o n r z e s z w t y c z e k .
A n i m o w a n i e w a c i w o c i C S S
D o t e j p o r y p o z n a l i [m y p e w n e i s t o t n e p o d s t a w y a n i m a c j i w j Q u e r y : w s u w a n i e , z a n i k a n i e i e f e k -
t o w n e u k r y w a n i e o r a z w y [w i e t l a n i e e l e m e n t ó w . N i e m i e l i [m y j e d n a k w i k s z e j k o n t r o l i n a d t y m ,
c o j e s t a n i m o w a n e i w j a k i s p o s ó b . N a d s z e d B c z a s n a w p r o w a d z e n i e b a r d z o w a |n e j m e t o d y j Q u e r y ,
n a z w a n e j a n i m a t e ( ) , k t ó r a p o z w a l a n a z a s t o s o w a n i e a n i m a c j i d o w i e l u w Ba [c i w o [c i C S S , u m o |l i -
w i a j c t w o r z e n i e n i e s a m o w i t y c h e f e k t ó w n a s t r o n a c h W W W . P r z y j r z y j m y s i p r a k t y c z n e m u
p r z y k Ba d o w i z a s t o s o w a n i a t e j m e t o d y :
P o l e k s i |k
K u p k s i |k
5 8 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
r o z d z i a l _ 0 3 / 0 1 _ a n i m a t i n g _ c s s / s c r i p t . j s ( f r a g m e n t )
$ ( ' p ' ) . a n i m a t e ( {
p a d d i n g : ' 2 0 p x ' ,
b o r d e r B o t t o m : ' 3 p x s o l i d # 8 f 8 f 8 f ' ,
b o r d e r R i g h t : ' 3 p x s o l i d # b f b f b f '
} , 2 0 0 0 ) ;
P o w y |s z y k o d r e a l i z u j e a n i m a c j n a w s z y s t k i c h a k a p i t a c h s t r o n y , z m i e n i a j c a t r y b u t p a d d i n g z d o -
m y [l n e j w a r t o [c i d o 2 0 p x o r a z d o d a j c r a m k u g ó r y i p o p r a w e j s t r o n i e . A n i m a c j a b d z i e w y k o -
n y w a Ba s i p r z e z d w i e s e k u n d y ( 2 0 0 0 m i l i s e k u n d ) .
W c e l u z a s t o s o w a n i a m e t o d y a n i m a t e ( ) p r z e k a z u j e m y l i t e r a B o b i e k t u o k r e [l a j c y w Ba [c i w o [c i ,
k t ó r e m a j b y a n i m o w a n e . W Ba [c i w o [c i s o k r e [l a n e j a k o p a r y k l u c z : w a r t o w t a k i s a m s p o s ó b
j a k w m e t o d z i e c s s ( ) . N a l e |y j e d n a k p a m i t a o j e d n e j i s t o t n e j z a s a d z i e : z a m i a s t m a r g i n - l e f t n a l e |y
z a s t o s o w a n a z w m a r g i n L e f t , a z a m i a s t b a c k g r o u n d - c o l o r n a z w b a c k g r o u n d C o l o r , c z y l i n i e w o l n o
u |y w a n a z w w Ba [c i w o [c i z Bc z n i k i e m , a n a l e |y s t o s o w a k o n w e n c j n a z w c a m e l C a s e . K a |d a n a z w a
w Ba [c i w o [c i C S S z a w i e r a j c a Bc z n i k m u s i b y z m o d y f i k o w a n a w t e n s p o s ó b 1 .
P a r a m e t r c z a s u a n i m a c j i d z i a Ba t a k s a m o j a k w p r z y p a d k u a n i m a c j i , k t ó r e t w o r z y l i [m y w r o z -
d z i a l e 2 . : m o |n a p r z e k a z a l i c z b o k r e [l a j c c z a s w m i l i s e k u n d a c h l u b s Bo w n e o k r e [l e n i e c z a s u
t r w a n i a : s l o w , f a s t , n o r m a l . W a r t o [c i w Ba [c i w o [c i w y m i a r o w y c h C S S m o g b y p o d a n e w p i k s e l a c h ,
j e d n o s t c e e m , p r o c e n t a c h l u b p u n k t a c h , n a p r z y k Ba d m o |n a n a p i s a 1 0 0 p x , 1 0 e m , 5 0 % l u b 1 6 p t .
U |y t e w a r t o [c i m o g t e | b y w z g l d n e w s t o s u n k u d o a k t u a l n y c h : w y s t a r c z y p r z e d w a r t o [c i
u |y z n a k ó w + = l u b - = , c o s p o w o d u j e , |e z o s t a n i e o n a o d p o w i e d n i o z w i k s z o n a o d o d a n w a r t o [
l u b o n i z m n i e j s z o n a . U |y j e m y t y c h m o |l i w o [c i d o t e g o , a b y p o z y c j e w m e n u n a w i g a c y j n y m p o -
r u s z a By s i , g d y n a j e d z i e m y n a n i e w s k a zn i k i e m m y s z y , c z y l i m u s i m y z a s t o s o w a m e t o d o b s Bu g i
z d a r z e n i a h o v e r ( ) :
r o z d z i a l _ 0 3 / 0 2 _ r e l a t i v e _ c s s _ a n i m a t i o n / s c r i p t . j s ( f r a g m e n t )
$ ( ' # n a v i g a t i o n l i ' ) . h o v e r ( f u n c t i o n ( ) {
$ ( t h i s ) . a n i m a t e ( { p a d d i n g L e f t : ' + = 1 5 p x ' } , 2 0 0 ) ;
} , f u n c t i o n ( ) {
$ ( t h i s ) . a n i m a t e ( { p a d d i n g L e f t : ' - = 1 5 p x ' } , 2 0 0 ) ;
} ) ;
P o n a j e c h a n i u w s k a zn i k i e m m y s z y n a p o z y c j w m e n u o d s u n i e s i o n a p By n n i e w p r a w s t r o n .
M e t o d y a n i m a t e m o |n a u |y d o u z y s k a n i a p r e c y z y j n e j k o n t r o l i n a d w y [w i e t l a n i e m , u k r y w a n i e m
i f u n k c j a m i p r z e Bc z a n i a w i d o c z n o [c i e l e m e n t ó w , k t ó r e p o z n a l i [m y w r o z d z i a l e 2 . W y s t a r c z y d l a o d -
p o w i e d n i e j w Ba [c i w o [c i C S S z a s t o s o w a w a r t o [ s h o w , h i d e l u b t o g g l e z a m i a s t w a r t o [c i l i c z b o w e j :
1
I n n y s p o s ó b r o z w i z a n i a t e g o p r o b l e m u p o l e g a n a u j c i u w c u d z y s Bo w y n a z w k l u c z y z a w i e r a j c y c h n i e d o -
z w o l o n e z n a k i p r z y p . t Bu m .
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 5 9
r o z d z i a l _ 0 3 / 0 3 _ a n i m a t e _ s h o w _ h i d e ( f r a g m e n t )
$ ( ' # d i s c l a i m e r ' ) . a n i m a t e ( {
o p a c i t y : ' h i d e ' ,
h e i g h t : ' h i d e '
} , ' s l o w ' ) ;
O b s e r w o w a n i e a n i m a c j i e l e m e n t ó w t o n i e z w y k l e s a t y s f a k c j o n u j c y w y n i k p r a c y p r o g r a m i s t y .
W r a m a c h w i c z e n i a p o b a w s i a n i m o w a n i e m r ó |n y c h a t r y b u t ó w C S S i s p r ó b u j u z y s k a c i e k a w e
i u n i k a l n e e f e k t y . M e t o d a a n i m a t e ( ) o b s Bu g u j e w i c e j o p c j i , w i e l e z n i c h s Bu |y d o z a a w a n s o w a n e j
k o n t r o l i p a r a m e t r ó w a n i m a c j i . O m ó w i m y j e s z c z e g ó Bo w o w d a l s z e j c z [c i r o z d z i a Bu .
A n i m a c j a k o l o r u
G d y j u | p r z e k o n a s z s i , j a k w i e l e f r a j d y d a j e m e t o d a a n i m a t e ( ) , z a p e w n e z e c h c e s z a n i m o w a k o -
l o r . J e d n a k t a o p e r a c j a j e s t n i e c o b a r d z i e j s k o m p l i k o w a n a , p o n i e w a | p o [r e d n i e w a r t o [c i k o l o r u ,
m i d z y p o c z t k o w y m a k o Dc o w y m p u n k t e m a n i m a c j i , m u s z b y w y l i c z a n e w s p e c j a l n y s p o s ó b .
W p r z e c i w i e Ds t w i e d o w y s o k o [c i c z y s z e r o k o [c i e l e m e n t u , k t ó r e z m i e n i a j s i w p r o s t y , l i n i o w y
s p o s ó b , d o w y l i c z e n i a k o l o r u j Q u e r y p o t r z e b u j e d o d a t k o w y c h o b l i c z e D, a b y u p e w n i s i , |e b a r w a
z n a j d u j e s i , p o w i e d z m y , w t r z e c h c z w a r t y c h o d l e g Bo [c i m i d z y n i e b i e s k i m a p o m a r a Dc z o w y m .
T e n m e c h a n i z m w y l i c z a n i a k o l o r u z o s t a B p o m i n i t y w p o d s t a w o w e j b i b l i o t e c e . T a k a d e c y z j a m a
s e n s , j e [l i s i g Bb i e j z a s t a n o w i : w w i k s z o [c i z a s t o s o w a D m e c h a n i k a a n i m a c j i k o l o r u n i e j e s t n i e -
z b d n a , d z i k i c z e m u p l i k p o d s t a w o w e j b i b l i o t e k i m o |e z a c h o w a r o z s d n e r o z m i a r y . J e [l i k t o [
c h c e a n i m o w a k o l o r y , p o t r z e b n a m u j e s t w t y c z k a C o l o r A n i m a t i o n s 2 .
U y c i e w t y c z e k
O f i c j a l n e r e p o z y t o r i u m w t y c z e k p r o j e k t u j Q u e r y 3 z a w i e r a s p o r y z b i ó r w t y c z e k , k t ó r y s t a l e s i r o z r a s t a . N i e -
k t ó r e z n i c h s b a r d z o u y t e c z n e , i n n e m n i e j . W t y c z k i m o n a w y s z u k i w a p o n a z w i e , k a t e g o r i i ( j a k e f e k t y c z y
n a r z d z i a ) a l b o p o o c e n i e p r z y z n a n e j p r z e z s p o e c z n o u y t k o w n i k ó w j Q u e r y .
G d y j u z n a j d z i e s z i n t e r e s u j c C i w t y c z k , p o b i e r z j d o o d p o w i e d n i e g o m i e j s c a w s w o i m p r o j e k c i e
( n a j c z c i e j b d z i e t o t e n s a m k a t a l o g , w k t ó r y m z a p i s a e p l i k b i b l i o t e k i j Q u e r y ) . W a r t o p r z e c z y t a p l i k
r e a d m e l u b o d p o w i e d n i d o k u m e n t a c j n a s t r o n i e W W W , a l e n a j c z c i e j w t y c z k w y s t a r c z y o p r o s t u
z a i m p o r t o w a w d o k u m e n c i e H T M L w t e n s a m s p o s ó b j a k i n n e b i b l i o t e k i j z y k a J a v a S c r i p t .
W j a k i s p o s ó b k o r z y s t a z w t y c z k i , t o j u z a g a d n i e n i e s p e c y f i c z n e d l a k a d e j z n i c h . W t y m p r z y p a d k u n i e
u n i k n i e s i k o n i e c z n o c i z a p o z n a n i a z d o k u m e n t a c j .
P o p o b r a n i u i z a i m p o r t o w a n i u w t y c z k i C o l o r A n i m a t i o n s m o |n a a n i m o w a k o l o r y z a p o m o c
m e t o d y a n i m a t e ( ) t a k s a m o j a k i n n e w Ba [c i w o [c i C S S . S p r ó b u j m y z m i e n i k o l o r n o t k i p r a w n e j
p r z e z o k r e s d w ó c h s e k u n d , |e b y z w r ó c i n a n i u w a g u |y t k o w n i k ó w s t r o n y .
2
h t t p : / / p l u g i n s . j q u e r y . c o m / p r o j e c t / c o l o r
3
h t t p : / / p l u g i n s . j q u e r y . c o m /
P o l e k s i |k
K u p k s i |k
6 0 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
r o z d z i a l _ 0 3 / 0 4 _ c o l o r _ a n i m a t i o n ( f r a g m e n t )
$ ( ' # d i s c l a i m e r ' ) . a n i m a t e ( { ' b a c k g r o u n d C o l o r ' : ' # f f 9 f 5 f ' } , 2 0 0 0 ) ;
D z i k i t e j t e c h n i c e n o t k a p r a w n a j e s t z n a c z n i e l e p i e j w i d o c z n a .
D y n a m i k a a n i m a c j i
D y n a m i k a a n i m a c j i ( a n g . e a s i n g ) o k r e [l a s p o s ó b , w j a k i p r d k o [ a n i m a c j i z m i e n i a s i w c z a s i e .
D y n a m i k a a n i m a c j i j e s t z d e f i n i o w a n a z a p o m o c a l g o r y t m u m a t e m a t y c z n e g o i p o z w a l a z m i e n i a
p r d k o [ w t r a k c i e t r w a n i a a n i m a c j i . D z i k i t e m u , |e k o r z y s t a m y z j Q u e r y , m o |e m y o d Bo |y n a i n n
o k a z j k o n i e c z n o [ o d k u r z e n i a w i a d o m o [c i z z a k r e s u r ó w n a D m a t e m a t y c z n y c h .
S t a n d a r d o w a b i b l i o t e k a j Q u e r y o f e r u j e d w i e o p c j e d y n a m i k i a n i m a c j i : l i n e a r i s w i n g . K a |d e w y -
w o Ba n i e m e t o d y a n i m a t e ( ) p o z w a l a n a u |y c i e j e d n e j z t y c h d w ó c h o p c j i k o n t r o l i d y n a m i k i . R ó |n i c
m i d z y n i m i m o |n a z o b a c z y w f o r m i e w y k r e s ó w n a r y s u n k u 3 . 1 . W y k r e s p r e z e n t u j e s p o s ó b , w j a k i
p r d k o [ a n i m a c j i z m i e n i a s i w c z a s i e d l a k a |d e j z t y c h o p c j i .
R y s u n e k 3 . 1 . S t a n d a r d o w e o p c j e d y n a m i k i a n i m a c j i w j Q u e r y
D y n a m i k a t y p u s w i n g p o l e g a n a p o w o l n y m r o z p o c z c i u , n a s t p n i e p r d k o [ z n a c z n i e s i z w i k -
s z a , a p r z y k o Dc u z n ó w s p a d a . W i z u a l n i e d y n a m i k a t y p u s w i n g w y g l d a z n a c z n i e n a t u r a l n i e j
w p o r ó w n a n i u z d y n a m i k l i n i o w , d l a t e g o j Q u e r y s t o s u j e j d o m y [l n i e w m e t o d z i e a n i m a t e ( ) ,
j e [l i d y n a m i k a n i e z o s t a n i e o k r e [l o n a w s p o s ó b j a w n y .
D y n a m i k a l i n i o w a ( o p c j a l i n e a r ) n i e w y k o r z y s t u j e p r z y s p i e s z a n i a a n i s p o w a l n i a n i a , a n i m a c j e o d b y -
w a j s i z e s t a B p r d k o [c i . T a k i e a n i m a c j e w w i k s z o [c i p r z y p a d k ó w w y g l d a j d o [ n u d n o i s z t y w -
n o , a l e w a r t o w y p r ó b o w a t o p c j , m o |e o k a z a s i u |y t e c z n a w s p e c y f i c z n y c h z a s t o s o w a n i a c h .
W r a m a c h p r z y k Ba d u d o d a m y a n i m a c j w e f e k c i e k l i k n i c i a p i e r w s z e g o a k a p i t u n a n a s z e j s t r o n i e
W W W : p o p i e r w s z y m k l i k n i c i u p o w i k s z y m y j e g o w y s o k o [, w y k o r z y s t u j c d y n a m i k l i n i o w ,
a p o d r u g i m z m n i e j s z y m y j d o o r y g i n a l n y c h r o z m i a r ó w , s t o s u j c d y n a m i k t y p u s w i n g . R ó |n i c a
j e s t d o [ s u b t e l n a , a l e j e [l i p o w t ó r z y s z a n i m a c j k i l k a r a z y , Ba t w o j z a u w a |y s z . A n i m a c j a z m n i e j -
s z a n i a w y s o k o [c i w y d a j e s i b a r d z i e j n a t u r a l n a .
r o z d z i a l _ 0 3 / 0 5 _ e a s i n g / s c r i p t . j s ( f r a g m e n t )
$ ( ' p : f i r s t ' ) . t o g g l e ( f u n c t i o n ( ) {
$ ( t h i s ) . a n i m a t e ( { ' h e i g h t ' : ' + = 1 5 0 p x ' } , 1 0 0 0 , ' l i n e a r ' ) ;
} , f u n c t i o n ( ) {
$ ( t h i s ) . a n i m a t e ( { ' h e i g h t ' : ' - = 1 5 0 p x ' } , 1 0 0 0 , ' s w i n g ' ) ;
} ) ;
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 6 1
W p o w y |s z y m l i s t i n g u z n a j d z i e m y s p o r o s z c z e g ó Bó w s p e c y f i c z n y c h d l a j Q u e r y , w a r t o z a t e m n a
c h w i l s i z a t r z y m a , |e b y p r z e a n a l i z o w a t e n k o d i z r o z u m i e , c o s i d z i e j e :
z a p o m o c m e t o d y f i l t e r ( ) s e l e k t o r a w y b i e r a m y t y l k o p i e r w s z y a k a p i t ,
d o w y b r a n e g o a k a p i t u p o d p i n a n a j e s t m e t o d a o b s Bu g i z d a r z e n i a t o g g l e ( ) ( k t ó r a j e s t w y -
w o By w a n a p r z y k o l e j n y c h k l i k n i c i a c h ) ,
w k a |d e j f u n k c j i o b s Bu g i z d a r z e n i a w y b i e r a m y o b i e k t t h i s , o d w o Bu j c y s i d o e l e m e n t u ,
n a k t ó r y m z o s t a Bo o d p a l o n e z d a r z e n i e ( c z y l i d o k l i k n i t e g o a k a p i t u ) ,
p i e r w s z a f u n k c j a o b s Bu g i z d a r z e n i a w y k o r z y s t u j e f o r m a t + = , p o w o d u j c y z w i k s z e n i e w y -
s o k o [c i a k a p i t u o 1 5 0 p i k s e l i , w y k o r z y s t u j c a n i m a c j z d y n a m i k l i n i o w ,
d r u g a f u n k c j a o b s Bu g i z d a r z e n i a w y k o r z y s t u j e f o r m a t - = , p o w o d u j c y z m n i e j s z e n i e w y s o -
k o [c i a k a p i t u o 1 5 0 p i k s e l i , w y k o r z y s t u j c a n i m a c j z d y n a m i k t y p u s w i n g .
J e [l i z r o z u m i a Be [ t e n p r z y k Ba d , n a l e | C i s i g r a t u l a c j e ! N a p r a w d Ba p i e s z , o c o c h o d z i w j Q u e r y !
Z a a w a n s o w a n e o p c j e d y n a m i k i
J a k w s p o m n i e l i [m y , d y n a m i k a a n i m a c j i t y p u s w i n g d a j e z n a c z n i e p r z y j e m n i e j s z y e f e k t , p r a w d o -
p o d o b n i e o d p o w i e d n i d l a w i k s z o [c i z a s t o s o w a D. J e d n a k s w i n g i l i n e a r t o j e d y n i e w i e r z c h o Be k
g ó r y l o d o w e j , j e [l i c h o d z i o m o |l i w o [c i w t y m z a k r e s i e . D o d y s p o z y c j i m a m y z n a c z n i e w i c e j t y p ó w
d y n a m i k i . W i k s z o [ z n i c h j e s t z d e f i n i o w a n a w e w t y c z c e E a s i n g 4 , d o s t p n e j w r e p o z y t o r i u m
w t y c z e k j Q u e r y .
W t y c z k i w c h o d z c e w s k a d j Q u e r y U I
B i b l i o t e k a E a s i n g j e s t r ó w n i e d o s t p n a w s e k c j i e f e k t ó w b i b l i o t e k i j Q u e r y U I , k t ó r b d z i e m y o m a w i a
n i e b a w e m . J e l i z a c z y n a C i m c z y d u a l i c z b a w t y c z e k , z a j r z y j d o p u n k t u B i b l i o t e k a j Q u e r y U I w d a l -
s z e j c z c i r o z d z i a u . T a b i b l i o t e k a g r o m a d z i d u l i c z b p o p u l a r n y c h w t y c z e k , m i d z y i n n y m i d o o b s u g i
a n i m a c j i k o l o r ó w , p r z e k s z t a c e m i d z y k l a s a m i i d y n a m i k i a n i m a c j i . W y s t a r c z y z a a d o w a j e d n b i b l i o t e k
j Q u e r y U I , n i e t r z e b a i m p o r t o w a k a d e j z t y c h w t y c z e k z o s o b n a .
W y s t a r c z y p o b r a p l i k J a v a S c r i p t z k o d e m w t y c z k i i z a Ba d o w a g o w p l i k u H T M L z a i m p o r t e m
b i b l i o t e k i j Q u e r y . W t y c z k a E a s i n g n i e o f e r u j e n o w y c h m e t o d , z a m i a s t t e g o m a m y d o d y s p o z y c j i
o k o Bo 3 0 o p c j i d y n a m i k i a n i m a c j i . W y j a [n i a n i e z a s a d d z i a Ba n i a k a |d e j z n i c h b y Bo b y d o s k o n a By m
t e s t e m d l a w y o b r a zn i n a j l e p s z y c h p i s a r z y , z a m i a s t t e g o p r o p o n u j e m y j e d n a k z a p o z n a s i z r y -
s u n k i e m 3 . 2 , k t ó r y w y j a [n i a a l g o r y t m y d z i a Ba n i a k i l k u z o p c j i w s p o s ó b g r a f i c z n y .
M o |n a z a u w a |y , |e n i e k t ó r e a l g o r y t m y w y c h o d z p o z a w y k r e s . W t a k i m p r z y p a d k u a n i m o w a n y
o b i e k t p r z e c h o d z i z a p u n k t z a t r z y m a n i a , |e b y p o c h w i l i w r ó c i d o n i e g o i t a m s i z a t r z y m a .
E f e k t w y g l d a p o d o b n i e d o z a b a w k i z a c z e p i o n e j n a g u m c e , k t ó r a d e l i k a t n i e s p r |y n u j c , p r z y c i -
g a j n a s w o j e m i e j s c e .
4
h t t p : / / p l u g i n s . j q u e r y . c o m / p r o j e c t / E a s i n g
P o l e k s i |k
K u p k s i |k
6 2 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
R y s u n e k 3 . 2 . Z a a w a n s o w a n e o p c j e d y n a m i k i a n i m a c j i
D o d a t k o w y c h a l g o r y t m ó w d y n a m i k i a n i m a c j i u |y w a s i t a k s a m o j a k d o s t p n y c h s t a n d a r d o w o :
w y s t a r c z y p o d a i c h i d e n t y f i k a t o r w p a r a m e t r z e m e t o d y a n i m a t e ( ) . M a m y s p o r y w y b ó r , w a r t o
w i c w y p r ó b o w a c h o b y k i l k a z n i c h , |e b y n a b r a w y o b r a |e n i a o i c h d z i a Ba n i u :
r o z d z i a l _ 0 3 / 0 6 _ o t h e r _ e a s i n g _ o p t i o n s / s c r i p t . j s ( f r a g m e n t )
$ ( ' p : f i r s t ' ) . a n i m a t e ( { h e i g h t : ' + = 3 0 0 p x ' } , 2 0 0 0 , ' e a s e O u t B o u n c e ' ) ;
$ ( ' p : f i r s t ' ) . a n i m a t e ( { h e i g h t : ' - = 3 0 0 p x ' } , 2 0 0 0 , ' e a s e I n O u t E x p o ' ) ;
$ ( ' p : f i r s t ' ) . a n i m a t e ( { h e i g h t : ' h i d e ' } , 2 0 0 0 , ' e a s e O u t C i r c ' ) ;
$ ( ' p : f i r s t ' ) . a n i m a t e ( { h e i g h t : ' s h o w ' } , 2 0 0 0 , ' e a s e O u t E l a s t i c ' ) ;
T y l k o p o p a t r z , j a k s k a c z e t e n a k a p i t ! Z a p e w n e z a s t a n a w i a s z s i , s k d w z i By s i n a z w y o p c j i d y -
n a m i k i a n i m a c j i , a l b o c h c e s z p o z n a i c h p e Bn l i s t . T w ó r c a l g o r y t m ó w j e s t R o b e r t P e n n e r , k t ó -
r y a l g o r y t m y d y n a m i k i a n i m a c j i z d e f i n i o w a B w f o r m i e f o r m u B m a t e m a t y c z n y c h i u m i e [c i B n a
s w o j e j s t r o n i e W W W 5 .
N a j l e p s z y m s p o s o b e m n a z a p o z n a n i e s i z f o r m u Ba m i s t o j c y m i z a k a |d z o p c j i d y n a m i k i j e s t
a n a l i z a k o d u zr ó d Bo w e g o w t y c z k i E a s i n g .
C z a s n a z a b a w
Z r ó b s o b i e p r z e r w i p r z e t e s t u j o p c j e d y n a m i k i a n i m a c j i z d e f i n i o w a n e p r z e z w t y c z k . I s t n i e j e n i e w i e l k a
s z a n s a , e b d z i e s z k i e d y k o l w i e k w s t a n i e u y w s z y s t k i c h , a l e i c h z n a j o m o p o z w o l i d o k o n a w i a d o -
m e g o w y b o r u t e j z n i c h , k t ó r a n a j l e p i e j o d p o w i a d a T w o i m o c z e k i w a n i o m . P o z a t y m z a b a w a z f u n k c j a m i
p o m a g a u t r w a l i i c h z n a j o m o , c o j e s t b a r d z o w a n b r o n i w r k a c h w o j o w n i k a n i n j a j Q u e r y !
P o d s k a k u j c e p a n e l e
D o w i e d z i e l i [m y s i n i e c o n a t e m a t m e t o d y a n i m a t e ( ) , z a j r z y j m y w i c d o n a j n o w s z e j l i s t y z m i a n
z g Bo s z o n y c h p r z e z k l i e n t a . D z i s i e j s z a l i s t a d o t y c z y n i e z w y k l e i s t o t n e j n o w o [c i w s e r w i s i e S t a r -
T r a c k r ! c h o d z i o c o d z i e n n i e m o d y f i k o w a n l i s t c e l e b r y t ó w p o d n a z w K t o j e s t w t e j c h w i l i n a t o -
p i e ? ( w s k r ó c i e K J W T C N T ) . T a l i s t a m a z a w i e r a i n f o r m a c j e o c e l e b r y t a c h , o k t ó r y c h z j a k i c h [
5
h t t p : / / w w w . r o b e r t p e n n e r . c o m / e a s i n g /
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 6 3
p o w o d ó w ( p o z y t y w n y c h l u b n e g a t y w n y c h ) n a g l e z r o b i Bo s i g Bo [n o , w r a z z i c h z d j c i e m i k r ó t k
i n f o r m a c j b i o g r a f i c z n . L i s t z a i m p l e m e n t u j e m y z a p o m o c a n i m a c j i i t e c h n i k d e f i n i o w a n i a d y -
n a m i k i w p o s t a c i r u c h o m y c h p a n e l i , k t ó r e m o g b y n i e z a l e |n i e o t w i e r a n e l u b z a m y k a n e .
W y g l d t e g o w i d |e t u p r z e d s t a w i a r y s u n e k 3 . 3 .
R y s u n e k 3 . 3 . P a n e l e i n f o r m a c j i o c e l e b r y t a c h
W n a s z y m H T M L - u t e n e l e m e n t s t r o n y z a i m p l e m e n t u j e m y w p o s t a c i o b i e k t u d i v z a w i e r a j c e g o
i n f o r m a c j e o w s z y s t k i c h c e l e b r y t a c h . K a |d y p a n e l b d z i e s k Ba d a B s i z n a g Bó w k a h 3 , p o k t ó r y m
w y s t p i k o l e j n y o b i e k t d i v z a w i e r a j c y z d j c i e i k r ó t k i a k a p i t :
r o z d z i a l _ 0 3 / 0 7 _ b o u n c y _ c o n t e n t _ p a n e s / i n d e x . h t m l ( f r a g m e n t )
< d i v i d = " b i o " >
< h 2 > K t o j e s t w t e j c h w i l i n a t o p i e ? < / h 2 >
< h 3 > S t a s z e k a d n y < / h 3 >
< d i v >
< i m g s r c = " . . / . . / i m a g e s / b e a u _ 1 0 0 . j p g " w i d t h = " 1 0 0 " h e i g h t = " 1 0 0 " / >
< p > N o t k a o S t a s z k u < / p >
< / d i v >
< h 3 > J u r e k C o < / h 3 >
< d i v >
< i m g s r c = " . . / . . / i m a g e s / j o h n n y _ 1 0 0 . j p g " w i d t h = " 1 0 0 " h e i g h t = " 1 0 0 " / >
< p > N o t k a o J u r k u < / p >
< / d i v >
< h 3 > B u b a t r o n i k < / h 3 >
< d i v >
< i m g s r c = " . . / . . / i m a g e s / g l e n d a _ 1 0 0 . j p g " w i d t h = " 1 0 0 " h e i g h t = " 1 0 0 " / >
< p > N o t k a o B u b a t r o n i k < / p >
< / d i v >
< / d i v >
G d y u |y t k o w n i k k l i k a j e d e n z n a g Bó w k ó w , p a n e l r o z w i j a s i l u b z w i j a , z a l e |n i e o d s t a n u . P a n e l e
m o |n a d o w o l n i e s t y l i z o w a , a l e n a j c z [c i e j s t o s o w a n a t e c h n i k a p o l e g a n a u z y s k a n i u n a g Bó w k a
o w y r ó |n i a j c y m s i k o l o r z e t Ba , c o j a s n o s u g e r u j e , |e t o j e s t e l e m e n t , k t ó r y m o |n a k l i k n .
P o l e k s i |k
K u p k s i |k
6 4 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
S k a c z c a a n i m a c j a
W a r t o m i e w i a d o m o j e d n e g o s z c z e g ó u z w i z a n e g o z a n i m o w a n i e m o b i e k t ó w : g d y a n i m o w a n y o b i e k t
z n a j d u j e s i b l i s k o n a g ó w k a , a n i m a c j a s z a r p i e , c o j e s t s z c z e g ó l n i e w i d o c z n e p r z y u k r y w a n i u . D z i e j e s i
t a k d l a t e g o , e m a r g i n e s n a g ó w k a j e s t u s u w a n y p o u k r y c i u o b i e k t u l e c e g o b e z p o r e d n i o z a n i m . P r o s t e
o b e j c i e t e g o p r o b l e m u p o l e g a n a u s t a w i e n i u m a r g i n e s ó w n a g ó w k a n a z e r o .
C h c e m y u n i k n w y [w i e t l a n i a p a n e l i p r z y Ba d o w a n i u s t r o n y , w i c w p i e r w s z y m k r o k u u k r y j e m y
w s z y s t k i e o b i e k t y z a w i e r a j c e t r e [:
r o z d z i a l _ 0 3 / 0 7 _ b o u n c y _ c o n t e n t _ p a n e s / s c r i p t . j s ( f r a g m e n t )
$ ( ' # b i o > d i v ' ) . h i d e ( ) ;
J e [l i j e d n a k c h c e m y , |e b y k t ó r y [ z p a n e l i b y B d o m y [l n i e w y [w i e t l o n y , m o |e m y t o o k r e [l i w t y m
m i e j s c u . T o u [w i a d o m i u |y t k o w n i k o m , |e p o d n a g Bó w k a m i i s t n i e j u k r y t e p a n e l e , w i c w a r t o j e k l i k -
n . I m p l e m e n t a c j a t e g o w j Q u e r y t o p r o s t e z a d a n i e : w y k o r z y s t u j e m y f i l t r : f i r s t , z a p o m o c k t ó r e g o
w y b i e r a m y p i e r w s z y p a n e l , p o c z y m g o w y [w i e t l a m y .
$ ( ' # b i o > d i v : f i r s t ' ) . s h o w ( ) ;
S e l e k t o r p o t o m k ó w
W p o w y s z y m p r z y k a d z i e z a s t o s o w a l i m y n o w y s e l e k t o r , o k t ó r y m w a r t o p o w i e d z i e n i e c o w i c e j . J e s t
t o s e l e k t o r p o t o m k ó w , w y k o r z y s t u j c y z n a k w i k s z o c i ( > ) . S e l e k t o r p o t o m k ó w w y b i e r a e l e m e n t n a d -
r z d n y ( l e w a s t r o n a z n a k u > ) , a n a s t p n i e j e g o e l e m e n t y p o d r z d n e ( j e d e n p o z i o m w d ó ) d o p a s o w a n e
d o p o d s e l e k t o r a ( p o p r a w e j s t r o n i e z n a k u > ) . J e l i p o m i n i e m y s e l e k t o r p o t o m k a ( z n a k > ) , t e n k o d w y b i e r z e
w s z y s t k i e e l e m e n t y d i v z n a j d u j c e s i w e l e m e n c i e o i d r ó w n y m b i o , n a w e t j e l i z n a j d s i n a i n n y m
p o z i o m i e z a g n i e d e n i a . W i c e j n a t e m a t t e g o s e l e k t o r a m o n a z n a l e w d o k u m e n t a c j i j Q u e r y 6 .
N a s z d o k u m e n t z a w i e r a j u | n i e z b d n y k o d H T M L , w y s t a r c z y w i c d o d a t r o c h k o d u j Q u e r y d o
o b s Bu g i i n t e r a k c j i . U j a w n i e n i e u k r y t e j t r e [c i w y m a g a o b s Bu g i z d a r z e n i a c l i c k , o d s z u k a n i a n a s t p -
n e g o e l e m e n t u ( w k t ó r y m z n a j d u j e s i t r e [) i w y [w i e t l e n i a g o , c o j u | r o b i l i [m y w r o z d z i a l e 2 .
T y m r a z e m j e d n a k z a s t o s u j e m y d y n a m i k a n i m a c j i t y p u b o u n c e , c o s p o w o d u j e , |e p a n e l e b d s i
z a c h o w y w a j a k u p a d a j c a p i Bk a , k t ó r a c h w i l p o d s k a k u j e , z a n i m s i z a t r z y m a :
r o z d z i a l _ 0 3 / 0 7 _ b o u n c y _ c o n t e n t _ p a n e s / s c r i p t . j s ( f r a g m e n t )
$ ( ' # b i o h 3 ' ) . c l i c k ( f u n c t i o n ( ) {
$ ( t h i s ) . n e x t ( ) . a n i m a t e (
{ ' h e i g h t ' : ' t o g g l e ' } , ' s l o w ' , ' e a s e O u t B o u n c e '
) ;
} ) ;
D o s k o n a l e s p r a w d z a j c y s i w t y m p r z y p a d k u e f e k t p o d s k a k u j c e j p i Bk i r e a l i z u j e o p c j a d y n a m i k i
e a s e O u t B o u n c e . K o n i e c z n i e s p r a w d z j e g o d z i a Ba n i e w p r z e g l d a r c e .
6
h t t p : / / d o c s . j q u e r y . c o m / S e l e c t o r s / c h i l d
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 6 5
K o l e j k a a n i m a c j i
K o l e j n y m z a g a d n i e n i e m z w i z a n y m z m e t o d a n i m a t e ( ) s o p c j e d o d a t k o w e . W y w o Ba n i e w y g l -
d a n a s t p u j c o :
a n i m a t e ( p a r a m e t r y , o p c j e ) ;
O p c j e d e f i n i u j e s i w p o s t a c i l i t e r a Bu o b i e k t u ( z b i ó r p a r k l u c z : w a r t o ) . Z n a m y j u | k i l k a z n i c h :
c z a s t r w a n i a ( a n g . d u r a t i o n ) , d y n a m i k a ( a n g . e a s i n g ) c z y f u n k c j a z w r o t n a w y k o n y w a n a p o z a k o D-
c z e n i u a n i m a c j i ( c o m p l e t e ) . I s t n i e j j e s z c z e d w i e : s t e p i q u e u e . Z a n i m j e w y j a [n i m y , r z u m y
o k i e m n a s k Ba d n i w y w o Ba n i a f u n k c j i a n i m a t e z u |y c i e m o p c j i :
r o z d z i a l _ 0 3 / 0 8 _ a n i m a t i o n _ q u e u e / s c r i p t . j s ( f r a g m e n t )
$ ( ' p : f i r s t ' ) . a n i m a t e (
{
h e i g h t : ' + = 1 0 0 p x ' ,
b a c k g r o u n d C o l o r : ' g r e e n '
} ,
{
d u r a t i o n : ' s l o w ' ,
e a s i n g : ' s w i n g ' ,
c o m p l e t e : f u n c t i o n ( ) { a l e r t ( ' g o t o w e ! ' ) ; } ,
q u e u e : f a l s e
}
) ;
W a r t o p a m i t a , |e w i k s z o [ m o |l i w o [c i m e t o d y a n i m a t e ( ) m o |n a w y k o r z y s t a z u |y c i e m p r o -
s t e j s k Ba d n i . S k Ba d n i a z Bo |o n a j e s t u |y w a n a w y Bc z n i e w c e l u w y k o r z y s t a n i a b a r d z i e j z a a w a n s o -
w a n y c h m o |l i w o [c i , j a k p a r a m e t r q u e u e .
P a r a m e t r t e n s Bu |y d o k o n t r o l i k o l e j k i ( a n g . q u e u e ) a n i m a c j i , k t ó r e m a j b y w y k o n a n e n a e l e -
m e n c i e . W y w o Ba n i e m e t o d y a n i m a t e ( ) n a e l e m e n c i e p o w o d u j e d o d a n i e t e j a n i m a c j i d o k o l e j k i .
E l e m e n t w y k o n u j e k o l e j k s e k w e n c y j n i e a | d o j e j w y c z e r p a n i a . Aa t w o t o z a u w a |y , j e [l i w y k o n a
s i s e k w e n c j s z y b k i c h k l i k n i n a a n i m o w a n y m o b i e k c i e .
I s t n i e j e j e d n a k w i e l e s y t u a c j i , w k t ó r y c h t e g o t y p u z a c h o w a n i e j e s t n i e p o |d a n e . C z a s e m c h c e m y ,
a b y k i l k a a n i m a c j i o d b y w a Bo s i j e d n o c z e [n i e . J e [l i w y Bc z y m y k o l e j k a n i m a c j i , k o l e j n e a n i m a c j e
b d w y k o n y w a n e r ó w n o l e g l e .
K o l e j k a a n i m a c j i j e s t k o n t r o l o w a n a z a p o m o c p a r a m e t r u q u e u e o r a z m e t o d s t o p ( ) , q u e u e ( )
i d e q u e u e ( ) . T a k o m b i n a c j a m e t o d i p a r a m e t r ó w d a j e n a m e l a s t y c z n k o n t r o l n a d d z i a Ba n i e m a n i m a -
c j i . Z a n i m j e d n a k z a g Bb i m y s i w t a j n i k i k o n t r o l i a n i m a c j i , p o w i n n i [m y p o z n a j e d n z n a j w a |-
n i e j s z y c h t e c h n i k z w i z a n y c h z j Q u e r y .
a c u c h y m e t o d
D o t e j p o r y w y r a |e n i a j Q u e r y w y k o n y w a l i [m y s e k w e n c y j n i e , j e d n o p o d r u g i m , e w e n t u a l n i e z a -
g n i e |d |a l i [m y j e w r a m a c h f u n k c j i z w r o t n y c h . W c e l u p o n o w n e g o u |y c i a s e l e k t o r a m u s i e l i [m y
w y w o Ba g o p o n o w n i e l u b u |y o b i e k t u t h i s . B i b l i o t e k a j Q u e r y o b s Bu g u j e j e d n a k m e c h a n i z m
P o l e k s i |k
K u p k s i |k
6 6 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
p o z w a l a j c y w y k o n a k i l k a m e t o d n a t y m s a m y m s e l e k t o r z e . M e c h a n i z m t e n n a z y w a m y Ba Dc u -
c h e m ( a n g . c h a i n i n g ) i p r z e j [c i e n a p o z i o m n i n j a w y m a g a z n a j o m o [c i t e g o s z c z e g ó Bu .
Aa Dc u c h p o z w a l a w y k o n a w i k s z l i c z b w y w o Ba D m e t o d j Q u e r y w p o j e d y n c z y m w y r a |e n i u .
Aa Dc u c h b u d u j e s i p r z e z d o p i s a n i e m e t o d y d o i n n e g o w y r a |e n i a . N a p r z y k Ba d p o Bc z m y w Ba Dc u c h
m e t o d y h i d e ( ) , s l i d e D o w n ( ) i f a d e O u t ( ) . N a s z e l e m e n t s z y b k o z n i k a , p o t e m w j e |d |a n a s w o j e
m i e j s c e , a n a k o Dc u s t o p n i o w o z a n i k a :
$ ( ' p : f i r s t ' ) . h i d e ( ) . s l i d e D o w n ( ' s l o w ' ) . f a d e O u t ( ) ;
M o |e m y t w o r z y Ba Dc u c h y m e t o d o d o w o l n e j d Bu g o [c i . N a l e |y j e d n a k z a c h o w a c z u j n o [: t w o -
r z e n i e k o d u w t e n s p o s ó b Ba t w o u z a l e |n i a ! O p r ó c z w y k o n y w a n i a Ba Dc u c h a m e t o d n a t y m s a m y m
o b i e k c i e Ba Dc u c h m o |e n a w i g o w a p o o b i e k t a c h D O M , d o d a w a i u s u w a o b i e k t y p o d r o d z e ,
c o m o |e p r o w a d z i d o d o [ p o t w o r n y c h w y r a |e D.
Aa Dc u c h y m e t o d w a r t o z a p i s y w a w c z y t e l n y s p o s ó b , p r z e n o s z c k o l e j n e w y w o Ba n i a d o k o l e j n y c h
w i e r s z y . T a k i z a p i s z a j m u j e w i c e j m i e j s c a , a l e k o d j e s t z n a c z n i e c z y t e l n i e j s z y i Ba t w i e j s z y w u t r z y m a -
n i u . N a s z p o p r z e d n i p r z y k Ba d m o |e m y z a p i s a n a s t p u j c o :
$ ( ' p : f i r s t ' )
. h i d e ( )
. s l i d e D o w n ( ' s l o w ' )
. f a d e O u t ( ) ;
N a l e |y p a m i t a , |e s e l e k t o r j Q u e r y p o k a |d y m w y w o Ba n i u m e t o d y z a w i e r a z m o d y f i k o w a n y p r z e z n i
w y n i k , a n i e w a r t o [ p o c z t k o w . O z n a c z a t o , |e w k o l e j n y c h w y w o Ba n i a c h m e t o d z Ba Dc u c h a
m o |e m y d o d a w a i u s u w a e l e m e n t y , a z m i a n y b d m i a By z a s t o s o w a n i e t y l k o d o a k t u a l n e j s e l e k c j i .
J e [l i p r z y j r z y s z s i n i e k t ó r y m z n a s z y c h w c z e [n i e j s z y c h p r z y k Ba d ó w , z p e w n o [c i z n a j d z i e s z p r z y -
p a d k i Ba Dc u c h ó w m e t o d , n a p r z y k Ba d $ ( t h i s ) . n e x t ( ) . t o g g l e ( ) . M e t o d a n e x t ( ) p r z e n o s i s e l e k t o r
n a k o l e j n y o b i e k t ( r o d z e Ds t w o ) , a m e t o d a t o g g l e ( ) p r z e Bc z a j e g o s t a n w i d o c z n o [c i , n i e n a r u s z a -
j c o r y g i n a l n e g o o b i e k t u .
W p r a c y z j Q u e r y b d z i e s z m i a B m n ó s t w o o k a z j i d o w y k o r z y s t a n i a Ba Dc u c h ó w m e t o d , d a l s z a
c z [ k s i |k i j e s t n i m i p o p r o s t u w y p e Bn i o n a . M i d z y i n n y m i n a t y m p o l e g a r a d o [ u |y w a n i a
j Q u e r y !
Z a t r z y m y w a n i e a c u c h a
J e [l i p o j a w i s i p o t r z e b a z a t r z y m a n i a n a c h w i l Ba Dc u c h a m e t o d w t r a k c i e r e a l i z a c j i , m o |n a w y k o -
r z y s t a m e t o d d e l a y ( ) . W y s t a r c z y p o d a c z a s o c z e k i w a n i a ( w m i l i s e k u n d a c h ) . O t o p r o s t y p r z y -
k Ba d t a k i e g o u |y c i a :
$ ( ' p : f i r s t ' )
. h i d e ( )
. s l i d e D o w n ( ' s l o w ' )
. d e l a y ( 2 0 0 0 )
. f a d e O u t ( ) ;
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 6 7
T o w y r a |e n i e w s u n i e a k a p i t , o d c z e k a d w i e s e k u n d y , p o c z y m s p o w o d u j e j e g o s t o p n i o w e z a n i k a n i e .
M e t o d a d e l a y ( ) m o |e b y d o s k o n a By m s p o s o b e m k o n t r o l i p r z e b i e g u w i e l o e t a p o w y c h a n i m a c j i .
A n i m o w a n a n a w i g a c j a
T y m r a z e m k l i e n t u p i e r a s i p r z y s w o i m : c h c e , |e b y g Bó w n e m e n u b y Bo a n i m a c j w e F l a s h u , z w i -
z u a l n y m i e f e k t a m i t o w a r z y s z c y m i n a w i g a c j i . F l a s h w y g l d a l e p i e j . Z a p e w n i a s z g o , |e F l a s h a
m a s z w m a By m p a l c u i |e n a s z y b k o c o [ p r z y g o t u j e s z .
O K , k l i e n t w y s z e d B z p o k o j u . C z a s w y k o r z y s t a [w i e |o n a b y t e u m i e j t n o [c i w c e l u s t w o r z e n i a e f e k -
t o w n e g o p a s k a n a w i g a c j i , p r z y p o m i n a j c e g o w d z i a Ba n i u a n i m a c j F l a s h . M e n u b d z i e m i a Bo f a -
l u j c y b b e l o z n a c z a j c y d a n p o z y c j , n a d k t ó r a k t u a l n i e z n a j d u j e s i w s k a zn i k m y s z y . Z r o b i m y
t o , w y k o r z y s t u j c w y Bc z n i e w o l n e t e c h n o l o g i e : H T M L , C S S i J a v a S c r i p t . A F l a s h ? N i e p o t r z e b u -
j e m y |a d n e g o F l a s h a !
W p r z y k Ba d a c h w y k o r z y s t a m y t y l k o p o d s t a w o w e a n i m a c j e , d z i k i c z e m u b d o n e Ba t w e d o a n a l i z y .
N a p o c z t e k z m o d y f i k u j e m y C S S o b s Bu g u j c y n a s z e m e n u , a b y w y [w i e t l a Bo s i w p o z i o m i e , a n i e
w p i o n i e . N a s z k o d H T M L d l a m e n u w y g l d a n a s t p u j c o :
r o z d z i a l _ 0 3 / 0 9 _ a n i m a t e d _ n a v i g a t i o n / i n d e x . h t m l ( f r a g m e n t )
< u l i d = " n a v i g a t i o n " >
< l i > < a h r e f = " # " > S t r o n a g ó w n a < / a > < / l i >
< l i > < a h r e f = " # " > O n a s < / a > < / l i >
< l i > < a h r e f = " # " > K u p t e r a z ! < / a > < / l i >
< l i > < a h r e f = " # " > P o m y s n a p r e z e n t < / a > < / l i >
< / u l >
N a s z y m b b l e m b d z i e p u s t y e l e m e n t d i v , u s t a w i a j c y s i z a e l e m e n t e m n a w i g a c y j n y m , n a d k t ó -
r y m z a t r z y m a s i w s k a zn i k m y s z y . Z a t e m p i e r w s z e z a d a n i e d l a j Q u e r y p o l e g a n a u t w o r z e n i u t a -
k i e g o e l e m e n t u i d o p i s a n i u g o d o d o k u m e n t u :
r o z d z i a l _ 0 3 / 0 9 _ a n i m a t e d _ n a v i g a t i o n / s c r i p t . j s ( f r a g m e n t )
$ ( ' < d i v i d = " n a v i g a t i o n _ b l o b " > < / d i v > ' ) . c s s ( {
w i d t h : $ ( ' # n a v i g a t i o n l i : f i r s t a ' ) . w i d t h ( ) + 1 0 ,
h e i g h t : $ ( ' # n a v i g a t i o n l i : f i r s t a ' ) . h e i g h t ( ) + 1 0
} ) . a p p e n d T o ( ' # n a v i g a t i o n ' ) ;
W a r t o z w r ó c i u w a g n a t o , |e w [r o d k u l i t e r a Bu o b i e k t u u |y w a m y s e l e k t o r a w c e l u o d c z y t a n i a
w y m i a r ó w o b i e k t u . J e [l i m a s z d o [w i a d c z e n i e z p r o g r a m o w a n i e m , n i e z d z i w i C i t o ; n o w i c j u s z y
u s p o k a j a m y : t o n i e j e s t n i c n a d z w y c z a j n e g o , w s z d z i e t a m , g d z i e m o |n a w p i s a w a r t o [ s t a t y c z n ,
m o |n a t e | u |y w y r a |e n i a w y l i c z a j c e g o ( l u b o d c z y t u j c e g o ) w a r t o [. D o o d c z y t a n y c h w y m i a r ó w
d o d a j e m y 1 0 , d z i k i c z e m u b b e l j e s t n i e c o w i k s z y o d e l e m e n t u m e n u , z a k t ó r y m m a s i z n a l e z.
M a m y j u | b b e l , t e r a z p o t r z e b u j e m y z d a r z e D, k t ó r e w p r a w i g o w r u c h . Z d a r z e n i e m b d z i e
u m i e s z c z e n i e w s k a zn i k a m y s z y n a d p o z y c j w m e n u , w i c u |y j e m y m e t o d y h o v e r ( ) . J a k p a m i t a m y ,
m e t o d a t a o c z e k u j e d w ó c h p a r a m e t r ó w : p i e r w s z y o k r e [l a f u n k c j o b s Bu g i z d a r z e n i a m o u s e o v e r ,
d r u g i f u n k c j z d a r z e n i a m o u s e o u t . N a s z e w y r a |e n i e b d z i e z a t e m m i a Bo n a s t p u j c s t r u k t u r :
P o l e k s i |k
K u p k s i |k
6 8 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
r o z d z i a l _ 0 3 / 0 9 _ a n i m a t e d _ n a v i g a t i o n / s c r i p t . j s ( f r a g m e n t )
$ ( ' # n a v i g a t i o n a ' ) . h o v e r ( f u n c t i o n ( ) {
/ / f u n k c j a o b s Bu g i m o u s e o v e r
.
.
.
} , f u n c t i o n ( ) {
/ / f u n k c j a o b s Bu g i m o u s e o u t
.
.
.
} ) ;
C z a s n a o d r o b i n z a b a w y . R z u m y o k i e m n a p i e r w s z f u n k c j , k t ó r a j e s t w y w o By w a n a , g d y z a -
t r z y m a m y w s k a zn i k m y s z y n a d p o z y c j m e n u :
r o z d z i a l _ 0 3 / 0 9 _ a n i m a t e d _ n a v i g a t i o n / s c r i p t . j s ( f r a g m e n t )
/ / f u n k c j a o b s Bu g i m o u s e o v e r
$ ( ' # n a v i g a t i o n _ b l o b ' ) . a n i m a t e (
{ w i d t h : $ ( t h i s ) . w i d t h ( ) + 1 0 , l e f t : $ ( t h i s ) . p o s i t i o n ( ) . l e f t } ,
{ d u r a t i o n : ' s l o w ' , e a s i n g : ' e a s e O u t E l a s t i c ' , q u e u e : f a l s e }
) ;
G d y w s k a zn i k m y s z y z a t r z y m a s i n a d p o z y c j w m e n u , w y k o n u j e m y a n i m a c j d w ó c h a t r y b u t ó w
n a s z e g o b b l a : s z e r o k o [c i i p o z y c j i .
P o z y c j a e l e m e n t u j e s t o d c z y t y w a n a z a p o m o c m e t o d y p o s i t i o n ( ) . M e t o d a t a n i e p o w o d u j e
z m i a n , p o p r o s t u z w r a c a d w i e w a r t o [c i o k r e [l a j c e p r z e s u n i c i e l e w e g o g ó r n e g o w i e r z c h o Bk a o b i e k t u
w s t o s u n k u d o r o d z i c a . N a s i n t e r e s u j e p r z e s u n i c i e p o z i o m e , p o n i e w a | b b e l b d z i e p o r u s z a B s i
o d l e w e j d o p r a w e j .
O p c j q u e u e u s t a w i a m y n a w a r t o [ f a l s e , p o n i e w a | n i e c h c e m y , a b y a n i m a c j e n a w a r s t w i By s i
n a m , p o w o d u j c z a k Bó c e n i a w i z u a l n e w o b s Bu d z e m e n u ( w p r z y p a d k u u |y t k o w n i k a s z c z e g ó l n i e
n e r w o w o p o r u s z a j c e g o m y s z n a d m e n u ) . P o p r z e n i e s i e n i u w s k a zn i k a n a i n n p o z y c j m e n u
r o z p o c z n i e s i i n n a a n i m a c j a , n i e z a l e |n i e o d t e g o , c z y a k t u a l n a s k o Dc z y Ba d z i a Ba n i e .
M i m o t o m u s i m y p o i n f o r m o w a j Q u e r y o t y m , c o m a z r o b i , g d y u |y t k o w n i k p r z e s u n i e w s k a z-
n i k m y s z y p o z a p o z y c j w m e n u . T e n f r a g m e n t k o d u j e s t d o [ p o d o b n y d o p o p r z e d n i e g o , a l e z a w i e r a
n i e c o w i c e j m e t o d w Ba Dc u c h u :
r o z d z i a l _ 0 3 / 0 9 _ a n i m a t e d _ n a v i g a t i o n / s c r i p t . j s ( f r a g m e n t )
/ / f u n k c j a o b s Bu g i m o u s e o u t
$ ( ' # n a v i g a t i o n _ b l o b ' )
. s t o p ( t r u e )
. a n i m a t e (
{ w i d t h : ' h i d e ' } ,
{ d u r a t i o n : ' s l o w ' , e a s i n g : ' e a s e O u t C i r c ' , q u e u e : f a l s e }
)
. a n i m a t e (
{ l e f t : $ ( ' # n a v i g a t i o n l i : f i r s t a ' ) . p o s i t i o n ( ) . l e f t ; } ,
' f a s t '
) ;
}
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 6 9
T y m r a z e m p o Bc z y l i [m y w Ba Dc u c h d w i e a n i m a c j e : p i e r w s z a u k r y w a b b e l z u |y c i e m e s t e t y c z n e j
d y n a m i k i a n i m a c j i , d r u g a p r z e n o s i g o n a p o z y c j p o c z t k o w , c z y l i l e w s t r o n m e n u .
W a r t o z w r ó c i u w a g n a m e t o d s t o p ( ) w y k o n y w a n n a p o c z t k u o b s Bu g i z d a r z e n i a . M e t o d a t a
r o b i d o k Ba d n i e t o , n a c o w s k a z u j e j e j n a z w a : z a t r z y m u j e a n i m a c j . A k c e p t u j e d w a d o d a t k o w e p a -
r a m e t r y : c l e a r Q u e u e i g o t o E n d . P a r a m e t r c l e a r Q u e u e u s t a w i a m y n a t r u e , c o p o w o d u j e w y c z y s z -
c z e n i e k o l e j k i a n i m a c j i .
P a r a m e t r g o t o E n d j e s t w y k o r z y s t y w a n y w c e l u u s t a l e n i a k o Dc o w e g o s t a n u e l e m e n t u , g d y b y k o l e j k a
a n i m a c j i z o s t a Ba w y k o n a n a : o b i e k t j e s t n a t y c h m i a s t u s t a w i a n y w t e n s t a n ( b e z a n i m a c j i ) . W t y m p r z y -
p a d k u t e g o n i e c h c e m y , p o n i e w a | z a l e |y n a m , a b y k o l e j n e a n i m a c j e r o z p o c z By s i o d m i e j s c a , w k t ó r y m
b b e l z n a j d u j e s i w d a n e j c h w i l i , n a w e t j e [l i j e s t w Ba [n i e w p o Bo w i e d r o g i m i d z y e l e m e n t a m i m e n u .
P o b a w s i n i e c o a n i m a c j m e n u , |e b y s p r a w d z i , j a k w Ba [c i w y d o b ó r p a r a m e t r ó w d y n a m i k i a n i -
m a c j i w p By w a n a u z y s k a n i e n a t u r a l n e g o w r a |e n i a d z i a Ba n i a i n t e r f e j s u .
T o t e | d o s k o n a Ba o k a z j a , a b y s p r a w d z i i n n e p a r a m e t r y d y n a m i k i a n i m a c j i . W y s t a r c z y z a s t p i
p r o p o n o w a n e p r z e z n a s i n n y m i z d o s t p n e j l i s t y . A | t r u d n o u w i e r z y , j a k w i e l k a j e s t m i d z y n i m i
r ó |n i c a ! M o |n a t e | a n i m o w a i n n e a t r y b u t y b b l a , n a p r z y k Ba d z m i e n i a j e g o k o l o r .
A n i m o w a n a n a w i g a c j a , w e r s j a 2
J e d n z d o s k o n a By c h c e c h t a k i c h b i b l i o t e k j a k j Q u e r y j e s t m o |l i w o [ s z y b k i e g o p r z e t e s t o w a n i a
r ó |n y c h a l t e r n a t y w n y c h r o z w i z a D i w y b r a n i a t e g o , k t ó r e d z i a Ba n a j l e p i e j .
D o p o w r o t u k l i e n t a z o s t a Bo n a m k i l k a g o d z i n . S p r ó b u j m y r o z w i z a t o s a m o z a d a n i e w n i e c o i n -
n y s p o s ó b . Z o b a c z y m y , c o z t e g o w y n i k n i e .
W t y m p r z y p a d k u n a s z e p o z y c j e w m e n u b d m i a By u k r y t i k o n , k t ó r a b d z i e w y s k a k i w a Ba p o n a j e -
c h a n i u m y s z ( c o p r z e d s t a w i a r y s u n e k 3 . 4 ) .
K o n f i g u r a c j a t e g o e f e k t u j e s t p r o s t a . M a m y z w y k B l i s t n i e n u m e r o w a n , s k o n f i g u r o w a n z a p o -
m o c C S S w f o r m i e p o z i o m e j , a l e k a |d y e l e m e n t l i s t y p o s i a d a d o d a t k o w y , u k r y t y e l e m e n t d e f i -
n i u j c y i k o n . W t y m c e l u w s p e c j a l n y s p o s ó b j e s t u s t a w i a n a w y s o k o [ e l e m e n t u l i s t y , t a k |e w i -
d o c z n y j e s t t y l k o t e k s t , a n a |y c z e n i e w y s o k o [ j e s t a n i m o w a n a t a k , a b y w y [w i e t l i r ó w n i e | i k o n .
R y s u n e k 3 . 4 . P o d s k a k u j c e a n i m o w a n e m e n u
N a p o c z t e k z d e f i n i u j e m y s t y l e C S S . N a s z e m e n u p o z y c j o n u j e m y w s p o s ó b b e z w z g l d n y w s t o s u n k u
d o k o n t e n e r a ( e l e m e n t d i v ) , w k t ó r y m m u s i m y z a d b a o w y s t a r c z a j c i l o [ m i e j s c a n a w y s u w a n e
i k o n y . I k o n y s t a n o w i t Bo e l e m e n t ó w t e k s t o w y c h m e n u , a l e t Bo j e s t p r z e s u n i t e , d z i k i c z e m u i k o n y
P o l e k s i |k
K u p k s i |k
7 0 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
n i e s w i d o c z n e . W y s o k o [ e l e m e n t ó w t e k s t o w y c h w y n o s i 2 0 p x , a t Bo j e s t p r z e s u n i t e o 3 0 p x w d ó B.
W e f e k c i e t Bo ( c z y l i i k o n a ) n i e j e s t w i d o c z n e p r z y d o m y [l n e j w y s o k o [c i e l e m e n t ó w m e n u .
K a |d a p o z y c j a m e n u m a u s t a w i o n i n n i k o n w c h a r a k t e r z e t Ba :
r o z d z i a l _ 0 3 / 1 0 _ a n i m a t e d _ n a v i g a t i o n _ 2 / n a v i g a t i o n . c s s ( f r a g m e n t )
# c o n t a i n e r {
p o s i t i o n : r e l a t i v e ;
}
# n a v i g a t i o n {
p o s i t i o n : a b s o l u t e ;
w i d t h : i n h e r i t ;
t o p : 0 ;
r i g h t : 0 ;
m a r g i n : 0 ;
}
# n a v i g a t i o n l i {
h e i g h t : 2 0 p x ;
f l o a t : l e f t ;
l i s t - s t y l e - t y p e : n o n e ;
w i d t h : 7 0 p x ;
p a d d i n g : 3 p x ;
b o r d e r - r i g h t : 1 p x s o l i d # 3 6 8 7 A F ;
b a c k g r o u n d - c o l o r : # 0 1 5 2 8 7 ;
b a c k g r o u n d - r e p e a t : n o - r e p e a t ;
b a c k g r o u n d - p o s i t i o n : c e n t e r 3 0 p x ;
}
# n a v i g a t i o n l i a {
c o l o r : # F F F F F F ;
}
# n a v i g a t i o n # h o m e {
b a c k g r o u n d - i m a g e : u r l ( ' i c o n _ h o m e . p n g ' ) ;
}
.
.
.
J e d y n n o w o [c i w p o w y |s z y m k o d z i e j e s t z a t r z y m a n i e a k c j i w c e l u w y c z y s z c z e n i a k o l e j k i a n i m a -
c j i , z a r ó w n o w o b s Bu d z e z d a r z e n i a m o u s e o v e r , j a k i m o u s e o u t . N a s t p n i e a n i m u j e m y w y s o k o [
e l e m e n t u w c e l u w y [w i e t l e n i a u k r y t y c h i k o n l u b z m n i e j s z a m y j w c e l u i c h u k r y c i a . P r e c y z y j n i e
d o b r a n e u s t a w i e n i a c z a s u t r w a n i a a n i m a c j i i j e j d y n a m i k i p o z w a l a j u z y s k a c i e k a w y e f e k t p o d s k a k i -
w a n i a , o k t ó r y n a m c h o d z i Bo . W t y m p r z y p a d k u r ó w n i e | z a c h c a m y d o e k s p e r y m e n t ó w z r ó |n y -
m i u s t a w i e n i a m i i d o s t o s o w a n i a e f e k t u d o w Ba s n y c h p o t r z e b .
r o z d z i a l _ 0 3 / 1 0 _ a n i m a t e d _ n a v i g a t i o n _ 2 / s c r i p t . j s ( f r a g m e n t )
$ ( ' # n a v _ s t r e t c h l i ' ) . h o v e r (
f u n c t i o n ( ) {
$ ( t h i s )
. s t o p ( t r u e )
. a n i m a t e (
{ h e i g h t : ' 6 0 p x ' } ,
{ d u r a t i o n : 5 0 0 , e a s i n g : ' e a s e O u t B o u n c e ' }
)
} ,
f u n c t i o n ( ) {
$ ( t h i s )
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 7 1
. s t o p ( t r u e )
. a n i m a t e (
{ h e i g h t : ' 2 0 p x ' } ,
{ d u r a t i o n : 5 0 0 , e a s i n g : ' e a s e O u t C i r c ' }
)
}
) ;
I w t e n s p o s ó b m a m y n i e j e d e n , a d w a n i e z Be p r z y k Ba d y e f e k t ó w , k t ó r e m o |e m y p o k a z a k l i e n t o w i .
B i b l i o t e k a j Q u e r y U I
J a k w s p o m n i e l i [m y w r o z d z i a l e 1 . , b i b l i o t e k a j Q u e r y U I j e s t k o l e k c j z a a w a n s o w a n y c h w i d |e t ó w
i i n t e r a k c j i , s t w o r z o n y c h z u |y c i e m j Q u e r y . Z n a j d z i e m y t u k o n t r o l k i w y b o r u d a t y , a k o r d e o n y i o b s Bu -
g z d a r z e D t y p u p r z e c i g n i j i u p u [ . T e g o t y p u e l e m e n t y s t a j s i c o r a z p o p u l a r n i e j s z e w a p l i k a -
c j a c h W W W . Z a n i m j e d n a k z a c z n i e m y c i e s z y s i n o w y m i z a b a w k a m i , m u s i m y z d o b y b i b l i o t e k
j Q u e r y U I . T e n p r o c e s j e s t n i e c o b a r d z i e j s k o m p l i k o w a n y w p o r ó w n a n i u z p o d s t a w o w b i b l i o t e -
k j Q u e r y i w t y c z k a m i , k t ó r y c h u |y w a l i [m y d o t y c h c z a s . K Bo p o t w y n i k a z f a k t u , |e p e Bn a w e r s j a
b i b l i o t e k i j Q u e r y U I w a |y n i e m a l 5 0 0 k B ( 3 0 0 k B p o z m i n i m a l i z o w a n i u ) ! T o d u |o . N a s z c z [c i e
w i k s z o [ p r o j e k t ó w w y k o r z y s t u j e z a l e d w i e u Ba m e k m o |l i w o [c i c a Be j b i b l i o t e k i . Z t e g o p o w o d u
n a s t r o n i e p r o j e k t u j Q u e r y d o s t p n e j e s t n a r z d z i e p o z w a l a j c e s t w o r z y w Ba s n , d o p a s o w a n d o
p o t r z e b w e r s j j Q u e r y U I , t o z n a c z y t a k , k t ó r a z a w i e r a t y l k o p o t r z e b n e n a m e l e m e n t y i n i c w i c e j .
O p c j e k o n f i g u r a t o r a w Ba s n e j w e r s j i j Q u e r y U I 7 m o g n a p i e r w s z y r z u t o k a w y d a s i n i e c o p r z y -
t Ba c z a j c e , a l e n i e n a l e |y s i z r a |a .
N a r z d z i e k o n f i g u r a c y j n e s k Ba d a s i z k i l k u s e k c j i : C o r e , I n t e r a c t i o n , W i d g e t s , E f f e c t s i T h e m e s .
S e k c j a C o r e d o t y c z y g Bó w n e j c z [c i b i b l i o t e k i j Q u e r y U I , n a n i e j s w o j e d z i a Ba n i e o p i e r a j k o m p o n e n t y
z s e k c j i W i d g e t s i I n t e r a c t i o n . D o b r e p o d e j [c i e p o l e g a n a o d z n a c z e n i u w s z y s t k i e g o , a n a s t p n i e
z a z n a c z e n i u t y l k o t e g o , c o n i e z b d n e . J e [l i d a n y e l e m e n t w y m a g a z a i n s t a l o w a n i a i n n e g o , t e n d r u g i
z o s t a n i e z a z n a c z o n y a u t o m a t y c z n i e .
N a e t a p i e t w o r z e n i a a p l i k a c j i w a r t o z a o p a t r z y s i w p e Bn w e r s j . W t e n s p o s ó b b d z i e m y m i e l i
w s z y s t k o p o d r k , n a w s z e l k i w y p a d e k . P o z a k o Dc z e n i u t w o r z e n i a a p l i k a c j i m o |n a w r ó c i n a s t r o n
k o n f i g u r a t o r a i s t w o r z y b i b l i o t e k w w e r s j i p r o d u k c y j n e j , z a w i e r a j c t y l k o t o , c o n i e z b d n e . R ó |n i c a
w r o z m i a r z e m i d z y w e r s j p e Bn a d o s t o s o w a n m o |e b y s p o r a , c o d e m o n s t r u j e r y s u n e k 3 . 5 .
J e d n z o p c j i , k t ó r a m a d u |y w p By w n a w y g l d w i d |e ó w i i n t e r a k c j i , j e s t m o t y w ( a n g . t h e m e ) . D o d y s -
p o z y c j i m a m y s p o r l i c z b g o t o w y c h m o t y w ó w , k t ó r e w y b i e r a s i z l i s t y r o z w i j a n e j . W r o z d z i a l e 9 .
z a j m i e m y s i b a r d z i e j s z c z e g ó Bo w o m o t y w a m i , p o k a |e m y t e |, j a k t w o r z y w Ba s n e . N a r a z i e j e d n a k ,
n i e c h c c p s u n i e z Be g o t e m p a , u |y j e m y d o m y [l n e g o m o t y w u i w r a c a m y d o p r a c y .
A r c h i w u m u t w o r z o n e p r z e z k o n f i g u r a t o r , d o s t o s o w a n e d o w e r s j i j Q u e r y U I z a w i e r a s p o r l i c z b p l i -
k ó w . Z n a j d z i e m y t a m m n ó s t w o k o d u d e m o n s t r a c y j n e g o i d o k u m e n t a c j i . W a r t o p o s z p e r a w k a t a l o g u
d e v e l o p m e n t - b u n d l e , a l e n i e c i e r p l i w y c h z a i n t e r e s u j e t y l k o p l i k j Q u e r y - u i - 1 . 7 . 2 - m i n . j s ( n u m e r w e r s j i
j e s t o c z y w i [c i e o d p o w i e d n i d l a a k t u a l n i e n a j n o w s z e j w e r s j i s t a b i l n e j ) o r a z k a t a l o g w y b r a n e g o m o t y w u .
7
h t t p : / / j q u e r y u i . c o m /
P o l e k s i |k
K u p k s i |k
7 2 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
R y s u n e k 3 . 5 . P o r ó w n a n i e p e n e j w e r s j i b i b l i o t e k i j Q u e r y U I z w e r s j d o s t o s o w a n
K a t a l o g m o t y w u n a l e |y u m i e [c i w l o k a l i z a c j i d o s t p n e j z p o z i o m u k o d u H T M L . W p r z y k Ba d a c h
z t e j k s i |k i j Q u e r y U I u m i e [c i l i [m y w k a t a l o g u l i b ( o b o k b i b l i o t e k i j Q u e r y ) , a p l i k i m o t y w u
w k a t a l o g u c s s .
B i b l i o t e k a j Q u e r y U I z a w i e r a p a k i e t E f f e c t s , k t ó r y p o z w a l a i m p l e m e n t o w a i n t e r e s u j c e e f e k t y .
Z a w i e r a t e | d o d a t k o w e m e t o d y i f u n k c j e p o m o c n e w t w o r z e n i u z a a w a n s o w a n y c h a n i m a c j i . C z [
z t y c h m o |l i w o [c i m i e l i [m y o k a z j p o z n a d z i k i w t y c z k o m C o l o r A n i m a t i o n s o r a z E a s i n g . O b i e
t e w t y c z k i s z a w a r t e w p a k i e c i e E f f e c t s , z a t e m n i e m u s i m y j u | n i c w Bc z a i n d y w i d u a l n i e , j e [l i
p l a n u j e m y u |y w a b i b l i o t e k i e f e k t ó w w c h o d z c e j w s k Ba d j Q u e r y U I .
Z a n i m p r z e j d z i e m y d o d a l s z y c h z a g a d n i e D, r z u m y o k i e m n a d o s t p n e e f e k t y . Z n ó w p o m c z y m y
n a s z p i e r w s z y a k a p i t n a s t r o n i e i p o t r z [n i e m y n i m n i e c o , p o d [w i e t l i m y g o n a |ó Bt o , a n a k o Dc u
w y s a d z i m y , r o z p r y s k u j c n a k a w a Bk i :
r o z d z i a l _ 0 3 / 1 1 _ j q u e r y _ u i _ e f f e c t s / s c r i p t . j s ( f r a g m e n t )
$ ( ' p : f i r s t ' )
. e f f e c t ( ' s h a k e ' , { t i m e s : 3 } , 3 0 0 )
. e f f e c t ( ' h i g h l i g h t ' , { } , 3 0 0 0 )
. h i d e ( ' e x p l o d e ' , { } , 1 0 0 0 ) ;
R o b i w r a |e n i e ! A t o o c z y w i [c i e z a l e d w i e p r z e d s m a k m o |l i w o [c i d o s t p n y c h e f e k t ó w . N i e k t ó r y c h
z n i c h m o |n a u |y w a t y l k o w t a k i s p o s ó b j a k w p o w y |s z y m p r z y k Ba d z i e , i n n e s t a n o w i u z u p e Bn i e n i e
s t a n d a r d o w y c h p a r a m e t r ó w a n i m a c j i : h i d e ( u k r y w a n i a ) , s h o w ( w y [w i e t l a n i a ) l u b t o g g l e ( p r z e B-
c z a n i a w i d o c z n o [c i ) . P r z y k Ba d e m t e j d r u g i e j g r u p y s p a r a m e t r y : b l i n d , c l i p , p u f f , f o l d i s l i d e .
N i e b d z i e m y i c h w s z y s t k i c h a n a l i z o w a , n a j l e p i e j , j e [l i s p d z i s z n i e d z i e l n e p o p o Bu d n i e n a i c h
w y p r ó b o w a n i u . N i e w s z y s t k i e e f e k t y s b r a w u r o w e , a l e w i e l e z n i c h s p r a w i a w r a |e n i e p r z y d a t -
n y c h w c o d z i e n n y c h z a s t o s o w a n i a c h , j a k h i g h l i g h t , k t ó r y j e s t s t a n d a r d o w y m s p o s o b e m o z n a -
c z a n i a n a p r z y k Ba d n o w y c h w i a d o m o [c i u |y t k o w n i k a .
D o b r y m p o m y s Be m j e s t s a m o d z i e l n e p r z e t e s t o w a n i e w s z y s t k i c h e f e k t ó w , |e b y p a m i t a o n i c h
w ó w c z a s , g d y o k a | s i p r z y d a t n e . A j e [l i a s o r t y m e n t e f e k t ó w d o s t p n y z j Q u e r y U I t o d l a C i e b i e
z a m a Bo , s e t k i i n n y c h c z e k a j w r e p o z y t o r i u m w t y c z e k j Q u e r y !
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 7 3
D a j s i p o r u s z y !
R o z u m i e s z j u | p o d s t a w y t w o r z e n i a a n i m a c j i z j Q u e r y : s e l e k t o r y , f u n k c j e o b s Bu g i z d a r z e D, f u n k c j e
z w r o t n e , Ba Dc u c h y m e t o d i n a j w a |n i e j s z z n i c h m e t o d a n i m a t e ( ) . Z a p o z n a Be [ s i t e | p o -
k r ó t c e z r o z b u d o w a n b i b l i o t e k j Q u e r y U I . N a j l e p s z y s p o s ó b o p a n o w a n i a t y c h u m i e j t n o [c i p o -
l e g a n a w y k o r z y s t a n i u i c h w p r a k t y c e . Z a t e m i d z i w y k o n u j a n i m a c j e n a w s z y s t k i m , c o C i w p a d n i e
w o k o . S p r ó b u j p o b a w i s i z k a |d w Ba [c i w o [c i k a |d e g o e l e m e n t u n a k a |d e j s t r o n i e , a | p o c z u -
j e s z , |e r z e c z y w i [c i e s t a By s i p o s Bu s z n e T w o j e j w o l i .
Z a n i m p r z e j d z i e m y o d a n i m a c j i d o i n n y c h z a a w a n s o w a n y c h m e c h a n i z m ó w z w i z a n y c h z j Q u e r y ,
z w r ó c i m y u w a g n a p r z e w i j a n i e i z m i a n r o z m i a r u e l e m e n t ó w . T e z a g a d n i e n i a s n i e c o m i e j e f e k t o w -
n e o d a n i m a c j i , a l e s t a n o w i i s t o t n e e l e m e n t y o b s Bu g i i n t e r f e j s u u |y t k o w n i k a . P o m o g t e | u t r w a l i
p o d s t a w o w e p o j c i a z w i z a n e z j Q u e r y : m e t o d y i Bc z e n i e i c h w Ba Dc u c h y . N a c o j e s z c z e c z e k a m y ?
P r z e w i j a n i e
P r z e w i j a n i e j e s t z a g a d n i e n i e m z b l i |o n y m d o a n i m a c j i , p o n i e w a | w t y m p r z y p a d k u e l e m e n t y
r ó w n i e | p o r u s z a j s i n a e k r a n i e . W p r z e c i w i e Ds t w i e d o a n i m a c j i t o j e d n a k u |y t k o w n i k k o n t r o -
l u j e p r z e b i e g t e j o p e r a c j i . I s t n i e j e m n ó s t w o s p o s o b ó w d o s t o s o w a n i a t e g o t y p u i n t e r a k c j i d o w Ba s n y c h
p o t r z e b . W t y m p u n k c i e p r z y j r z y m y s i m e n u , k t ó r e z a c h o w u j e s w o j e p o Bo |e n i e n a w e t m i m o
p r z e w i n i c i a s t r o n y p r z e z u |y t k o w n i k a , t w o r z e n i e m m o t y w ó w p a s k ó w p r z e w i j a n i a o r a z s p o s o b o m
z a s t o s o w a n i a t e c h n i k a n i m a c y j n y c h w z a g a d n i e n i a c h z w i z a n y c h z p r z e w i j a n i e m d o k u m e n t u .
Z d a r z e n i e p r z e w i j a n i a
Z a n i m b d z i e m y w s t a n i e u d o s k o n a l i m e c h a n i z m p r z e w i j a n i a , m u s i m y w i e d z i e , k i e d y o n o n a s t -
p u j e . J a k s i o k a z u j e , i s t n i e j e z d a r z e n i e z w i z a n e z p r z e w i j a n i e m . Z d a r z e n i e t o n a z y w a s i s c r o l l
i j e s t o d p a l a n e w p r z y p a d k u z m i a n y p o z y c j i p r z e w i j a n i a e l e m e n t u , k t ó r y m a t a k w Ba [c i w o [, j a k
o k n o l u b d i v z o b s Bu g p r z e w i j a n i a . J e [l i z a t e m u |y t k o w n i k p r z e w i j a s t r o n , o d p a l a n e j e s t z d a r z e -
n i e , k t ó r e m o |e m y p r z e c h w y c i i o b s Bu |y .
W c e l u p r z e c h w y c e n i a z d a r z e n i a p r z e w i j a n i a m u s i m y p o d p i s i d o e l e m e n t u p r z e w i j a n e g o
n a j c z [c i e j j e s t t o e l e m e n t o k n a w i n d o w . O k n o j e s t o b i e k t e m J a v a S c r i p t , z a t e m p r z e d j e g o w y k o -
r z y s t a n i e m m u s i m y p r z e k s z t a Bc i j e n a e l e m e n t j Q u e r y , u |y w a j c s e l e k t o r a .
O c z y w i [c i e w c e l u o b s Bu g i z d a r z e n i a p r z e w i j a n i a m u s i m y m i e o b s z a r z p a s k a m i p r z e w i j a n i a .
M a m y k i l k a p o m y s Bó w n a o b s Bu g z d a r z e D p r z e w i j a n i a , k t ó r e m o g s p o d o b a s i k l i e n t o w i , a l e
w c e l u n a u c z e n i a s i , j a k d z i a Ba j z d a r z e n i a p r z e w i j a n i a , z a s y m u l u j e m y [r o d o w i s k o p r z e w i j a n i a
w j e d n y m z e l e m e n t ó w d i v n a s t r o n i e . W t y m c e l u w a r k u s z u s t y l ó w C S S n a l e |y u s t a w i w Ba [c i w o [
o v e r f l o w : s c r o l l :
r o z d z i a l _ 0 3 / 1 2 _ s c r o l l _ e v e n t / s c r o l l . c s s ( f r a g m e n t )
# n e w s {
h e i g h t : 1 0 0 p x ;
w i d t h : 3 0 0 p x ;
o v e r f l o w : s c r o l l ;
}
P o l e k s i |k
K u p k s i |k
7 4 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
P o w y |s z y k o d p r z e k s z t a Bc i s e k c j w i a d o m o [c i w m n i e j s z y p a n e l z p a s k i e m p r z e w i j a n i a . T e r a z
p r z e c h w y c i m y z d a r z e n i e p r z e w i j a n i a s c r o l l i w j e g o e f e k c i e w y [w i e t l i m y d o w o l n y t e k s t .
r o z d z i a l _ 0 3 / 1 2 _ s c r o l l _ e v e n t / s c r i p t . j s ( f r a g m e n t )
$ ( ' # n e w s ' ) . s c r o l l ( f u n c t i o n ( ) {
$ ( ' # h e a d e r ' )
. a p p e n d ( ' < s p a n c l a s s = " s c r o l l e d " > P r z e w i j a n i e ! < / s p a n > ' ) ;
} ) ;
P r z y k a |d e j p r ó b i e p r z e w i j a n i a s e k c j i w i a d o m o [c i u g ó r y s t r o n y n a c z e r w o n y m t l e p o j a w i s i
t e k s t : P r z e w i j a n i e ! . N i e z b y t t o e l e g a n c k i e , a l e s k u t e c z n i e d e m o n s t r u j e m o |l i w o [c i k o d u . S p r ó b u j
p r z e w i j a n a r ó |n e s p o s o b y : p r z e c i g a j c m y s z l u b k l i k a j c p a s e k p r z e w i j a n i a , u |y w a j c k ó Bk a
m y s z y c z y t e | k l a w i s z y s t r z a Be k p o k l i k n i c i u w e w n t r z p r z e w i j a n e g o o b s z a r u . W e w s z y s t k i c h t y c h
p r z y p a d k a c h j e s t o d p a l a n e z d a r z e n i e p r z e w i j a n i a .
P y w a j c a n a w i g a c j a
W i e m y j u |, k i e d y u |y t k o w n i k p r z e w i j a o k n o . W j a k i s p o s ó b m o |e m y u |y t e j i n f o r m a c j i w c e l u
u d o s k o n a l e n i a s t r o n y ? J e d n y m z c z s t o s t o s o w a n y c h p r z y k Ba d ó w j e s t p By w a j c y p a n e l n a w i g a c y j n y .
C h o d z i o t a k i s p o s ó b p r e z e n t o w a n i a m e n u n a w i g a c y j n e g o , w k t ó r y m j e s t o n o w y [w i e t l a n e w s t a -
By m m i e j s c u o k n a p r z e g l d a r k i , n i e z a l e |n i e o d t e g o , w k t ó r y m m i e j s c u p r z e w i j a n e g o d o k u m e n t u
w d a n e j c h w i l i s i z n a j d u j e m y . T e g o t y p u n a w i g a c j a z a c h o w u j e s i t a k , j a k b y m e n u p o d |a Bo z a
u |y t k o w n i k i e m n i e z a l e |n i e o d t e g o , j a k p r z e w i j a d o k u m e n t . D z i k i o b s Bu d z e z d a r z e n i a s c r o l l t e n
e f e k t j e s t Ba t w y d o u z y s k a n i a : w y s t a r c z y , |e o d c z y t a m y w z g l d n e p o Bo |e n i e s t r o n y , p o c z y m p r z e n i e -
s i e m y n a w i g a c j w t o m i e j s c e .
W p i e r w s z y m k r o k u m u s i m y p r z y g o t o w a C S S d o o b s Bu g i p By w a j c e j n a w i g a c j i . D o n a s z e g o e l e -
m e n t u o a t r y b u c i e i d r ó w n y m n a v i g a t i o n d o d a m y d e k l a r a c j p o s i t i o n : r e l a t i v e ; , d z i k i c z e m u
b d z i e m y m o g l i p r z e m i e s z c z a g o w z g l d e m d o k u m e n t u , m o d y f i k u j c w Ba [c i w o [ t o p . N a p o t r z e b y
t e g o w i c z e n i a u s t a w i l i [m y b a r d z o d u | w a r t o [ w Ba [c i w o [c i h e i g h t p o t o , b y u z y s k a p a s e k
p r z e w i j a n i a ( c h y b a |e k t o [ m a m o n i t o r o b a r d z o w y s o k i e j r o z d z i e l c z o [c i ) .
r o z d z i a l _ 0 3 / 1 3 _ f l o a t i n g _ n a v _ 1 / s c r o l l . c s s ( f r a g m e n t )
# n a v i g a t i o n {
p o s i t i o n : r e l a t i v e ;
}
# c o n t e n t {
h e i g h t : 2 0 0 0 p x ;
}
T e r a z m o |e m y z a j s i n a s z p By w a j c n a w i g a c j . N a p i e r w s z y r z u t o k a z a d a n i e m o |e s i w y d a
b a n a l n i e p r o s t e : w y s t a r c z y o d p o w i e d n i o z a r e a g o w a n a z d a r z e n i e p r z e w i j a n i a , u s t a w i a j c w a r t o [
t o p e l e m e n t u n a w i g a c j i :
r o z d z i a l _ 0 3 / 1 3 _ f l o a t i n g _ n a v _ 1 / s c r i p t . j s ( f r a g m e n t )
$ ( w i n d o w ) . s c r o l l ( f u n c t i o n ( ) {
$ ( ' # n a v i g a t i o n ' ) . c s s ( ' t o p ' , $ ( d o c u m e n t ) . s c r o l l T o p ( ) ) ;
} ) ;
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 7 5
P r z e t e s t u j t e n k o d w p r z e g l d a r c e . Z a u w a |y s z , |e c e l z o s t a B o s i g n i t y : p o p r z e w i n i c i u s t r o n y p a -
n e l n a w i g a c y j n y z o s t a j e p r z e n i e s i o n y w e w Ba [c i w e m i e j s c e . S k d w i e , g d z i e m a s i u s t a w i ? Z a p y -
t a l i [m y o t o z a p o m o c m e t o d y s c r o l l T o p ( ) . M e t o d a t a z w r a c a p o Bo |e n i e p r z e w i j a n e g o e l e m e n t u ,
w t y m p r z y p a d k u c a Be g o d o k u m e n t u : $ ( d o c u m e n t ) . s c r o l l T o p ( ) . T o j e s t p o z y c j a l e w e g o g ó r n e g o
w i e r z c h o Bk a o k n a p r z e g l d a r k i w z g l d e m d o k u m e n t u .
O c z y w i [c i e w s z y s t k o d z i a Ba , a l e j e s t t o n i e z b y t e l e g a n c k i e : m e n u g w a Bt o w n i e s k a c z e n a w Ba [c i w e
m i e j s c e , p r z e z c o p r e z e n t u j e s i m a Bo a t r a k c y j n i e . P o w ó d t e g o s t a n u r z e c z y p o w i n i e n b y o c z y w i -
s t y , j e [l i u w a |n i e p r z e a n a l i z o w a Be [ p i e r w s z y p r z y k Ba d o b s Bu g i z d a r z e n i a p r z e w i j a n i a : p r z y k a |d e j
p r ó b i e p r z e w i n i c i a o k n a p r z e g l d a r k a o d p a l a m n ó s t w o z d a r z e D p r z e w i j a n i a . K a |d e z n i c h z m u -
s z a m e n u d o z m i a n y p o z y c j i , d l a t e g o n i e m a c o s i d z i w i , |e n i e d z i a Ba t o p By n n i e .
W i e m y j u |, w j a k i s p o s ó b p o w s t r z y m a a n i m a c j e p r z e d k o l e j k o w a n i e m ( p a t r z p u n k t A n i m o w a -
n a n a w i g a c j a ) : s Bu |y d o t e g o m e t o d a s t o p ( ) . T o p o z w o l i n a m o p a n o w a s z a r p a n i e , a l e n a s z e f e k t
n a d a l j e s t d a l e k i o d d o s k o n a Bo [c i . M o |e w a r t o b y w z b o g a c i g o a n i m a c j z o d r o b i n e l e g a n c k i e j
d y n a m i k i ? Z r o b i m y t o w n a s t p u j c y s p o s ó b :
r o z d z i a l _ 0 3 / 1 4 _ f l o a t i n g _ n a v _ 2 / s c r i p t . j s ( f r a g m e n t )
$ ( w i n d o w ) . s c r o l l ( f u n c t i o n ( ) {
$ ( ' # n a v i g a t i o n ' )
. s t o p ( )
. a n i m a t e ( { t o p : $ ( d o c u m e n t ) . s c r o l l T o p ( ) } , ' s l o w ' , ' e a s e O u t B a c k ' ) ;
} ) ;
R ó |n i c a j e s t o g r o m n a , a z o s t a Ba u z y s k a n a z a p o m o c t a k n i e w i e l k i e j i l o [c i k o d u !
P r z e w i j a n i e d o k u m e n t u
G d y n a j e d n e j s t r o n i e z n a j d u j e s i d u |a l i c z b a i n f o r m a c j i , c z s t o s t o s u j e s i z b i ó r o d n o [n i k ó w
w e w n t r z n y c h u m i e s z c z o n y c h n a p o c z t k u d o k u m e n t u .
T e o d n o [n i k i p r z e n o s z u |y t k o w n i k a d o o d p o w i e d n i e g o m i e j s c a d o k u m e n t u . W p u n k c i e d o c e -
l o w y m c z s t o u m i e s z c z a s i o d n o [n i k p r z e n o s z c y n a p o c z t e k d o k u m e n t u , |e b y u |y t k o w n i k m ó g B
w y b r a i n n p o z y c j z m e n u . D o d a j m y t a k i m e c h a n i z m n a n a s z e j s t r o n i e .
N a p o c z t e k d o s t o p k i d o k u m e n t u d o d a m y o d n o [n i k p r z e n o s z c y n a g ó r s t r o n y . W t y m c e l u
w y s t a r c z y u s t a w i a d r e s o d n o [n i k a ( a t r y b u t h r e f ) n a w a r t o [ # .
C h c i e l i b y [m y , |e b y w e f e k c i e k l i k n i c i a o d n o [n i k a s t r o n a p By n n i e p r z e w i n Ba s i n a p o c z t e k .
D o t e g o s Bu |y a t r y b u t s c r o l l T o p , k t ó r y p o d a m y m e t o d z i e a n i m a t e ( ) . C h c e m y t e | a n u l o w a d o m y [l n e
d z i a Ba n i e o d n o [n i k a , w p r z e c i w n y m r a z i e p r z e g l d a r k a p r z e n i e s i e u |y t k o w n i k a n a p o c z t e k s t r o -
n y , z a n i m z d |y m y w y k o n a a n i m a c j . J e [l i s t a w i a s z w j z y k u J a v a S c r i p t p i e r w s z e k r o k i , z d r a -
d z i m y C i , j a k t o z r o b i : k a |d a f u n k c j a o b s Bu g i z d a r z e n i a ( w t y m k l i k n i c i a p r z y c i s k u ) m o |e z w r ó -
c i w a r t o [ f a l s e , c o s p o w o d u j e a n u l o w a n i e o r y g i n a l n e g o d z i a Ba n i a z w i z a n e g o z e z d a r z e n i e m :
$ ( ' a [ h r e f = # ] ' ) . c l i c k ( f u n c t i o n ( ) {
$ ( ' h t m l ' ) . a n i m a t e ( { s c r o l l T o p : 0 } , ' s l o w ' ) ;
r e t u r n f a l s e ; / / Z w r ó c e n i e f a l s e a n u l u j e d o m y [l n e d z i a Ba n i e z w i z a n e z k l i k n i c i e m
}
P o l e k s i |k
K u p k s i |k
7 6 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
W p o w y |s z y m k o d z i e z n a j d z i e m y o b s Bu g n o w e g o t y p u s e l e k t o r a : s e l e k t o r a a t r y b u t u . W a r u n e k
z w i z a n y z a t r y b u t e m u m i e s z c z a s i w n a w i a s a c h k w a d r a t o w y c h ( [ ] ) , c o p o z w a l a o g r a n i c z y s e -
l e k t o r d o e l e m e n t ó w , k t ó r y c h w y b r a n e a t r y b u t y s p e Bn i a j p e w n e w a r u n k i . W n a s z y m p r z y k Ba d z i e
s z u k a m y t y l k o t a k i c h e l e m e n t ó w a , k t ó r y c h a t r y b u t h r e f m a w a r t o [ # .
T e n k o d d z i a Ba i j e s t d o [ c z y t e l n y o r a z p r o s t y , a l e n i e s t e t y m a p e w n s u b t e l n w a d . J e [l i p r z e -
g l d a r k a u |y t k o w n i k a d z i a Ba w t r y b i e q u i r k s , s e l e k t o r $ ( ' h t m l ' ) n i e b d z i e d z i a Ba B. J e [l i n i e w i e s z ,
c o t o j e s t t r y b q u i r k s , p r z e c z y t a j p o d r c z n i k d o C S S w s e r w i s i e S i t e P o i n t 8 . S t r o n y W W W p o w i n -
n o s i t w o r z y w t a k i s p o s ó b , a b y p r z e g l d a r k a d z i a Ba Ba w t r y b i e s t a n d a r d o w y m , a l e c z a s e m z d a -
r z a s i p o t r z e b a p r a c y z e s t a r y m k o d e m , w p r z y p a d k u k t ó r e g o n i e m o |e m y s o b i e p o z w o l i n a t a k i
l u k s u s . A b y p o w y |s z y k o d z a d z i a Ba B w t r y b i e q u i r k s , m u s i m y u |y s e l e k t o r a $ ( ' b o d y ' ) . M o |e m y
r ó w n i e | u |y s e l e k t o r a $ ( ' h t m l , b o d y ' ) , c o p o z w a l a s i u p e w n i , |e k o d z a d z i a Ba w k a |d y m
z t r y b ó w p r a c y p r z e g l d a r k i . N i e s t e t y , t o o s t a t n i e r o z w i z a n i e s p r a w i a p r o b l e m y w n i e k t ó r y c h w e r -
s j a c h p r z e g l d a r k i O p e r a , k t ó r a ( z g o d n e z l o g i k ) p r ó b u j e w t y m s a m y m m o m e n c i e p r z e w i n
o b y d w a e l e m e n t y .
M a s z p r a w o s i o b u r z y : P r z e c i e | j Q u e r y m i a Bo r o z w i z y w a p r o b l e m y n i e k o m p a t y b i l n o [c i
p r z e g l d a r e k ! . W r z e c z y w i s t o [c i t o p r a w d a w w i k s z o [c i p r z y p a d k ó w . T e n j e d n a k j e s t n i e c o
s u b t e l n i e j s z y i n i e z o s t a B r o z w i z a n y w p o d s t a w o w e j w e r s j i j Q u e r y . N a s z c z [c i e p r o b l e m j e s t d o [
p r o s t y d o o b e j [c i a . C o w i c e j , k t o [ j u | o t o z a d b a B i z a i m p l e m e n t o w a B r o z w i z a n i e ( d o d a j c g r a t i s
m n ó s t w o c i e k a w y c h f u n k c j i z w i z a n y c h z p r z e w i j a n i e m ) w p o s t a c i w t y c z k i S c r o l l T o .
W t y c z k a S c r o l l T o , d o s t p n a w r e p o z y t o r i u m w t y c z e k 9 , z a w i e r a m e c h a n i z m y s Bu |c e d o p r z e w i j a -
n i a d o k u m e n t u i e l e m e n t ó w . Z n a j d z i e m y w n i e j n a r z d z i a w z u p e Bn o [c i w y s t a r c z a j c e d o r e a l i z a -
c j i w s z e l k i c h p o t r z e b z w i z a n y c h z p r z e w i j a n i e m , j a k i e n a p o t k a l i [m y d o t e j p o r y .
P o p o b r a n i u i z a i m p o r t o w a n i u w t y c z k i m o |e m y p o p r a w i n a s z f u n k c j o b s Bu g i k l i k n i c i a o d n o -
[n i k a w s p o s ó b n i e w r a |l i w y n a b Bd y w r ó |n y c h w e r s j a c h p r z e g l d a r e k :
r o z d z i a l _ 0 3 / 1 5 _ p a g e _ s c r o l l / s c r i p t . j s ( f r a g m e n t )
$ ( ' a [ h r e f = # ] ' ) . c l i c k ( f u n c t i o n ( ) {
$ . s c r o l l T o ( 0 , ' s l o w ' ) ;
r e t u r n f a l s e ;
} ) ;
P o w y |s z a s k Ba d n i a z a p e w n e w y g l d a n i e c o d z i w n i e , p o n i e w a | w y w o Bu j e m y m e t o d s c r o l l T o
b e z p o [r e d n i o z a l i a s u f u n k c j i j Q u e r y ( ) . W t y c z k a d z i a Ba w s p o s ó b i n t e l i g e n t n y i w i e , |e w t a k i m
w y w o Ba n i u m a p r z e w i n c a By d o k u m e n t . J e [l i c h c e m y p r z e w i n j e d e n z e l e m e n t ó w d o k u m e n t u ,
z a s t o s u j e m y t r a d y c y j n e w y w o Ba n i e z s e l e k t o r e m :
$ ( ' d i v # s c r o l l y ' ) . s c r o l l T o ( 0 , ' s l o w ' ) .
W t y c z k a S c r o l l T o m a m n ó s t w o o p c j i , a j e j d z i a Ba n i e n i e o g r a n i c z a s i d o p r z e w i j a n i a o b i e k t ó w
o w a r t o [c i b e z w z g l d n e . M o |n a p r z e k a z a w a r t o [ w z g l d n ( n p . + = 5 0 p x ) , e l e m e n t D O M ( s t r o n a
8
h t t p : / / r e f e r e n c e . s i t e p o i n t . c o m / c s s / d o c t y p e s n i f f i n g
9
h t t p : / / p l u g i n s . j q u e r y . c o m / p r o j e c t / S c r o l l T o
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 7 7
z o s t a n i e p r z e w i n i t a d o t e g o e l e m e n t u ) , s e l e k t o r , l i t e r a B o b i e k t u d e f i n i u j c y w s p ó Br z d n e x i y l u b
s Bo w o k l u c z o w e m a x , c o s p o w o d u j e p r z e w i n i c i e d o k u m e n t u d o k o Dc a . P r z e w i j a m o |n a w p o -
z i o m i e i w p i o n i e , d o s t p n e s t e | o p c j e p o z w a l a j c e p r e c y z y j n i e d o s t o s o w a m i e j s c e d o c e l o w e .
I n f o r m a c j e n a t e m a t w s z y s t k i c h d o s t p n y c h o p c j i m o |n a z n a l e z n a s t r o n i e d o m o w e j w y c z k i 1 0 .
M o d y f i k a c j a p a s k a p r z e w i j a n i a
K l i e n t n e r w o w y m k r o k i e m z b l i |a s i d o T w o j e g o b i u r k a i z e z m a r t w i o n m i n p o k a z u j e a b s o -
l u t n i e o s t a t e c z n y , z a t w i e r d z o n y p o d p i s a m i p r o j e k t s t r o n y . A l e t e p a s k i p r z e w i j a n i a n i e b d t a k
w y g l d a , p r a w d a ? Z n a c z y , o n e s t a k i e s z a r e i b r z y d k o w y g l d a j .
Z r e g u By o d r o z p o c z c i a p r o j e k t u m i j a n i e w i e l e c z a s u , g d y k l i e n t p r o s i o z m i a n s y s t e m o w y c h p a -
s k ó w p r z e w i j a n i a n a n i e s t a n d a r d o w e , s z c z e g ó l n i e j e [l i c h o d z i o e l e m e n t y w e w n t r z n e , j a k p r z e -
w i j a n e p a n e l e d i v . T a k i e z l e c e n i e w y d a j e s i d o [ d o b r z e u z a s a d n i o n e , a l e n a l e |y z d a s o b i e s p r a -
w z p e w n y c h i m p l i k a c j i z w i z a n y c h z u |y t e c z n o [c i s t r o n y .
U |y t k o w n i c y s t r o n W W W m a j p e w n e n a w y k i , p r z y z w y c z a j e n i a , k t ó r e u Ba t w i a j i m k o r z y s t a n i e
z i n t e r f e j s u . N i e s t a n d a r d o w e i m p l e m e n t a c j e m o g w p r o w a d z i z a m i e s z a n i e , s z c z e g ó l n i e j e [l i d z i a Ba j
i n a c z e j o d s t a n d a r d o w y c h e l e m e n t ó w , k t ó r e z a s t p u j . I g n o r o w a n i e p r z y z w y c z a j e D u |y t k o w n i k ó w
m o |e p r o w a d z i d o i c h f r u s t r a c j i , d l a t e g o t e g o t y p u m o d y f i k a c j e e l e m e n t ó w i n t e r f e j s u u |y t k o w -
n i k a n a l e |y p r z e p r o w a d z a z e s z c z e g ó l n o s t r o |n o [c i .
M i m o t o w a r t o m i e [w i a d o m o [, |e c e l n i e z m o d y f i k o w a n y e l e m e n t i n t e r f e j s u m o |e s t a s i k l u -
c z o w y m e l e m e n t e m w y r ó |n i a j c y m s t r o n w [r ó d k o n k u r e n c j i . Z t e g o p o w o d u z a w s z e n a l e |y r o z w a -
|y w a d y i z a l e t y t a k i c h m o d y f i k a c j i z p u n k t u w i d z e n i a u |y t k o w n i k a k o Dc o w e g o . W n a s z y m
p r z y p a d k u : k l i e n t n a s z p a n . R o b i m y !
N i e m a j e d n a k p o t r z e b y b u d o w a n i a p a s k a p r z e w i j a n i a o d z e r a : t e g o t y p u e l e m e n t y i n t e r f e j s u s
s k o m p l i k o w a n e w k o n s t r u k c j i , a k l i e n t n i e b d z i e s z c z [l i w y , g d y o k a |e s i , |e d Bu g i e g o d z i n y p o -
[w i c o n e n a t w o r z e n i e p a s k a p r z e w i j a n i a p o s z By n a m a r n e , b o c o [ n i e d z i a Ba , j a k n a l e |y . S z c z e g ó l -
n i e j e [l i d o d y s p o z y c j i m a m y d o s k o n a B w t y c z k , k t ó r a r e a l i z u j e t o z a d a n i e : j S c r o l l P a n e .
W t y c z k a j S c r o l l P a n e s Bu |y d o i m p l e m e n t o w a n i a n i e s t a n d a r d o w y c h p a s k ó w p r z e w i j a n i a , k t ó r e
m o |n a u m i e [c i w d o w o l n y m e l e m e n c i e o r o z m i a r z e p r z e k r a c z a j c y m r o z m i a r k o n t e n e r a . W t y c z k t
m o |n a z n a l e z w d o m y [l n y m r e p o z y t o r i u m j Q u e r y , a l e j e j b a r d z i e j a k t u a l n a w e r s j a j e s t d o s t p n a
d o p o b r a n i a w s e r w i s i e G o o g l e C o d e 1 1 .
D o p o p r a w n e g o d z i a Ba n i a w t y c z k i n i e z b d n e s d w a p l i k i : k o d J a v a S c r i p t z a p i s a n y w p l i k u
j S c r o l l P a n e - 1 . 2 . 3 . m i n . j s o r a z p l i k u C S S j S c r o l l P a n e . c s s . P l i k C S S d e f i n i u j e d o m y [l n e s t y l e p a s k ó w
i s t a n o w i d o b r y p u n k t w y j [c i a d o i m p l e m e n t a c j i w Ba s n e g o s t y l u . W y s t a r c z y r o z s z e r z y l u b z m o -
d y f i k o w a t e s t y l e , z m i e n i a j c k o l o r y i g r a f i k i , |e b y w p r o s t y s p o s ó b s t w o r z y w Ba s n y m o t y w w i -
z u a l n y . W n a s z y c h p r z y k Ba d a c h w y k o r z y s t a m y d o m y [l n e s t y l e : e s t e t y c z n y s z a r y k o l o r , k t ó r y p a -
s u j e d o w i k s z o [c i s t r o n W W W ( c o w i d a n a r y s u n k u 3 . 6 ) .
1 0
h t t p : / / f l e s l e r . b l o g s p o t . c o m / 2 0 0 7 / 1 0 / j q u e r y s c r o l l t o . h t m l
1 1
h t t p : / / c o d e . g o o g l e . c o m / p / j s c r o l l p a n e /
P o l e k s i |k
K u p k s i |k
7 8 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
R y s u n e k 3 . 6 . Z m o d y f i k o w a n y p a s e k p r z e w i j a n i a
Z m o d y f i k o w a n e p a s k i p r z e w i j a n i a m o |n a u s t a w i w d o w o l n y m e l e m e n c i e s t r o n y , w y s t a r c z y w y w o Ba
n a j e g o s e l e k t o r z e m e t o d j S c r o l l P a n e ( ) . P a r a m e t r y w t e j m e t o d z i e s o p c j o n a l n e , a l e m a m y i c h
d o d y s p o z y c j i k i l k a n a [c i e . S Bu | o n e d o d e f i n i o w a n i a s t r z a Be k p a s k a p r z e w i j a n i a c z y d o u s t a w i a -
n i a p a s k a p o l e w e j l u b p r a w e j s t r o n i e p a n e l u . P e Bn l i s t p a r a m e t r ó w m o |n a z n a l e z n a s t r o n i e
W W W w t y c z k i 1 2 . W n a s z y m p r z y k Ba d z i e u s t a w i m y m a r g i n e s m i d z y z a w a r t o [c i a p a s k i e m
p r z e w i j a n i a , s z e r o k o [ p a s k a i u k r y j e m y g ó r n o r a z d o l n s t r z a Bk .
r o z d z i a l _ 0 3 / 1 6 _ c u s t o m _ s c r o l l b a r / s c r i p t . j s ( f r a g m e n t )
$ ( ' # f i n e _ p r i n t ' ) . j S c r o l l P a n e ( {
s c r o l l b a r W i d t h : 1 0 ,
s c r o l l b a r M a r g i n : 1 0 ,
s h o w A r r o w s : f a l s e
} ) ;
N a s z n o w y p a s e k p r z e w i j a n i a w y g l d a i d z i a Ba d o s k o n a l e , a l e Ba t w o z a u w a |y , |e n i e o b s Bu g u j e
p r z e w i j a n i a z a p o m o c r o l k i m y s z y . T o c e l o w y z a b i e g , o b s Bu g a r o l k i z o s t a Ba p o m i n i t a w j Q u e r y
w c e l u o g r a n i c z e n i a r o z m i a r u b i b l i o t e k i . I s t n i e j e w t y c z k a , k t ó r a u z u p e Bn i a t e n b r a k 1 3 , a b i b l i o t e k a
j S c r o l l P a n e z o s t a Ba n a p i s a n a z m y [l o t e j w t y c z c e . D z i k i t e m u d o o b s Bu g i r o l k i w y s t a r c z y z a i m -
p o r t o w a w t y c z k o b s Bu g i r o l k i , a j S c r o l l P a n e w y k r y j e t o a u t o m a t y c z n i e i b d z i e o b s Bu g i w a r o l k
d o p r z e w i j a n i a p a n e l i .
Z m i a n a r o z m i a r u
Z m i a n a r o z m i a r u m o |e d o t y c z y w i e l u r ó |n y c h z a g a d n i e D. P i e r w s z a r z e c z , j a k a p r z y c h o d z i d o
g Bo w y , t o z m i a n a r o z m i a r u o k n a p r z e g l d a r k i ( e f e k t , k t ó r y c z s t o s p r a w i a p r o b l e m y p r o g r a m i -
s t o m s t r o n W W W ) . C z s t o s t o s u j e s i t e | z m i a n r o z m i a r u o k i e n w e w n t r z a p l i k a c j i o r a z z m i a n
r o z m i a r ó w i l u s t r a c j i l u b i n n y c h e l e m e n t ó w .
B i b l i o t e k a j Q u e r y o b s Bu g u j e m e c h a n i z m g r o m a d z e n i a i n f o r m a c j i o z m i a n i e r o z m i a r u o k n a w w y n i k u
i n t e r a k c j i z u |y t k o w n i k i e m , a d z i k i j Q u e r y U I m a m y m o |l i w o [ w p By w a n i a n a r o z m i a r y d o w o l -
n y c h e l e m e n t ó w n a s t r o n i e . W y p r ó b u j m y t o !
1 2
h t t p : / / w w w . k e l v i n l u c k . c o m / a s s e t s / j q u e r y / j S c r o l l P a n e / j S c r o l l P a n e . h t m l
1 3
h t t p : / / p l u g i n s . j q u e r y . c o m / p r o j e c t / m o u s e w h e e l
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 7 9
Z d a r z e n i e z m i a n y r o z m i a r ó w
Z d a r z e n i e r e s i z e j e s t z a i m p l e m e n t o w a n e w p o d s t a w o w e j b i b l i o t e c e j Q u e r y . J e s t o d p a l a n e p o
z m i a n i e r o z m i a r u o k n a d o k u m e n t u . I s t n i e j e k i l k a p o w o d ó w , d l a k t ó r y c h p o w i n n i [m y o b s Bu g i w a
t o z d a r z e n i e . Z a n i m z a j m i e m y s i p r a k t y c z n y m p r z y k Ba d e m , z o b a c z m y , j a k o n o d z i a Ba :
r o z d z i a l _ 0 3 / 1 7 _ r e s i z e _ e v e n t / s c r i p t . j s ( f r a g m e n t )
$ ( w i n d o w ) . r e s i z e ( f u n c t i o n ( ) {
a l e r t ( " Z m i e n i e r o z m i a r o k n a ! " ) ;
} ) ;
O t w ó r z p l i k i n d e x . h t m l w p r z e g l d a r c e i s p r ó b u j z m i e n i r o z m i a r o k n a . Z a k a |d y m r a z e m z o s t a -
n i e w y [w i e t l o n y k o m u n i k a t . W y p r o w a d z a n i e u |y t k o w n i k ó w z r ó w n o w a g i p r z y k a |d e j p r ó b i e
z m i a n y r o z m i a r ó w o k n a p r z e g l d a r k i z p e w n o [c i n i e p r z y c z y n i s i d o z w y c i s t w a w k o n k u r s i e
n a n a j b a r d z i e j p r z y j a z n u |y t k o w n i k o m a p l i k a c j W W W , z a t e m s p r ó b u j m y w y k o r z y s t a t o z d a -
r z e n i e d o c z e g o [ b a r d z i e j p r a k t y c z n e g o .
P r z e c z a n i e u k a d u
J e [l i p r a c o w a Be [ z e s t y l a m i C S S p r z e z j a k i [ c z a s , z p e w n o [c i z d a j e s z s o b i e s p r a w , |e t r w a n i e -
c i c h n c a d e b a t a n a t e m a t t e g o , c o j e s t l e p s z e : p By w a j c e c z y s z t y w n e u k Ba d y . Z j e d n e j s t r o n y , p By w a j c e
u k Ba d y w y k o r z y s t u j e k r a n w m a k s y m a l n y m s t o p n i u , n i e z a l e |n i e o d r o z m i a r ó w o k n a p r z e g l d a r -
k i , z d r u g i e j s t r o n y , u k Ba d y s z t y w n e p o z w a l a j n a t w o r z e n i e p r e c y z y j n y c h p r o j e k t ó w g r a f i c z n y c h ,
w y p o z y c j o n o w a n y c h c o d o p i k s e l a , k t ó r e n i e b d s i r o z j e |d |a By n i e z a l e |n i e o d r o z m i a r u o k n a .
W p r z y p a d k u s e r w i s u S t a r T r a c k r ! m o |e m y z a o f e r o w a c o [ p o [r e d n i e g o : z a p r o j e k t o w a d w a o s o b n e
s z t y w n e u k Ba d y i p r z e Bc z a s i m i d z y n i m i w z a l e |n o [c i o d r o z m i a r ó w o k n a .
Z a c z y n a m y ! D o m y [l n a s t r o n a S t a r T r a c k r ! , z k t ó r p r a c o w a l i [m y d o t y c h c z a s , m a s k r o m n e 6 5 0 p i k s e l i
s z e r o k o [c i . N a s z y m p i e r w s z y z a d a n i e m b d z i e n a p i s a n i e s t y l ó w , k t ó r e b d u |y w a n e w p r z y p a d k u ,
g d y o k n o b d z i e m i a Bo s z e r o k o [ c o n a j m n i e j 8 5 0 p i k s e l i :
r o z d z i a l _ 0 3 / 1 8 _ l a y o u t _ s w i t c h e r / w i d e . c s s
b o d y # c o n t a i n e r {
w i d t h : 8 5 0 p x ;
}
b o d y # c o n t a i n e r p {
w i d t h : 6 5 0 p x ;
}
b o d y # h e a d e r {
b a c k g r o u n d - i m a g e : u r l ( ' . . / . . / c s s / i m a g e s / h e a d e r - c o r n e r s - w i d e . p n g ' ) ;
}
b o d y # c e l e b s t a b l e {
w i d t h : 6 5 0 p x ;
m a r g i n - l e f t : 5 p x ;
}
W a r t o z w r ó c i u w a g n a t o , |e n a p o c z t k u k a |d e j r e g u By z a s t o s o w a l i [m y p o z o r n i e z b d n d e k l a r a c j
b o d y . C h o d z i j e d n a k o t o , |e d z i k i b a r d z i e j s p e c y f i c z n e j d e k l a r a c j i s e l e k t o r a C S S t e r e g u By b d m i a By
p i e r w s z e Ds t w o n a d b a r d z i e j o g ó l n y m i r e g u Ba m i z d e f i n i o w a n y m i w p o d s t a w o w y m a r k u s z u s t y l ó w .
P o l e k s i |k
K u p k s i |k
8 0 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
W n a s t p n y m k r o k u m u s i m y n a p i s a k o d j Q u e r y , k t ó r y d o d a l u b u s u n i e n a s z a r k u s z s t y l ó w . W y -
s t a r c z y s p r a w d z i , c z y e l e m e n t b o d y m a s z e r o k o [ w i k s z n i | 9 0 0 p x , a j e [l i t a k d o p i s a a r k u s z
s t y l ó w d o e l e m e n t u h e a d l u b u s u n g o ( w p r z e c i w n y m r a z i e ) .
r o z d z i a l _ 0 3 / 1 8 _ l a y o u t _ s w i t c h e r / s c r i p t . j s ( f r a g m e n t )
i f ( $ ( ' b o d y ' ) . w i d t h ( ) > 9 0 0 ) {
$ ( ' < l i n k r e l = " s t y l e s h e e t " h r e f = " w i d e . c s s " t y p e = " t e x t / c s s " / > ' )
. a p p e n d T o ( ' h e a d ' ) ;
} e l s e {
$ ( ' l i n k [ h r e f = w i d e . c s s ] ' ) . r e m o v e ( ) ;
}
T u t a j j e d n a k n a t r a f i a m y n a p e w i e n p r o b l e m . T e n k o d m u s i b y w y w o Ba n y w o b s Bu d z e d w ó c h z d a r z e D:
p o z a Ba d o w a n i u s t r o n y i p o z m i a n i e r o z m i a r ó w o k n a . K u s z c a m o |e w y d a s i o p c j a s k o p i o w a n i a
i d e n t y c z n e g o k o d u w d w a m i e j s c a i p o z b y c i a s i p r o b l e m u .
O p r z y j s i t e j p o k u s i e ! K o p i o w a n i e k o d u t o z a w s z e z By p o m y s B. W y o b r a z s o b i e , |e p o k i l k u m i e s i c a c h
o k a |e s i , |e 9 0 0 p i k s e l i t o z Ba w a r t o [ g r a n i c z n a i u k Ba d n a l e |y p r z e Bc z a n a g r a n i c y 1 0 0 0 p i k s e l i .
O d s z u k u j e s z k o d , z m i e n i a s z w a r t o [ i p r z e Ba d o w u j e s z s t r o n . W s z y s t k o w y d a j e s i w p o r z d k u ,
a l e t a k n i e j e s t , b o p o p r a w i Be [ k o d t y l k o d l a m e t o d y o b s Bu g i z d a r z e n i a d o c u m e n t - r e a d y , a z a p o -
m n i a Be [, |e i d e n t y c z n y k a w a Be k k o d u z n a j d u j e s i w o b s Bu d z e z d a r z e n i a r e s i z e d o k u m e n t u . T e g o
t y p u p r o b l e m j e s t b a r d z o p r a w d o p o d o b n y i m b a r d z i e j s k o m p l i k o w a n y s t a j e s i k o d , t y m w i k s z e
r y z y k o i t y m t r u d n i e j w y k r y , g d z i e t k w i p r z y c z y n a b Bd u .
N a s z c z [c i e p r a w i e k a |d y j z y k p r o g r a m o w a n i a o b s Bu g u j e m e c h a n i z m y p o m o c n e w t e g o t y p u
s y t u a c j a c h i J a v a S c r i p t ( a d z i k i t e m u j Q u e r y ) n i e j e s t t u w y j t k i e m . D o t y c h c z a s d o o b s Bu g i z d a -
r z e D w y k o r z y s t y w a l i [m y f u n k c j e a n o n i m o w e , a l e t y m r a z e m s t w o r z y m y f u n k c j n a z w a n :
r o z d z i a l _ 0 3 / 1 8 _ l a y o u t _ s w i t c h e r / s c r i p t . j s ( f r a g m e n t )
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
s t y l e s h e e t T o g g l e ( ) ;
$ ( w i n d o w ) . r e s i z e ( s t y l e s h e e t T o g g l e ) ;
} ) ;
f u n c t i o n s t y l e s h e e t T o g g l e ( ) {
i f ( $ ( ' b o d y ' ) . w i d t h ( ) > 9 0 0 ) {
$ ( ' < l i n k r e l = " s t y l e s h e e t " h r e f = " w i d e . c s s " t y p e = " t e x t / c s s " / > ' )
. a p p e n d T o ( ' h e a d ' ) ;
} e l s e {
$ ( ' l i n k [ h r e f = w i d e . c s s ] ' ) . r e m o v e ( ) ;
}
}
N a s z e j f u n k c j i n a d a l i [m y n a z w s t y l e s h e e t T o g g l e i w y k o r z y s t u j e m y j d w u k r o t n i e : r a z w o b s Bu -
d z e z d a r z e n i a z a Ba d o w a n i a d o k u m e n t u i r a z w o b s Bu d z e z m i a n y r o z m i a r u . N a l e |y z w r ó c i u w a g
n a t o , |e w d e k l a r a c j i o b s Bu g i z d a r z e n i a w y s t a r c z y p r z e k a z a n a z w f u n k c j i : w t y m p r z y p a d k u n i e
d e k l a r u j e m y k o d u f u n k c j i , n i e n a l e |y z a t e m u |y w a s Bo w a k l u c z o w e g o f u n c t i o n a n i z n a k ó w n a w i a s ó w
k l a m r o w y c h c z y o k r g By c h .
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 8 1
E l e m e n t y o b s u g u j c e z m i a n r o z m i a r u
B i b l i o t e k a j Q u e r y U I z a w i e r a w t y c z k R e s i z a b l e , k t ó r a w c h o d z i w s k Ba d g r u p y w t y c z e k z w i z a -
n y c h z i n t e r a k c j . W t y c z k a t a u m o |l i w i a d o d a n i e u c h w y t u z m i a n y w y m i a r ó w d o e l e m e n t ó w
( p r a w y d o l n y w i e r z c h o Be k ) . D z i k i t e m u u c h w y t o w i u |y t k o w n i k m o |e r o z c i g a i z m n i e j s z a
e l e m e n t y z a p o m o c m y s z y ( t a k s a m o j a k o k n a s y s t e m u o p e r a c y j n e g o ) . J a k w i k s z o [ e l e m e n t ó w
w c h o d z c y c h w s k Ba d j Q u e r y U I , w t y c z k a R e s i z a b l e p o z w a l a n a s z e r o k i z a k r e s k o n f i g u r a c j i i j e s t
p r o s t a w u |y c i u . J e [l i w y k o r z y s t a Be [ p e Bn w e r s j j Q u e r y U I , m o |l i w o [c i w t y c z k i R e s i z a b l e s g o -
t o w e d o u |y c i a . J e [l i n i e , w r ó d o k o n f i g u r a t o r a w Ba s n e j w e r s j i j Q u e r y U I i w y b i e r z e l e m e n t R e s i z a b l e .
D o d z i a Ba n i a w t y c z k a t a p o t r z e b u j e t y l k o b i b l i o t e k i p o d s t a w o w e j i m o t y w u .
U |y c i e w t y c z k i R e s i z a b l e w p o d s t a w o w e j f o r m i e j e s t b a r d z o p r o s t e . P o p r o s t u w y s t a r c z y w y k o n a
m e t o d r e s i z a b l e ( ) n a o d p o w i e d n i m s e l e k t o r z e :
r o z d z i a l _ 0 3 / 1 9 _ r e s i z a b l e _ e l e m e n t s / s c r i p t . j s ( f r a g m e n t )
$ ( ' p ' ) . r e s i z a b l e ( ) ;
J e [l i w y k o n a m y t e n k o d w n a s z y m s e r w i s i e S t a r T r a c k r ! , u z y s k a m y d o [ n i e z w y k By e f e k t : m o |n a
z m i e n i a r o z m i a r k a |d e g o a k a p i t u n a s t r o n i e !
W y g l d a t o d o [ c i e k a w i e : c a Ba s t r o n a s t a Ba s i b a r d z o p l a s t y c z n a . W d o m y [l n y m w y w o Ba n i u
w t y c z k a R e s i z a b l e d o d a j e d o o b i e k t ó w u c h w y t y w p r a w y m d o l n y m w i e r z c h o Bk u . S t y l t y c h
u c h w y t ó w j e s t d o p a s o w a n y d o a k t u a l n e g o m o t y w u j Q u e r y U I , z a t e m j e [l i c h c e s z z m i e n i t e n w y -
g l d , w y b i e r z o d p o w i e d n i m o t y w . D o m y [l n y w y g l d u c h w y t ó w z m i a n y r o z m i a r u j e s t p r z e d s t a -
w i o n y n a r y s u n k u 3 . 7 .
R y s u n e k 3 . 7 . A k a p i t y z m o l i w o c i z m i a n y r o z m i a r u
P r z y j r z y j m y s i p r o s t e j s y t u a c j i , w k t ó r e j t a f u n k c j a b a r d z o s i p r z y d a j e : z m i a n i e r o z m i a r u p ó l
t e x t a r e a .
P o l e k s i |k
K u p k s i |k
8 2 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
P o l e t e x t a r e a z m o l i w o c i z m i a n y r o z m i a r u
C z a s e m c h s t w o r z e n i a u |y t e c z n e g o i n t e r f e j s u s t o i w s p r z e c z n o [c i z p o t r z e b p i k n e g o i z r ó w n o w a -
|o n e g o p r o j e k t u g r a f i c z n e g o . D z i k i j Q u e r y m o |e m y z a j s i r ó w n i e | t y m p r o b l e m e m i n i e c o
u s p r a w n i a p l i k a c j n a p o l u u |y t e c z n o [c i .
J e d n y m z o b s z a r ó w , w k t ó r y c h f o r m a i f u n k c j o n a l n o [ c z s t o s i [c i e r a j , s f o r m u l a r z e H T M L .
J e d n y m z p o w o d ó w t e g o s t a n u r z e c z y j e s t t o , |e u |y t k o w n i c y s t r o n y W W W m a j c z s t o o d m i e n n e
w y m a g a n i a . Z a Bó |m y n a p r z y k Ba d , |e u d o s t p n i a m y p o l e t e k s t o w e ( t e x t a r e a ) w f o r m u l a r z u o p i n i i
o s t r o n i e . N i e k t ó r z y u |y t k o w n i c y n i e n a p i s z n i c , i n n i n i e w i e l e , a j e s z c z e i n n i n a p i s z b a r d z o d u |o .
A b y z a c h o w a e l e g a n c k i u k Ba d f o r m u l a r z a , m o |n a n a d a n i e w i e l k i e p o c z t k o w e w y m i a r y p o l u t e k -
s t o w e m u i d a u |y t k o w n i k o w i m o |l i w o [ p o w i k s z e n i a g o w r a z i e p o t r z e b y . D z i k i t e m u u |y t k o w n i k ,
k t ó r y l u b i d u |o p i s a , b d z i e m i a B w r a |e n i e , |e z a c h c a m y g o d o w y p o w i e d z i . O t o s p o s ó b , w j a k i
m o |e m y z r e a l i z o w a t o z a d a n i e z a p o m o c w t y c z k i R e s i z a b l e w c h o d z c e j w s k Ba d j Q u e r y U I :
r o z d z i a l _ 0 3 / 2 0 _ r e s i z a b l e _ t e x t a r e a / s c r i p t . j s ( f r a g m e n t )
$ ( ' t e x t a r e a ' ) . r e s i z a b l e ( {
g r i d : [ 2 0 , 2 0 ] ,
m i n W i d t h : 1 5 3 ,
m i n H e i g h t : 3 0 ,
m a x H e i g h t : 2 2 0 ,
c o n t a i n m e n t : ' p a r e n t '
} ) ;
P o w y |s z y k o d p o w o d u j e , |e p o l a t e k s t o w e t e x t a r e a p o z w a l a j z m i e n i a s w o j e w y m i a r y , t a k s a m o
j a k w p o p r z e d n i m p r z y k Ba d z i e n a s z e a k a p i t y . E f e k t j e s t p o k a z a n y n a r y s u n k u 3 . 8 . W c e l u u d o s k o -
n a l e n i a d z i a Ba n i a e f e k t u o r a z z a d e m o n s t r o w a n i a e l a s t y c z n o [c i w t y c z k i z a s t o s o w a l i [m y d o d a t k o w e
p a r a m e t r y . D o d y s p o z y c j i m a m y m n ó s t w o o p c j i k o n f i g u r a c y j n y c h , z k t ó r y m i m o |n a s i z a p o z n a
w d o k u m e n t a c j i n a s t r o n i e j Q u e r y U I 1 4 .
R y s u n e k 3 . 8 . P o l e t e x t a r e a z o p c j z m i a n y r o z m i a r u
W o p c j a c h z d e f i n i o w a l i [m y m i d z y i n n y m i z a k r e s m o |l i w o [c i r o z c i g a n i a e l e m e n t u : s Bu | d o t e -
g o w Ba [c i w o [c i m i n H e i g h t , m i n W i d t h i m a x H e i g h t . Aa t w o z a u w a |y , |e p o m i n l i [m y w Ba [c i w o [
m a x W i d t h , z a m i a s t n i e j z a s t o s o w a l i [m y p a r a m e t r c o n t a i n m e n t : s Bu |y o n d o o k r e [l e n i a k o n t e n e r a , k t ó r y
b d z i e o g r a n i c z a B r o z m i a r y e l e m e n t u . J a k o w a r t o [c i t e j w Ba [c i w o [c i m o |n a u |y s e l e k t o r a j Q u e r y
a l b o s p e c j a l n e j w a r t o [c i p a r e n t , k t ó r a s p o w o d u j e a u t o m a t y c z n e w y b r a n i e r o d z i c a e l e m e n t u .
1 4
h t t p : / / d o c s . j q u e r y . c o m / U I / A P I / 1 . 7 / R e s i z a b l e
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 8 3
D o d a t k o w o z a s t o s o w a l i [m y a t r y b u t g r i d , k t ó r y o k r e [l a s k o k z m i a n y r o z m i a r u . U w a |a m y , |e t a k a
o p c j a d a j e c i e k a w e w r a |e n i e w z a k r e s i e i n t e g r a c j i z m i a n y r o z m i a r u e l e m e n t u . P a r a m e t r g r i d o k r e [l a
s i w p o s t a c i l i s t y d w u e l e m e n t o w e j : r o z m i a r w p o z i o m i e i w p i o n i e .
J e s z c z e j e d e n p a r a m e t r w y m a g a u w a g i . C h o d z i o h a n d l e s . P a r a m e t r t e n p o z w a l a o k r e [l i w i e r z -
c h o Bk i , w k t ó r y c h z o s t a n u m i e s z c z o n e u c h w y t y z m i a n y r o z m i a r u , a w e f e k c i e w s k a z u j e m o |l i w y
k i e r u n e k t e j z m i a n y . P a r a m e t r h a n d l e s a k c e p t u j e n a s t p u j c e w a r t o [c i : n , e , s , w , n e , s e , s w , n w
i a l l . M o |n a z a s t o s o w a d o w o l n i c h l i c z b , r o z d z i e l a j c j e p r z e c i n k i e m n a p r z y k Ba d { h a n d l e s :
' n ' , ' s e ' } d o d a u c h w y t y n a g ó r n e j k r a w d z i o r a z w p r a w y m d o l n y m w i e r z c h o Bk u .
T e g o t y p u e l e m e n t y s c z s t o s t o s o w a n e w f o r m u l a r z a c h , w k t ó r y c h m o |n a w p r o w a d z a r ó |n
i l o [ t e k s t u .
P o d z i a p a n e l u
M i m o |e z a d b a l i [m y o w Ba [c i w e w y [w i e t l a n i e n o t k i p r a w n e j , a d w o k a t k l i e n t a n a d a l m a r t w i s i o t o , |e
m o |e o n p o n i e [ k o n s e k w e n c j e n i e w Ba [c i w e g o w y e k s p o n o w a n i a r e g u l a m i n u u |y t k o w a n i a s e r w i -
s u . Z p u n k t u w i d z e n i a u |y t e c z n o [c i p r o b l e m p o l e g a n a t y m , |e r e g u l a m i n t o b a r d z o d Bu g i d o k u -
m e n t p o d z i e l o n y n a p o d s e k c j e . N i e m n i e j m u s i m y g o z a p r e z e n t o w a n a s t r o n i e g Bó w n e j . B y m o |e
p o d z i a B p a n e l u p o m o |e r o z w i z a p r o b l e m .
P o d z i a B p a n e l u t o t a k i e l e m e n t i n t e r f e j s u , k t ó r y p o z w a l a u |y t k o w n i k o w i z m i e n i w z a j e m n e p r o -
p o r c j e j e g o e l e m e n t ó w b e z z m i a n y i c h o g ó l n e g o w s p ó l n e g o r o z m i a r u . T e g o t y p u r o z w i z a n i a s
p o w s z e c h n i e s t o s o w a n e w a p l i k a c j a c h t y p u d e s k t o p , a l e w r a z z r o z w o j e m t e c h n o l o g i i s t r o n W W W z a -
c z By z d o b y w a p o p u l a r n o [ r ó w n i e | i w a p l i k a c j a c h i n t e r n e t o w y c h . P r o t o t y p m o |e m y z b u d o w a
z a p o m o c w t y c z k i R e s i z a b l e : z a s y m u l u j e m y k o n t e n e r z a w i e r a j c y w j e d n y m p a n e l u s p i s t r e [c i ,
a w d r u g i m t r e [ r e g u l a m i n u . W y g l d t e g o w i d |e t u p r e z e n t u j e r y s u n e k 3 . 9 .
R y s u n e k 3 . 9 . P i o n o w y p o d z i a p a n e l u
N a r a z i e s k u p i m y s i w y Bc z n i e n a m e c h a n i z m i e z m i a n y r o z m i a r u . D y n a m i c z n e Ba d o w a n i e p o d -
s e k c j i w p a n e l u z r e g u l a m i n e m z o s t a n i e s z c z e g ó Bo w o o m ó w i o n e w r o z d z i a l e 5 .
N a s z d z i e l o n y p a n e l b d z i e s k Ba d a B s i z d w ó c h e l e m e n t ó w d i v r e p r e z e n t u j c y c h k a |d y z p a n e l i
s k Ba d o w y c h , z a g n i e |d |o n y c h w e w n t r z e l e m e n t u k o n t e n e r a o s t a By c h w y m i a r a c h . S p i s t r e [c i b -
d z i e e l e m e n t e m t y p u b l o k o w e g o , d z i k i c z e m u p o z m i a n i e r o z m i a r u u k Ba d n a m s i n i e r o z j e d z i e :
P o l e k s i |k
K u p k s i |k
8 4 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
r o z d z i a l _ 0 3 / 2 1 _ h o r i z o n t a l _ p a n e _ s p l i t t e r / i n d e x . h t m l ( f r a g m e n t )
< d i v i d = " s p l i t t e r " >
< d i v c l a s s = " p a n e " i d = " t o c P a n e " >
< d i v c l a s s = " i n n e r " >
. . .
< / d i v >
< / d i v >
< d i v c l a s s = " p a n e " i d = " c o n t e n t P a n e " >
< d i v c l a s s = " i n n e r " >
. . .
< / d i v >
< / d i v >
< / d i v >
T e r a z d o d a m y n i e c o p r o s t y c h s t y l ó w d o a r k u s z a s p l i t t e r . c s s . J a k w i d a , w y s o k o [ k o n t e n e r a u s t a -
w i l i [m y n a s z t y w n o , a k a |d y z e l e m e n t ó w p o d r z d n y c h b d z i e p o c z t k o w o z a j m o w a B 5 0 % s z e r o -
k o [c i . O c z y w i [c i e p r o p o r c j e p o c z t k o w e m o |n a d o w o l n i e z m i e n i , j e [l i u z n a s z t o z a s t o s o w n e . J e [l i
c h c e s z u |y r a m k i C S S ( b o r d e r ) , z d e f i n i u j j e j w y m i a r y w p i k s e l a c h i z a d b a j o t o , |e b y z g a d z a By s i
o n e z w y m i a r a m i k o n t e n e r a .
r o z d z i a l _ 0 3 / 2 1 _ h o r i z o n t a l _ p a n e _ s p l i t t e r / s p l i t t e r . c s s
# s p l i t t e r {
h e i g h t : 1 5 0 p x ;
m a r g i n - t o p : 3 0 p x ;
m a r g i n - b o t t o m : 5 0 p x ;
}
# s p l i t t e r . p a n e {
w i d t h : 5 0 % ;
h e i g h t : 1 0 0 % ;
f l o a t : l e f t ;
}
# s p l i t t e r h 2 {
m a r g i n - b o t t o m : 0 ;
p a d d i n g - b o t t o m : 0 ;
}
# t o c P a n e {
o v e r f l o w : h i d d e n ;
b a c k g r o u n d : # d 6 d d e 5 u r l ( h a n d l e . p n g ) n o - r e p e a t r i g h t c e n t e r ;
}
# t o c P a n e . i n n e r {
w i d t h : 3 0 0 p x ;
}
# c o n t e n t P a n e {
o v e r f l o w : a u t o ;
}
# c o n t e n t P a n e . i n n e r {
p a d d i n g : 0 5 p x ;
}
P o l e k s i |k
K u p k s i |k
A N I M A C J E , P R Z E W I J A N I E I Z M I A N A R O Z M I A R U 8 5
N a s t p n i e s t w o r z y m y n a s z k o d j Q u e r y . A b y z a i m p l e m e n t o w a p i o n o w y p o d z i a B p a n e l u , m u s i m y
s p o w o d o w a , |e p i e r w s z y e l e m e n t b d z i e u m o |l i w i a B z m i a n r o z m i a r u z u c h w y t e m p o p r a w e j ,
d z i k i c z e m u b d z i e g o m o |n a r o z c i g a t y l k o w p r a w o .
J e [l i u r u c h o m i m y t e n p r z y k Ba d w y Bc z n i e z e l e m e n t e m z m o |l i w o [c i z m i a n y r o z m i a r u , z a u w a -
|y m y , |e t o j u | p r a w i e w s z y s t k o . J e d y n y p r o b l e m p o l e g a n a t y m , |e p o z m i a n i e r o z m i a r u l e w e g o
p a n e l u s z e r o k o [ p r a w e g o p o z o s t a j e b e z z m i a n , z a m i a s t d o s t o s o w a s i d o r o z m i a r ó w p i e r w s z e g o ,
w y p e Bn i a j c c a B d o s t p n s z e r o k o [. A b y o b s Bu |y t o w y m a g a n i e , m u s i m y w y k o n a p e w n e o b l i -
c z e n i a w r a m a c h f u n k c j i o b s Bu g i z d a r z e n i a z m i a n y r o z m i a r u p i e r w s z e g o e l e m e n t u :
r o z d z i a l _ 0 3 / 2 1 _ h o r i z o n t a l _ p a n e _ s p l i t t e r / s c r i p t . j s ( f r a g m e n t )
$ ( ' # s p l i t t e r > d i v : f i r s t ' ) . r e s i z a b l e ( {
h a n d l e s : ' e ' ,
m i n W i d t h : ' 1 0 0 ' ,
m a x W i d t h : ' 4 0 0 ' ,
r e s i z e : f u n c t i o n ( ) {
v a r r e m a i n i n g S p a c e = $ ( t h i s ) . p a r e n t ( ) . w i d t h ( ) - $ ( t h i s ) . o u t e r W i d t h ( ) ;
v a r d i v T w o = $ ( t h i s ) . n e x t ( ) ;
v a r d i v T w o W i d t h = r e m a i n i n g S p a c e - ( d i v T w o . o u t e r W i d t h ( ) - d i v T w o . w i d t h ( ) ) ;
d i v T w o . c s s ( ' w i d t h ' , d i v T w o W i d t h + ' p x ' ) ;
}
} ) ;
K a |d a z m i a n a r o z m i a r u l e w e g o p a n e l u s p o w o d u j e o d p o w i e d n i z m i a n r o z m i a r u p a n e l u p o
p r a w e j . P o t r z e b u j e m y t u o d r o b i n y m a t e m a t y k i : b i e r z e m y s z e r o k o [ k o n t e n e r a ( k t ó r a s t a n o w i
c a Bk o w i t s z e r o k o [ n a s z e g o d w u p a n e l o w e g o w i d |e t u ) i o d e j m u j e m y o d n i e j s z e r o k o [ l e w e g o
p a n e l u , d o c z e g o s Bu |y m e t o d a o u t e r W i d t h ( ) . M e t o d a t a j e s t p r z y d a t n a d o s p r a w d z a n i a c a Bk o w i t e j
s z e r o k o [c i e l e m e n t u , r a z e m z r a m k ( b o r d e r ) i w y p e Bn i e n i e m ( p a d d i n g ) . J e [l i p o d a m y j e j o p c j o n a l n y
p a r a m e t r t r u e , w a r t o [ z o s t a n i e o b l i c z o n a r ó w n i e | z m a r g i n e s e m ( m a r g i n ) . J a k Ba t w o s i d o m y -
[l i , d o s t p n a j e s t r ó w n i e | a n a l o g i c z n a m e t o d a o u t e r H e i g h t ( ) , k t ó r a z w r a c a w y s o k o [ e l e m e n t u .
Z m i e n n e w j z y k u J a v a S c r i p t
P r z e a n a l i z u j m y t e n w i e r s z :
v a r r e m a i n i n g S p a c e = $ ( t h i s ) . p a r e n t ( ) . w i d t h ( ) - $ ( t h i s ) . o u t e r W i d t h ( ) ;
P r z y p i s u j e o n w y n i k o b l i c z e n o w e j z m i e n n e j o n a z w i e r e m a i n i n g S p a c e . O d t e g o m i e j s c a w n a s z y m k o d z i e
m o e m y u y n a z w y r e m a i n i n g S p a c e w s z d z i e t a m , g d z i e p o t r z e b u j e m y p o d s t a w i t o b l i c z o n w a r t o .
K o l e j n y w i e r s z j e s t n a s t p u j c y :
v a r d i v T w o = $ ( t h i s ) . n e x t ( ) ;
T e n w i e r s z r e a l i z u j e p o d o b n e z a d a n i e , z t r ó n i c , e n o w o u t w o r z o n e j z m i e n n e j d i v T w o p r z y p i s u j e m y
o b i e k t j Q u e r y . T a z m i e n n a m o e b y u y w a n a w t a k i s a m s p o s ó b j a k o d p o w i a d a j c a j e j s e l e k c j a j Q u e r y .
U y w a n i e z m i e n n y c h w t e n s p o s ó b p o m a g a u z y s k a w y s o k i p o z i o m c z y t e l n o c i k o d u , p o n i e w a k a d e
w y r a e n i e j e s t t a k k r ó t k i e , j a k t o m o l i w e . D o d a t k o w o k o d m o e s t a s i w y d a j n i e j s z y , p o n i e w a o d c z y t
w a r t o c i z e z m i e n n e j j e s t z r e g u y d u o s z y b s z y n i w y l i c z e n i e t e j w a r t o c i .
P o l e k s i |k
K u p k s i |k
8 6 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
P o o b l i c z e n i u i l o [c i m i e j s c a p o z o s t a Be g o p o z m i a n i e r o z m i a r u j e s t e [m y p r a w i e g o t o w i , a b y u s t a -
w i s z e r o k o [ d r u g i e g o e l e m e n t u . P o z o s t a j e j e d y n i e u w z g l d n i j e g o r a m k i w y p e Bn i e n i e . N i e s t e t y ,
m e t o d a o u t e r W i d t h n i e p o z w a l a n a d e f i n i o w a n i e s z e r o k o [c i , a j e d y n i e n a j e j o d c z y t , z a t e m m u s i -
m y z r o b i t o s a m o d z i e l n i e .
A b y o b l i c z y , i l e z s z e r o k o [c i e l e m e n t u p r z y p a d a n a j e g o r a m k i w y p e Bn i e n i e , m u s i m y o d j s z e r o k o [
s a m e g o e l e m e n t u ( w y n i k m e t o d y w i d t h ( ) ) o d c a Bk o w i t e j s z e r o k o [c i ( w y n i k m e t o d y o u t e r W i d t h ( ) ) .
P o o d j c i u t e g o w y n i k u o t r z y m u j e m y w a r t o [ z m i e n n e j r e m a i n i n g S p a c e , k t ó r a i n f o r m u j e n a s
o t y m , i l e m i e j s c a z o s t a Bo d o w y k o r z y s t a n i a . W t y m m o m e n c i e f u n k c j a o b s Bu g i z d a r z e n i a s i k o D-
c z y i m a m y o d p o w i e d n i o z a k t u a l i z o w a n e w y m i a r y n a s z e g o d w u p a n e l o w e g o w i d |e t u .
G d y b y [m y z e c h c i e l i z a i m p l e m e n t o w a p o d o b n y w i d |e t , a l e z p o d z i a Be m p o z i o m y m , m u s i e l i b y -
[m y w p r o w a d z i d r o b n m o d y f i k a c j . N a s z e e l e m e n t y s u m i e s z c z o n e j e d e n n a d d r u g i m ( a n i e
o b o k s i e b i e ) , a m e t o d a r e s i z a b l e ( ) w y m a g a z a s t o s o w a n i a o p c j i h a n d l e s o w a r t o [c i ' s ' ( u c h w y t
n a d o l n e j k r a w d z i ) . K o d o b s Bu g i z d a r z e n i a z m i a n y w y m i a r ó w b d z i e n i e m a l i d e n t y c z n y , z t r ó |n i c ,
|e z a m i a s t o d c z y t y w a i u s t a w i a s z e r o k o [c i e l e m e n t ó w , b d z i e m y u |y w a w y s o k o [c i :
r o z d z i a l _ 0 3 / 2 2 _ v e r t i c a l _ p a n e _ s p l i t t e r / s c r i p t . j s ( f r a g m e n t )
$ ( ' # s p l i t t e r > d i v : f i r s t ' ) . r e s i z a b l e ( {
h a n d l e s : ' s ' ,
m i n H e i g h t : ' 5 0 ' ,
m a x H e i g h t : ' 2 0 0 ' ,
r e s i z e : f u n c t i o n ( ) {
v a r r e m a i n i n g S p a c e = $ ( t h i s ) . p a r e n t ( ) . h e i g h t ( ) - $ ( t h i s ) . o u t e r H e i g h t ( ) ;
v a r d i v T w o = $ ( t h i s ) . n e x t ( ) ;
v a r d i v T w o H e i g h t = r e m a i n i n g S p a c e - ( d i v T w o . o u t e r H e i g h t ( ) - d i v T w o . h e i g h t ( ) ) ;
d i v T w o . c s s ( ' h e i g h t ' , d i v T w o H e i g h t + ' p x ' ) ;
}
} ) ;
T e g o t y p u w i d |e t y p o m i m o s w o j e j p r o s t o t y m o g b y b a r d z o u |y t e c z n e . W y m a g a j n i e w i e l k i e j
i l o [c i k o d u , a l e p r z y d a j s i w w i e l u z a s t o s o w a n i a c h . J e [l i j e d n a k p o t r z e b u j e s z b a r d z i e j s k o m p l i -
k o w a n e g o m e c h a n i z m u , j a k w i e l e p a n e l i z m o |l i w o [c i r e g u l a c j i r o z m i a r ó w l u b z a g n i e |d |e n i a ,
w a r t o z a s t o s o w a g o t o w e r o z w i z a n i e w p o s t a c i w t y c z k i S p l i t t e r .
W a n i e t a k s i a n i m u j e , p r z e w i j a i z m i e n i a w y m i a r y
C o z a r o z d z i a B! O p a n o w a l i [m y p o d s t a w y a n i m a c j i , p r z e w i j a n i a i z m i a n y r o z m i a r ó w e l e m e n t ó w , n a -
u c z y l i [m y s i , w j a k i s p o s ó b m o |n a t w o r z y Ba Dc u c h y m e t o d w j Q u e r y i j a k p i s a z w a r t y k o d o d u |y c h
m o |l i w o [c i a c h b e z u t r a t y j e g o c z y t e l n o [c i . S t o p n i o w o w y k o r z y s t u j e m y n a s z e u m i e j t n o [c i z z a -
k r e s u j Q u e r y d o i m p l e m e n t o w a n i a w s p a n i a By c h e f e k t ó w . J e d n a k w a r t o z a u w a |y w t y m m i e j s c u ,
|e n i e s a m e e f e k t y s i s t o t n w i e d z , k t ó r m o |e s z u z y s k a w t e j k s i |c e , a k o n c e p c j e , k t ó r e s w y k o -
r z y s t a n e d o i c h u z y s k a n i a .
N a w e t n a j b a r d z i e j s k o m p l i k o w a n e w i z u a l n i e e f e k t y m o |n a u z y s k a z a p o m o c p r o s t y c h d z i a Ba D,
p o Bc z o n y c h z e s o b w e w Ba [c i w y s p o s ó b . T o o d p r o g r a m i s t y z a l e |y , c z y z e c h c e u s i [ i p r z e m y -
[l e z a d a n i e , o p r a c o w a s p o s ó b j e g o r o z w i z a n i a i z a i m p l e m e n t o w a j e w e f e k t o w n y s p o s ó b .
P o l e k s i |k
K u p k s i |k
S k o r o w i d z
s c r o l l T o p , 7 5
$
t i m e o u t , 1 5 2
$ ( d o c u m e n t ) . r e a d y ( ) , 3 2
t i t l e , 1 4 7
a u t o u z u p e Bn i a n i e , 2 0 8
A
B
A J A X , 1 6 6
a k o r d e o n , 1 3 2
b i b l i o t e k a j Q u e r y , P a t r z j Q u e r y
a k o r d e o n w j Q u e r y U I , 1 3 7
b i b l i o t e k a j Q u e r y U s e r I n t e r f a c e , P a t r z j Q u e r y U I
a k o r d e o n y w i e l o p o z i o m o w e , 1 3 5
b i b l i o t e k a P r o t o t y p e . j s , 3 0 0
a l i a s $ ( ) , 2 6
b l o k o w a n i e z d a r z e D, 2 9 7
a l i a s j Q u e r y , 2 6
b r o w s e r s n i f f i n g , 1 9
a n a l i z a d a n y c h X M L , 1 9 0
a n i m a c j e , 5 0
C
c z a s t r w a n i a , d u r a t i o n , 6 5
d y n a m i k a , e a s i n g , 6 0 , 6 5
C a s t l e d i n e E a r l e , 1 4
f u n k c j a z w r o t n a , c a l l b a c k , 6 5
C D N , C o n t e n t D e l i v e r y N e t w o r k , 2 4
k o l e j k a , 6 5
c o n s o l e . l o g , 9 1
k o l o r u , 5 9
c u d z y s Bo w y , 2 3 4
s k a c z c e , 6 4
s t o p n i o w e p o j a w i a n i e s i , 5 1
D
s t o p n i o w e z a n i k a n i e , 5 1
w s u w a n i e , 5 1 d e f i n i o w a n i e
w y s u w a n i e , 5 1 s e l e k t o r a j Q u e r y , 2 4 7
a n i m a c j i , w Ba s n e g o m o t y w u , 3 0 5
k o l e j k o w a n i e , 3 0 1 w Ba s n y c h z d a r z e D, 2 9 1
u s u w a n i e , 3 0 1 d e k r e m e n t a c j a , 1 0 6
a n i m o w a n a n a w i g a c j a , 6 7 , 6 9 d e l e g a c j a z d a r z e D, 2 5 7
A P I , A p p l i c a t i o n P r o g r a m m i n g I n t e r f a c e , 1 7 1 d o d a w a n i e e f e k t ó w , 4 2
a p l i k a c j a T h e m e R o l l e r , 3 0 5 d o d a w a n i e e l e m e n t ó w , 4 7
a r k u s z s p l i t t e r . c s s , 8 4 d o d a w a n i e e l e m e n t ó w d o k l a s , 4 1
a r k u s z e s t y l ó w C S S , 2 7 d o d a w a n i e m e t o d d o j Q u e r y , 2 8 5
a t a k C r o s s - s i t e S c r i p t i n g , 1 6 8 d o k u m e n t H T M L , 2 7
a t r y b u t D O M , D o c u m e n t O b j e c t M o d e l , 2 7
$ . e v e n t . s p e c i a l , 2 9 8 d o m k n i c i e , 1 6 2
c l a s s , 2 7 d r z e w o D O M , 2 7 , 1 2 4
g a l l e r y . t r i g g e r , 1 1 7 d r z e w o r o z w i j a n e , 2 5 4
g r i d , 8 3 d y m e k p o d p o w i e d z i z a a w a n s o w a n y , 1 5 1
h r e f , 7 5 d y m k i p o d p o w i e d z i , 1 4 7
i d , 2 7 , 3 4 d y n a m i c z n e p r z e t w a r z a n i e , 2 5 3
o v e r f l o w , 2 2 4 d y n a m i k a a n i m a c j i , 6 0
p a g e X , 1 2 0 d y n a m i k a l i n i o w a , 6 0
p r o t o t y p e , 2 7 8 d y n a m i k a t y p u s w i n g , 6 0
P o l e k s i |k
K u p k s i |k
3 2 6 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
f u n k c j e
E
a n o n i m o w e , 5 2
e d y c j a w i e r s z a , 2 6 9
o b s Bu g i z d a r z e D, 4 3 , 1 1 9 , 3 1 2
e f e k t l i g h t b o x , 2 3 0
o p ó zn i a j c e , 1 0 1
e f e k t p r z e s u w a n i a , 1 0 7
z a g n i e |d |o n e , 2 6 8
e f e k t t a s o w a n i a , 1 0 9
z w r o t n e , c a l l b a c k , 5 2 , 2 4 0 , 2 8 2
e f e k t z n i k a n i a , 2 2 4
z w r o t n e w s t y l u j Q u e r y , 2 8 4
e l e m e n t d i v , 3 4
e l e m e n t s e l e c t a b l e , 2 4 5
G
e l e m e n t s p a n , 2 5 4
e l e m e n t t y p u s e l e c t a b l e , 2 4 4
g a l e r i a m o t y w ó w , 3 0 4
e l e m e n t y k o n t r o l n e , 2 6 6 g a l e r i a o b r a z ó w , 1 1 5
E U L A , E n d U s e r L i c e n s e A g r e e m e n t , 2 3 0
G E T , 1 6 9
G o o g l e C D N , 2 4
g r a f i k a s p r i t e , 1 5 1
F
f a Bs z y w y n a g Bó w e k , 2 6 2
H
f i l t r , 3 6
a n i m a t e d , 1 4 7
h i j a x , 1 6 7
c h e c k e d , 1 9 6
e q , 3 6 , 9 9
I
e v e n , 3 6
f i r s t , 3 6 i k o n a Ba d o w a n i a , 1 8 1
l a s t , 3 6 i k o n a Ba d o w a n i a g l o b a l n a , 1 8 2
n o t , 1 4 7 i k o n a Ba d o w a n i a k o n f i g u r a c j a , 1 8 3
o d d , 3 6 i m p l e m e n t a c j a
r a d i o , 2 1 3 a k o r d e o n ó w , 1 3 2
s e l e c t e d , 1 9 6 , 2 5 2 d y m k ó w , 1 5 2
f i l t r y s e l e k t o r ó w , 3 6 k a r t , 1 3 8
f o r m u l a r z , 1 9 2 , 2 4 1 m e c h a n i z m u w t y c z k i , 2 7 9
f o r m u l a r z l o g o w a n i a , 1 4 3 S u c k e r f i s h , 1 2 9
f o r m u l a r z e H T M L , 1 9 5 i n k r e m e n t a c j a , 1 0 6
f u n k c j a i n s t a l a c j a j Q u e r y , 2 3
a d d H a n d l e r s ( ) , 2 1 2 i n s t r u k c j a i f , 4 5
a l e r t ( ) , 3 5 , 9 1 i n t e r f e j s j Q u e r y U I , P a t r z j Q u e r y U I
c l o s e D i a l o g ( ) , 2 3 2
i n n e r H T M L ( ) , 4 7
J
j Q u e r y ( ) , 2 6 , 4 7
o p e n D i a l o g ( ) , 2 3 1 j z y k J a v a S c r i p t , 3 1 7
p o s i t i o n L i g h t b o x I m a g e ( ) , 9 1 j Q u e r y , 2 2 , 5 6
r e v e a l ( ) , 2 6 8 j Q u e r y U I , 1 9 , 7 1
r o t a t e P i c s ( ) , 1 0 5 J S O N , J a v a S c r i p t O b j e c t N o t a t i o n , 1 7 1
s e t T i m e o u t ( ) , 1 0 6 , 1 1 8 , 1 8 0 , 1 8 3
s e t T i p s ( ) , 1 5 2
K
s l e e p ( ) , 1 8 7
s o r t ( ) , 2 4 9 , 2 5 0 k a r t y , 1 3 8
s u p p o r t s ( ) , 1 9 k a r t y w j Q u e r y U I , 1 4 0
t e m p l a t e ( ) , 1 6 3 k a t a l o g C o l o r B o x , 9 3
t r i m ( ) , 2 8 8 k a t a l o g d e v e l o p m e n t - b u n d l e , 7 1
P o l e k s i |k
K u p k s i |k
S K O R O W I D Z 3 2 7
k a t a l o g l i b , 7 2 m e n u , 1 2 1
k a t a l o g l o c a l i z a t i o n , 2 0 0 a k o r d e o n o w e , 1 3 2
k l a s a p o z i o m e , 1 2 8 , 1 3 0
c h e c k - a l l , 2 0 4 r o z w i j a n e , 1 2 2 , 1 2 7 , 1 3 0
c l o s e d , 2 5 5 m e t o d a $ . a j a x ( ) , 1 7 3 , 1 7 5 , 3 0 9
l i g h t b o x , 8 9 f l a g i , 3 0 9
m a x l e n g t h , 2 0 1 f u n k c j e z w r o t n e , 3 1 2
o p e n e d , 2 5 5 o b s Bu g a z d a r z e D, 3 1 2
s p o i l e r , 5 4 u s t a w i e n i a , 3 1 0
t o o l t o p , 1 5 0 m e t o d a , 2 7
u i - h e l p e r - r e s e t , 3 0 6 $ . a j a x S e t u p ( ) , 1 7 4
u i - i c o n - a l e r t , 3 0 7 $ . d a t e p i c k e r . s e t D e f a u l t s ( ) , 2 1 7
u i - s e l e c t i n g , 2 4 6 $ . e a c h ( ) , 1 7 2 , 1 7 8
u i - s t a t e - e r r o r , 3 0 7 $ . e x t e n d ( ) , 2 8 9
u i - w i d g e t - h e a d e r , 3 0 7 $ . f n . e x t e n d ( ) , 2 8 5
w a i t i n g , 1 2 8 $ . g e t ( ) , 1 7 5
w a r n i n g , 2 8 $ . g e t J S O N ( ) , 1 7 1 , 1 9 1
k o e r c j a t y p ó w , 3 1 7 $ . g e t S c r i p t ( ) , 1 7 4
k o l e j k o w a n i e a n i m a c j i , 3 0 1 $ . i s F u n c t i o n ( ) , 2 8 3
k o m e n t a r z e , 1 5 8 $ . p o s t ( ) , 1 7 5 , 1 9 2
k o n f l i k t n a z w , 3 0 0 a d d C l a s s ( ) , 4 1
k o n s o l a n a r z d z i a F i r e b u g , 9 2 a d o p t ( ) , 2 2 8
k o n s t r u k c j a , 1 5 7 a n d S e l f ( ) , 2 1 3
k o n t e k s t , 1 8 5 a n i m a t e ( ) , 5 7 , 2 2 4 , 3 0 1
a p p e n d ( ) , 2 6 1
a p p e n d T o ( ) , 1 5 0
L
a t t r ( ) , 9 0 , 2 5 3
l i c z n i k z d a r z e D, 2 9 9 b i n d ( ) , 2 0 7 , 2 9 5
l i g h t b o x , 8 7 , 2 3 0 c h e c k S c r o l l ( ) , 1 8 4
a n i m a c j e , 8 8 c l e a r T i m e o u t ( ) , 1 1 8
Ba d o w a n i e t r e [c i , 8 8 c l i c k ( ) , 4 3 , 1 2 8
p r z e j [c i a , 8 8 c l o n e ( ) , 1 6 4 , 2 6 3
w i d e o , 8 8 c l o s e s t ( ) , 2 5 9
l i s t a z a z n a c z a n y c h e l e m e n t ó w , 2 4 4 c o l o r b o x ( ) , 9 3
l i s t y , 2 4 3 c r e a t e S t a r s ( ) , 2 1 2
l i s t y w y b o r u , 2 5 1 , 2 5 3 c s s ( ) , 2 7
l i t e r a B o b i e k t u , 3 9 d a t a ( ) , 1 1 4 , 1 5 0 , 2 0 3
d e l a y ( ) , 6 6
d e q u e u e ( ) , 6 5
d i a l o g ( ) , 2 3 4
Ba d o w a n i e o b r a z u , 2 2 5
d i e ( ) , 1 7 0
Ba Dc u c h , 6 6
d i s a b l e S e l e c t i o n ( ) , 2 2 7
Ba Dc u c h y m e t o d , 6 5 , 2 0 6
d o S l i d e ( ) , 2 9 5
d r a g g a b l e ( ) , 2 2 1 , 2 2 2
d r o p p a b l e ( ) , 2 2 1 , 2 2 3
M
e m p t y ( ) , 2 0 6
m e c h a n i z m o d p i n a n i a f u n k c j i , 2 9 5
e n d ( ) , 2 0 1
m e c h a n i z m z a z n a c z a n y c h e l e m e n t ó w , 2 4 4
e q ( ) , 1 0 5
e x t e n d ( ) , 2 8 5
P o l e k s i |k
K u p k s i |k
3 2 8 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
m e t o d a s o r t a b l e ( ) , 2 2 6
f a d e I n ( ) , 1 7 9 s t o p ( ) , 6 5
f a d e O u t ( ) , 1 8 1 s t o p P r o p a g a t i o n ( ) , 1 2 6
f i l t e r ( ) , 6 1 , 1 3 4 , 2 5 3 s u b s t r i n g ( ) , 2 2 9
f i n d ( ) , 1 1 3 s w a p ( ) , 2 5 2
f i x H e a d e r ( ) , 2 6 0 , 2 6 1 T A B L E . f o r m w o r k ( ) , 2 7 0
G A L L E R Y . l o a d ( ) , 1 7 9 t e a r d o w n ( ) , 2 9 8
g a l l e r y . o f f s e t ( ) , 1 1 7 t e x t ( ) , 5 0
g a l l e r y . s l i d e ( ) , 1 1 8 t o g g l e ( ) , 5 1
g e t J S O N ( ) , 1 6 8 t o g g l e C l a s s ( ) , 2 5 6
h i d e ( ) , 4 3 , 2 0 2 t r i g g e r ( ) , 2 0 7
h o v e r ( ) , 5 3 , 5 8 , 6 7 t r i m ( ) , 2 0 6
h t m l ( ) , 5 0 , 2 0 6 u n b i n d ( ) , 2 9 5
i n d e x O f ( ) , 2 5 3 v a l i d a t e ( ) , 1 9 9
i n n e r f a d e ( ) , 1 0 7 m e t o d y k o n t r o l i k a r t , 1 4 2
i n s e r t A f t e r ( ) , 4 8 m e t o d y p o m o c n i c z e w j Q u e r y , 2 4 7
i n s e r t B e f o r e ( ) , 5 5 m e t o d y z p r e f i k s e m $ . , 2 8 6
i s ( ) , 4 5 m e t o d y z d a r z e D, 3 1 5
J c r o p ( ) , 9 6 m i n i m a l i z a c j a k o d u J a v a S c r i p t , 2 5
j Q u e r y . f n . e x t e n d ( ) , 2 8 5 m o d a l n e o k n o d i a l o g o w e , 2 3 0
j S c r o l l P a n e ( ) , 7 8 m o d u B S e l e c t a b l e j Q u e r y U I , 2 4 7
l i v e ( ) , 1 7 0 m o d y f i k o w a n i e e l e m e n t ó w , 5 0
l o a d ( ) , 1 6 6 , 1 6 9 m o d y f i k o w a n i e w a r t o [c i p ó l , 2 0 5
m o u s e o u t ( ) , 1 1 9 m o t y w L i g h t n e s s , 3 0 4
n e x t ( ) , 5 5 , 2 0 2 m o t y w , t h e m e , 7 1
n e x t U n t i l ( ) , 2 1 3 m o |l i w o [c i p r z e g l d a r k i , 1 6 5
o u t e r H e i g h t ( ) , 8 5
o u t e r W i d t h ( ) , 8 5
N
p a r e n t ( ) , 1 1 1
p o s i t i o n ( ) , 6 8 n a d p i s y w a n i e f u n k c j i , 2 8 8
p r e v A l l ( ) , 2 1 3 n a g Bó w e k h 1 , 3 4
p r e v e n t D e f a u l t ( ) , 1 2 5 , 1 2 6 , 2 0 2 n a g Bó w e k t a b e l i , 2 5 9
p r e v i o u s ( ) , 5 5 n a r z d z i a d l a w i d |e t u w y b o r u d a t y , 2 1 7
p r e v U n t i l ( ) , 2 1 3 n a r z d z i a o b s Bu g i A J A X , 1 7 3
q u e u e ( ) , 6 5 , 3 0 2 n a r z d z i e F i r e b u g , 4 0 , 9 2
r e a d y ( ) , 2 0 7 n a r z d z i e T h e m e R o l l e r , 3 0 6
r e m o v e ( ) , 4 9 , 2 9 8 n a z w a t r k r , 3 0 1
r e m o v e C l a s s ( ) , 4 2 n i e s k o Dc z o n e p r z e w i j a n i e , 1 8 3
r e s e t ( ) , 1 8 8
r e s i z a b l e ( ) , 8 6
O
s c r o l l T o p ( ) , 7 5
o b i e k t
s e l e c t a b l e ( ) , 2 4 5
G A L L E R Y , 1 7 8
s e r i a l i z e ( ) , 1 9 2
J a v a S c r i p t , 3 0 3
s h o w C e l e b s ( ) , 2 2 0
j Q u e r y , 3 0 3
s l i c e ( ) , 2 6 7 , 2 7 4
S W A P L I S T , 2 5 1
s l i d e D o w n ( ) , 5 2 , 1 3 1
t h i s , 4 3
s l i d e r ( ) , 2 1 9
T T , 1 5 2
s l i d e T o g g l e ( ) , 5 2
o b i e k t y o d w z o r o w a D, 1 5 8
s l i d e U p ( ) , 5 2 , 3 0 3
P o l e k s i |k
K u p k s i |k
S K O R O W I D Z 3 2 9
o b i e k t y z d a r z e D, 3 1 6 b o x M o d e l , 3 1 3
o b r a z a n i m a c j i , 2 2 5 c h a n g e B u b b l e s , 3 1 3
o b s Bu g a c s s F l o a t , 3 1 3
b Bd ó w , 1 8 6 h r e f N o r m a l i z e d , 3 1 3
I E 6 , 1 5 6 , 3 0 5 h t m l S e r i a l i z e , 3 1 3
k o m u n i k a t ó w , 2 3 0 l e a d i n g W h i t e s p a c e , 3 1 3
m o t y w ó w , 3 0 6 n o C l o n e E v e n t , 3 1 4
o p c j i , 2 8 0 o p a c i t y , 3 1 4
z d a r z e n i a d o c u m e n t - r e a d y , 3 2 s c r i p t E v a l , 3 1 4
z d a r z e D, 1 2 5 s t y l e , 3 1 4
z d a r z e D j Q u e r y , 2 9 0 s u b m i t B u b b l e s , 3 1 4
o d n o [n i k r a t i n g - 0 , 2 3 5 t b o d y , 3 1 4
o d p a l e n i e z d a r z e n i a , 4 3 o p c j e w t y c z e k , 2 8 0
o d p i n a n i e z d a r z e D, 2 9 4 l i t e r a By o b i e k t ó w , 2 8 0
o k n o d i a l o g o w e , 2 3 0 p r o s t e w a r t o [c i , 2 8 0
o k n o d i a l o g o w e w j Q u e r y U I , 2 3 3 o p e r a t o r
o p c j a n i e r ó w n o [c i , 3 1 8
a n i m a t e , 2 1 9 p r z y p i s a n i a , 3 1 8
a u t o O p e n , 2 3 4 r ó w n o [c i , 3 1 8
c a c h e , w Bc z e n i e b u f o r o w a n i a , 1 4 2 [c i s Be j n i e r ó w n o [c i , 3 1 9
c t i v e C l a s s , 2 2 3 [c i s Be j r ó w n o [c i , 3 1 9
d r a g g a b l e , 2 3 5 t r ó j a r g u m e n t o w y , 1 0 3 , 2 1 3
e v e n t , t y p z d a r z e n i a , 1 4 2 z a p r z e c z e n i a l o g i c z n e g o , 3 2 0
f x , e f e k t s p e c j a l n y , 1 4 2 o p ó zn i e n i e , 1 0 0
h e l p e r , 2 2 3 o s a d z a n i e , i n l i n e , 4 0
m i n S i z e , 9 7
s e t S e l e c t , 9 7
P
s p i n n e r , k o m u n i k a t Ba d o w a n i a , 1 4 2
o p c j e d y n a m i k i , 6 1 p a n e l w y s u w a n y , 1 4 5
o p c j e d y n a m i k i a n i m a c j i , 6 0 p a n e l e , 1 4 3
o p c j e k a r t , 1 4 1 p a r a g r a f , 3 4
o p c j e m e t o d y $ . a j a x ( ) , 3 0 9 p a r a m e t r , 2 7
c o n t e n t T y p e , 3 1 0 p a r a m e t r c o n t e x t , 1 8 5
c o n t e x t , 3 1 0 p a r a m e t r d a t a , 2 9 9
d a t a , 3 1 1 p a r a m e t r t i m e o u t , 1 0 9
d a t a T y p e , 3 1 1 p a s e k p o s t p u , 2 2 8
j s o n p , 3 1 1 p a s e k p r z e w i j a n i a , 7 7
p a s s w o r d , 3 1 1 p l i k
s c r i p t C h a r s e t , 3 1 1 c e l e b s . j s o n , 1 9 1
t i m e o u t , 3 1 1 J c r o p . g i f , 9 6
t y p e , 3 1 1 j Q u e r y - u i - 1 . 7 . 2 - m i n . j s , 7 1
u r l , 3 1 1 j S c r o l l P a n e . c s s , 7 7
u s e r n a m e , 3 1 1 j S c r o l l P a n e - 1 . 2 . 3 . m i n . j s , 7 7
o p c j e m e t o d y d r a g g a b l e ( ) , 2 2 3 r e a d m e , 5 9
a x i s , 2 2 3 p By w a j c a n a w i g a c j a , 7 4
c o n t a i n m e n t , 2 2 3 p o b i e r a n i e , 2 3
g r i d , 2 2 3 p o d [w i e t l a n i e , 5 3
h o v e r C l a s s , 2 2 3 p o d z i a B p a n e l u , 8 3
o p c j e m e t o d y $ . s u p p o r t ( ) , 3 1 2 p o d z i a B t a b e l i n a s t r o n y , 2 6 5
P o l e k s i |k
K u p k s i |k
3 3 0 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
p o k a z s l a j d ó w , 9 8 s e l e k t o r , 2 7 , 3 3 , 3 7
k o d J a v a S c r i p t , 1 0 0 # d i s c l a i m e r , 4 5
p r a w d z i w e p r z e n i k a n i e , 1 0 3
a t r y b u t u , 7 6
p r z e n i k a n i e , 9 8 , 1 0 2
C S S 3 , 1 9
p r z e w i j a n a g a l e r i a , 1 1 2
p o t o m k ó w , 6 4
p r z e w i j a n i e m i n i a t u r , 1 1 0
z a w |a n i e s e l e k c j i , 3 5
z a n i k a n i e , 9 8
s e r w i s S t a r T r a c k r ! , 9 8
p o l e f o r m u l a r z a , 3 4
S h a r k i e C r a i g , 1 4
p o l e t e x t a r e a , 8 2
s i a t k i d a n y c h , 2 6 4
p o r u s z a n i e s i , t r a v e r s i n g , 3 7
s k r y p t z e w n t r z n y , 1 7 4
P O S T , 1 6 9
s Bo w o k l u c z o w e f u n c t i o n , 8 0
p o t o m e k , c h i l d , 2 7
s o r t o w a n i e , 2 2 6
p o w i a d o m i e n i a , 2 3 0
s o r t o w a n i e l i s t , 2 4 9
p o w i a d o m i e n i a 1 - u p , 2 3 8
s t a n d a r d C S S 3 , 1 9
p o w i a d o m i e n i a w s t y l u G r o w l , 2 3 6
s t a n d a r d X H T M L , 9 3
p o w t a r z a n i e n a g Bó w k a t a b e l i , 2 6 3
s t y l e o s a d z o n e , 4 0
p r o p a g a c j a z d a r z e D, 1 2 4
s t y l e z a g n i e |d |o n y c h l i s t e l e m e n t ó w , 1 2 9
p r z e c h w y t y w a n i e z d a r z e D, 4 3
S u b v e r s i o n , 2 5
p r z e c i g n i j i u p u [, 2 2 1
S u c k e r f i s h , 1 2 9
p r z e c i g n i j i z n i s z c z , 2 2 1
s u w a k z j Q u e r y U I , 2 1 8
p r z e Bc z a n i e e l e m e n t ó w , 5 1
s u w a k i , 2 1 8
p r z e Bc z a n i e u k Ba d u , 7 9
p r z e n i k a n i e , c r o s s - f a d e , 9 8
p r z e s t r z e D n a z w c o l o r i z e , 2 9 6 T
p r z e s t r z e D n a z w z d a r z e D, e v e n t n a m e s p a c i n g , 2 9 4
t e c h n i k a h i j a x , 1 6 7
p r z e s t r z e D n a z w , n a m e s p a c e , 2 6 , 1 5 9
t e c h n o l o g i a A J A X , 1 6 6
p r z e w i j a c z k a w i a d o m o [c i , 1 0 7
t e c h n o l o g i a G P S , 3 1
p r z e w i j a n i e , 7 3
t e c h n o l o g i a R F I D , 3 1
p r z e w i j a n i e d o k u m e n t u , 7 5
T h e m e R o l l e r , 3 0 5
p s e u d o s e l e k t o r
t w o r z e n i e a n i m a c j i , P a t r z a n i m a c j e
h o v e r , 1 2 9
t w o r z e n i e e l e m e n t ó w , 9 0
v i s i b l e , 4 5
t w o r z e n i e m o t y w ó w w i z u a l n y c h , 3 0 4
t w o r z e n i e p u s t e g o o b i e k t u , 1 1 6
R
t w o r z e n i e w Ba s n y c h s e l e k t o r ó w , 2 8 9
r e g u By f i l t r a , 1 3 4
t w o r z e n i e w t y c z k i , 2 7 8
r e p o z y t o r i u m w t y c z e k j Q u e r y , 2 1
t y p b o o l o w s k i , 3 1 9
r e s z t a z d z i e l e n i a , 1 0 5
R I A , R i c h I n t e r n e t A p p l i c a t i o n s , 1 2 1
U
r o d z e Ds t w o , s i b l i n g s , 2 8 , 4 8
r o d z i c , p a r e n t , 2 7
u k r y w a n i e e l e m e n t ó w , 4 2
r o z s z e r z a n i e j Q u e r y , 2 8 5
u s u w a n i e e l e m e n t ó w , 4 9
r o z w i j a n e m e n u p o z i o m e , 1 3 0
u s u w a n i e e l e m e n t u z k l a s y , 4 2
u s u w a n i e k o l e j k i , 3 0 1
S
W
s e l e k c j a
f i l t r y , 3 6
w a l i d a c j a f o r m u l a r z y , 1 9 6
t e s t o w a n i e , 3 5
w a l i d a c j a o n l i n e , 2 0 1
w y b ó r w i e l u e l e m e n t ó w , 3 6
w a r t o [c i b o o l o w s k i e , 3 2 0
z a w |a n i e , 3 5
P o l e k s i |k
K u p k s i |k
S K O R O W I D Z 3 3 1
w a r t o [ w z g l d n a , 5 8 w t y c z k i j Q u e r y , 2 8 0
w e r s j e n o c n e , 2 5 w y s y Ba n i e d a n y c h , 1 9 1
w i d o c z n o [ e l e m e n t ó w , 4 4 w y [w i e t l a n i e e l e m e n t ó w , 4 2
w i d |e t w y w o Ba n i e , 2 7
a k o r d e o n u , 1 3 3 f u n k c j a j Q u e r y ( ) , 2 7
a k o r d e o n u w i e l o p o z i o m o w e g o , 1 3 6 m e t o d a , 2 7
C E L E B , 1 9 1 p a r a m e t r , 2 7
l i g h t b o x , 2 3 1 s e l e k t o r , 2 7
o c e n y , 2 1 0 w y w o Ba n i e d o c u m e n t - r e a d y
s e l e c t a b l e , 2 4 5 a k c j a r e a d y , 3 2
S O R T E R , 2 8 6
p a r a m e t r a l e r t ( ) , 3 2
T A B L E , 2 6 0
s e l e k t o r d o c u m e n t , 3 2
w y b o r u d a t y , 2 1 5
w y w o By w a n i e k o d u z o p ó zn i e n i e m , 1 0 0
w i d |e t y t y p u l i g h t b o x , 9 1
w Ba s n o [ s c r o l l H e i g h t , 1 8 4
Z
w Ba [c i w o [c i C S S , 3 7
w Ba [c i w o [c i z d a r z e D, 2 9 0 , 3 1 5
z a k r e s w i d o c z n o [c i n a z w , 1 6 1
w Ba [c i w o [
z a m i a r z a t r z y m a n i a w s k a zn i k a m y s z y , 1 3 1
b o x M o d e l , 3 1 3
z a z n a c z a n i e , 2 5 2
c h a n g e B u b b l e s , 3 1 3
z a z n a c z a n i e k o l u m n , 2 7 3
c s s F l o a t , 3 1 3
z a z n a c z a n i e s e k w e n c j i , 2 7 3
h r e f N o r m a l i z e d , 3 1 3
z d a r z e n i a , 2 9 0 , 3 1 5
h t m l S e r i a l i z e , 3 1 3
b l o k o w a n i e , 2 9 7
l e a d i n g W h i t e s p a c e , 3 1 3
d e f i n i o w a n i e , 2 9 1
l e n g h , 3 5
m e t o d y z d a r z e D, 3 1 5
n o C l o n e E v e n t , 3 1 4
o d p i n a n i e , 2 9 4
o p a c i t y , 1 4 7 , 1 6 5 , 3 1 4
p r z e s t r z e D n a z w , 2 9 4
s c r i p t E v a l , 3 1 4
w Ba s n e o b i e k t y z d a r z e D, 3 1 6
s t y l e , 3 1 4
w Ba [c i w o [c i , 2 9 0 , 3 1 5
s u b m i t B u b b l e s , 3 1 4
z d a r z e n i a c l i c k , 2 9 7
t b o d y , 3 1 4
z d a r z e n i a d o t y k o w e , 2 9 7
z - i n d e x , 1 0 4
z d a r z e n i a n i e s t a n d a r d o w e , 2 9 6
w s k a zn i k d Bu g o [c i t e k s t u , 2 0 1
z d a r z e n i a t o u c h s t a r t , 2 9 7
w t y c z k a
z d a r z e n i e
b g i f r a m e , 2 3 5
a j a x C o m p l e t e , 1 7 6
C o l o r B o x , 9 2
a j a x E r r o r , 1 8 8
C y c l e , 1 0 8
a j a x S u c c e s s , 1 7 6
D a t a T a b l e s , 2 7 2
b e f o r e S e n d , 1 8 0 , 1 8 1
h i g h l i g h t O n c e , 2 8 2
b l u r , 2 0 3
H o v e r I n t e n t , 1 3 1
c l i c k , 5 5 , 1 4 4
I n n e r F a d e , 1 0 7
c o m p l e t e , 1 7 6
J c r o p , 9 5
d o c u m e n t - r e a d y , 3 2 , 4 3 , 8 0
R e s i z a b l e , 8 1
e r r o r , 1 8 7
S c r o l l T o , 1 1 2
e v e n t . s p e c i a l , 2 9 7
T h i c k B o x , 9 2
f o c u s , 2 0 3
V a l i d a t i o n , 1 9 9
h o v e r , 1 3 0 , 1 4 7
w t y c z k i , 5 9 , 2 7 7
m o u s e o u t , 5 3 , 6 7 , 2 9 6
i m p l e m e n t a c j a , 2 7 9
m o u s e o v e r , 5 3 , 1 2 0
k o n f i g u r a c j a , 2 7 8
m u l t i h o v e r , 2 9 8
o b s Bu g a o p c j i . , 2 8 0
P o l e k s i |k
K u p k s i |k
3 3 2 j Q u e r y . O d n o w i c j u s z a d o w o j o w n i k a n i n j a
z d a r z e n i e
o n S e l e c t , 9 7
p r z e w i j a n i a , 7 3 zr ó d Ba d a n y c h , 1 6 2
r e v e a l , 2 9 3
s u b m i t , 1 9 8
s u c c e s s , 1 7 6
z m i a n y r o z m i a r ó w , 7 9 |d a n i a A J A X , 1 7 4 , 1 7 5
z Bo |e n i e , 2 8 9 |d a n i e G E T , 1 6 9
z m i a n a r o z m i a r u o k n a , 7 8 |d a n i e P O S T , 1 6 9
z m i e n n a c a l l b a c k , 2 4 0
z m i e n n e w j z y k u J a v a S c r i p t , 8 5
z n a k k r o p k i ( . ) , 3 4
z n a k k r z y |y k a ( # ) , 3 4
z n a k Bc z n i k a , 4 0
P o l e k s i |k
K u p k s i |k
Wyszukiwarka
Podobne podstrony:
Sztuka czarno bialej fotografii Od inspiracji do obrazuOd Pskowa do Parkan 2 02 docMICHALKIEWICZ OD KOR u DO KOK uBBC Planeta Ziemia 01 Od bieguna do biegunaBezpieczeństwo pracy Ergonomia oprogramowania od przepisów do praktykiod obrazka do słowaOd dysgrafii do kaligrafii prezentacjawięcej podobnych podstron