Internet Explorer Behaviors
它是什么？Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。
为什么要避免它？只有 Internet Explorer 支持 behavior 属性。
用什么代替？请使用 JavaScript 和 HTML DOM 取而代之。
例子 1 - Mouseover Highlight
下面的 HTML 文件中有一个 <style> 元素，它为 <h1> 元素定义了一个行为：
<html>2 P1 ?9 o/ ] ?: i1 u- H; {
<head>1 _# _% A: k& b8 n; c7 n: c
<style type="text/css">' n4 Q! l/ E& ]8 q9 _, U( r# @
h1 { behavior: url(behave.htc) }+ ~$ D5 G5 T) T0 o$ n$ {$ _1 \. i* j
</style>
8 \9 W( ?5 U! l# j8 X# ?4 R. m" L</head>
2 S* l5 C7 D, `; K9 W
! a% O9 V( l- e3 E! R# T<body>' A0 O$ F6 c$ |& m, f$ ]4 N% Z
<h1>Mouse over me!!!</h1>0 I4 B8 S3 R) i, M+ g
</body>
3 m$ I, M! `. k0 w" F5 ~ g</html>下面是 XML 文档 "behave.htc"：
<attach for="element" event="onmouseover" handler="hig_lite" />
v- ?2 H1 c( U5 N* {<attach for="element" event="onmouseout" handler="low_lite" />) {* T) A8 S0 x6 u( X
% j0 M4 k$ k* e: y' q<script type="text/javascript">
' e/ z) _2 c& B1 r. Ofunction hig_lite() g- v2 |( I4 T% ]. x
{/ g9 t( F6 {2 k$ E/ _6 {7 L* S
element.style.color='red';
4 L( B3 k. V: B}
+ h/ h5 I, G4 ]$ ^* N: k! S. M) s. `7 s. T
function low_lite()! Q% D. g3 ?& _; t, D4 Y
{" }$ q/ B2 Z: s) H$ k$ h
element.style.color='blue';1 \/ z* f8 n7 G, J
}
& C- t6 k# D! i/ N</script>behavior 文件包含了针对元素的 JavaScript 和 事件句柄。
如果您使用 Internet Explorer，可以亲自试一下（把鼠标放在例子中的文本上）。
例子 2 - Typewriter Simulation
下面的 HTML 文件中有一个 <style> 元素，它为 id 为 "typing" 的元素定义了一个行为：
<html>' s/ c, J& F3 W* g
<head>
5 k0 \* @, X0 I+ x9 F<style type="text/css">
0 ^3 g7 [3 m+ P& x9 C#typing, M9 V5 S7 K; p1 P) h+ J& b
{& i. Z1 {% o, Q" U0 O+ }* [. b
behavior:url(behave_typing.htc);$ R: a6 R- D" H& p/ u
font-family:'courier new';; x9 f2 E. D9 M9 Q8 O0 A- n
}
$ a; Z2 [+ @; m j$ r% w" @</style>
S( M, L# I. O% q( q</head>
8 s7 j/ q/ Z) Q- U- z5 T4 I) T( v5 d: o+ ~+ o1 P0 L& g
<body>: w0 j- S! Y2 H) K& {& ^$ {
<span id="typing" speed="100">IE5 introduced DHTML behaviors.- _0 O5 I- m0 [2 J5 _
Behaviors are a way to add DHTML functionality to HTML elements) _7 l& M7 ]4 k, A7 b1 x
with the ease of CSS.<br /><br />How do behaviors work?<br />* i5 D9 n/ I9 A2 [; C, B3 j7 o; y
By using XML we can link behaviors to any element in a web page* d7 Y. b" e3 |
and manipulate that element.</p>
- j8 _9 P; _# V</span>9 o+ N. p) Z+ ?; V& D2 D, L
</body>9 a* j, m& B( a# P
</html>下面是 XML 文档 "behave.htc"：
<attach for="window" event="onload" handler="beginTyping" />9 A3 e n" ~& u1 [2 ~% S; I8 @
<method name="type" />( s1 H; W' w* Z! C6 r
, o' [6 O0 @ m' U4 U<script type="text/javascript">9 ~) ~9 t2 ^% O0 g
var i,text1,text2,textLength,t;
) |- O7 O5 o5 ~4 e+ ?0 b+ n* n: J3 x$ g" O
function beginTyping()2 D4 H, C2 f v" X3 {1 M+ j
{
6 k( D4 y* K1 Q2 x; S9 Fi=0;
% i4 O8 w8 J% G5 f; ytext1=element.innerText;( A E, V: I) z5 ~( P2 R
textLength=text1.length;
! H4 U) \) S" O1 eelement.innerText="";* L* G' U6 Q) ]; b6 \
text2="";
7 y: M" f! U1 L# y' Z4 U0 }0 h# }t=window.setInterval(element.id+".type()",speed);$ u, e" @/ x8 c6 e
}8 @: h( Y( h+ W
, G; x& k; h; G1 Lfunction type()( [# m) l2 v7 v" {" _$ D6 V
{) d1 _( G+ T0 g7 d9 H
text2=text2+text1.substring(i,i+1);$ A0 l. a6 C) Z/ a" R9 _
element.innerText=text2; P6 }# l* ^: B5 J; C( S u
i=i+1;
$ e% f: K+ k, N( n. kif (i==textLength)
- u( l& I! }1 Y3 s- U" M0 D {( I- d! a1 \3 I
clearInterval(t);' N+ B( r7 b8 h% g
}* k* g( N; i; d- D% h7 F
}
: @. U" X+ {) j( ?- x, G</script>如果您使用 Internet Explorer，可以亲自试一下。
发表于 11-28-2011 05:43