Event Handling with Atlas Client Controls - Base Methods
(Page 2 of 4 )
As discussed earlier in “Introducing Atlas Client Controls,” Atlas supports common methods for each control within Sys.UI. Most of these set some property that JavaScript exposes for all controls. Two examples of this are the get_accessKey()andset_accessKey()methods that control the DOMaccesskeyproperty.
Methods with somewhat more visible results are those for controlling the CSS class of an element. This makes changing the layout of elements on the fly very easy. Here are the methods that are supported:
get_cssClass()
Reads the CSS class of an element
set_cssClass()
Sets the CSS class of an element
addCssClass()
Adds a CSS class to an element
containsCssClass()
Determines whether an element contains a CSS class
removeCssClass()
Removes one CSS class from an element
toggleCssClass()
Adds the class to an element if it is not already
there; otherwise, removes the class
Example 4-8 demonstrates thetoggleClassClass()method, which internally usesaddCssClass(),containsCssClass(), andremoveCssClass(). The example also uses theget_cssClass()method. In the page, the following three CSS classes are defined that can complement each other (i.e., every class covers another style).
<style type="text/css">
.style1 { font-family: Monospace; }
.style2 { border-style: solid; }
.style3 { color: #00f; }
</style>
The JavaScript code in the example selects one of these classes at random and then callstoggleCssClass(). ALabelcontrol periodically displays the current class or classes being used.
Example 4-8. Using the base CSS methods for Atlas controls
ControlCSS.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Atlas</title>
<style type="text/css">
.style1 { font-family: Monospace; }
.style2 { border-style: solid; }
.style3 { color: #00f; }
</style>
<script language="JavaScript" type="text/javascript">
function pageLoad() {
window.setInterval(
function() {
var label = new Sys.UI.Label($("Label1"));
var rnd = Math.ceil(3 * Math.random());
label.toggleCssClass("style" + rnd);
label.set_text(label.get_cssClass());
},
1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server">
</atlas:ScriptManager>
<div>
CSS class(es):
<label id="Label1">
</label>
</div>
</form>
</body>
</html>
Figure 4-8 shows the result.
Figure 4-8. Two styles were applied at random
Next: Handling Control Events >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of the book Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Check it out today at your favorite bookstore. Buy this book now.
|
|
