atlas运用behavior
1
<%@ Page Language="C#" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6<head id="Head1" runat="server">
7 <style type="text/css">
8
.start{background-color:yellow;border:dashed 2px black;}
9 .hover{font-size:40pt;background-color:yellow;border:dashed 2px black;}
10 </style>
11 <title>ASP.NET "Atlas" Demo: Sys.Control Behaviors</title>
12 <link href="intro.css" type="text/css" rel="Stylesheet" />
13</head>
14
15<body>
16 <form id="form1" runat="server">
17 <div>
18 <atlas:ScriptManager runat="server" ID="ScriptManager1">
19 <Scripts>
20 <atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
21 </Scripts>
22 </atlas:ScriptManager>
23 <div id="Div1" class="title">
24 <h2>ASP.NET "Atlas" Demo: Sys.Control: Behaviors</h2>
25 Behaviors are simply defined as components that you can add to an ASP.NET
26 "Atlas" client-side control that defines some functionality. The behavior
27 is associated to some event on the associated element to which the behavior
28 is attached. The click event that you have seen previously for example is
29 a simple behavior that is exposed as a top-level event on the control.
30 Typically behaviors define some more complex UI actions and functionality.
31 <p></p>
32 There are a number of in-built, basic behaviors in the ASP.NET "Atlas"
33 framework. For example:
34 <ol>
35 <li>Click behavior: provides simple click behavior handling;</li>
36 <li>Floating behavior: provides drag and drop;</li>
37 <li>Hover behavior; provides the typical DHTML events, onmouseover, onmouseout, onfocus and onblur
38 handling;</li>
39 <li>Auto-complete behavior; a specialized behavior that provides the means
40 to complete entries added to text boxes for example. The behavior requires handlers to
41 provide the auto-complete results.</li>
42 </ol>
43 </div>
44 <div class="description">
45 <hr />
46
47 <h3 style="text-decoration:underline">Example 1: Floating and drag-drop behavior</h3>
48 <div id="DescriptionDrag" style="width:200px;height:200px;">
49 <div id="Handle" class="draghandle">Drag by clicking on this element</div>
50 <div style="text-align:center;font-weight:bold;">Word (n)</div>
51 A sound or a combination of sounds.
52 </div>
53 <div style="width:200px;height:200px;"></div>
54
55 <hr />
56 <h3 style="text-decoration:underline">Example 2: Click behavior</h3>
57 <div id="panel">The clickBehavior of the following elements affect this element.</div>
58 <br />
59 <span id="hideLabel" class="buttonstyle2">Hide</span>
60 <span id="showLabel" class="buttonstyle2">Show</span>
61
62
63 <hr />
64 <h3 style="text-decoration:underline">Example 3: Hover behavior</h3>
65 <div id="panel2">This element is associated to the hoverBehavior.</div>
66 <br />
67 </div>
68
69 <script type="text/xml-script">
70 <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
71 <components>
72 <control id="panel" cssClass="start" />
73 <label id="hideLabel">
74 <behaviors>
75 <clickBehavior>
76 <click>
77 <setProperty target="panel" property="visible" value="false" />
78 </click>
79 </clickBehavior>
80 </behaviors>
81 </label>
82 <label id="showLabel">
83 <behaviors>
84 <clickBehavior>
85 <click>
86 <setProperty target="panel" property="visible" value="true" />
87 </click>
88 </clickBehavior>
89 </behaviors>
90 </label>
91
92 <control id="panel2" cssClass="start">
93 <behaviors>
94 <hoverBehavior unhoverDelay="500">
95 <hover>
96 <setProperty target="panel2" property="cssClass" value="hover"/>
97 </hover>
98 <unhover>
99 <setProperty target="panel2" property="cssClass" value="start"/>
100 </unhover>
101 </hoverBehavior>
102 </behaviors>
103 </control>
104
105 <control id="DescriptionDrag" cssClass="floatwindow">
106 <behaviors>
107 <floatingBehavior handle="DescriptionDrag">
108 </floatingBehavior>
109 </behaviors>
110 </control>
111
112 </components>
113 </page>
114 </script>
115 </div>
116 </form>
117</body>
118</html>
119
<%@ Page Language="C#" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">6
<head id="Head1" runat="server">7
<style type="text/css">8
.start{background-color:yellow;border:dashed 2px black;}
.start
9
.hover{font-size:40pt;background-color:yellow;border:dashed 2px black;}10
</style>11
<title>ASP.NET "Atlas" Demo: Sys.Control Behaviors</title>12
<link href="intro.css" type="text/css" rel="Stylesheet" />13
</head>14
15
<body>16
<form id="form1" runat="server">17
<div>18
<atlas:ScriptManager runat="server" ID="ScriptManager1">19
<Scripts>20
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />21
</Scripts>22
</atlas:ScriptManager>23
<div id="Div1" class="title">24
<h2>ASP.NET "Atlas" Demo: Sys.Control: Behaviors</h2>25
Behaviors are simply defined as components that you can add to an ASP.NET 26
"Atlas" client-side control that defines some functionality. The behavior 27
is associated to some event on the associated element to which the behavior 28
is attached. The click event that you have seen previously for example is 29
a simple behavior that is exposed as a top-level event on the control. 30
Typically behaviors define some more complex UI actions and functionality.31
<p></p>32
There are a number of in-built, basic behaviors in the ASP.NET "Atlas" 33
framework. For example:34
<ol>35
<li>Click behavior: provides simple click behavior handling;</li>36
<li>Floating behavior: provides drag and drop;</li>37
<li>Hover behavior; provides the typical DHTML events, onmouseover, onmouseout, onfocus and onblur38
handling;</li> 39
<li>Auto-complete behavior; a specialized behavior that provides the means 40
to complete entries added to text boxes for example. The behavior requires handlers to 41
provide the auto-complete results.</li>42
</ol>43
</div>44
<div class="description">45
<hr />46
47
<h3 style="text-decoration:underline">Example 1: Floating and drag-drop behavior</h3>48
<div id="DescriptionDrag" style="width:200px;height:200px;">49
<div id="Handle" class="draghandle">Drag by clicking on this element</div>50
<div style="text-align:center;font-weight:bold;">Word (n)</div>51
A sound or a combination of sounds. 52
</div>53
<div style="width:200px;height:200px;"></div> 54
55
<hr />56
<h3 style="text-decoration:underline">Example 2: Click behavior</h3>57
<div id="panel">The clickBehavior of the following elements affect this element.</div>58
<br />59
<span id="hideLabel" class="buttonstyle2">Hide</span> 60
<span id="showLabel" class="buttonstyle2">Show</span>61
62
63
<hr />64
<h3 style="text-decoration:underline">Example 3: Hover behavior</h3>65
<div id="panel2">This element is associated to the hoverBehavior.</div>66
<br />67
</div>68
69
<script type="text/xml-script">70
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">71
<components>72
<control id="panel" cssClass="start" />73
<label id="hideLabel">74
<behaviors>75
<clickBehavior>76
<click>77
<setProperty target="panel" property="visible" value="false" />78
</click> 79
</clickBehavior> 80
</behaviors>81
</label>82
<label id="showLabel">83
<behaviors>84
<clickBehavior>85
<click>86
<setProperty target="panel" property="visible" value="true" />87
</click> 88
</clickBehavior> 89
</behaviors>90
</label>91
92
<control id="panel2" cssClass="start">93
<behaviors>94
<hoverBehavior unhoverDelay="500">95
<hover>96
<setProperty target="panel2" property="cssClass" value="hover"/>97
</hover>98
<unhover>99
<setProperty target="panel2" property="cssClass" value="start"/>100
</unhover>101
</hoverBehavior>102
</behaviors>103
</control>104
105
<control id="DescriptionDrag" cssClass="floatwindow">106
<behaviors>107
<floatingBehavior handle="DescriptionDrag">108
</floatingBehavior>109
</behaviors>110
</control>111
112
</components>113
</page>114
</script>115
</div>116
</form>117
</body>118
</html>119
