Spry

Behavior attributes

You can place behavior attributes on elements within a dynamic region to automatically enable common behaviors that would ordinarily require some manual programming.

spry:hover

The spry:hover attribute places a class name on an element whenever the mouse cursor enters the element, and removes that class name as the cursor exits the element.

The value for the spry:hover attribute is the name of the class to put on the element whenever the mouse enters or exits the element.

<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Behavior Attributes Example</title>
<style type="text/css">
.myHoverClass {	 background-color: yellow; } 
</style>
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script><script type="text/javascript">
var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", 
"/employees/employee");
</script>
</head>
<body>
<div spry:region="dsEmployees">
	<ul>
		<li spry:repeat="dsEmployees" spry:hover="myHoverClass">{username}</li>
	</ul>
</div>
</body>
</html>

In the preceding example, whenever the mouse enters an li element, the "myHoverClass" class name is added to the element’s class attribute. It is automatically removed when the mouse exits the element.

spry:select

The spry:select attribute places a class name on an element when the mouse clicks the element.

The value for the spry:select attribute is the name of the class to put on the element whenever the mouse clicks the element.

<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Behavior Attributes Example</title>
<style type="text/css">
.myHoverClass {
	background-color: yellow;
}
.mySelectClass {	color: white;	background-color: black;} 
</style>
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script><script type="text/javascript">var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", 
"/employees/employee");
</script>
</head>
<body>
<div spry:region="dsEmployees">
	<ul>
		<li spry:repeat="dsEmployees" spry:hover="myHoverClass" spry:select="mySelectClass">{username}</li>
	</ul>
</div>
</body>
</html>

In the preceding example, whenever the mouse clicks an li element, the mySelectClass class name is added to the elements class attribute.

If an element on the page with a spry:select attribute was previously selected, the class name used as the value for its spry:select attribute is automatically removed, in effect unselecting that element.

You can use a spry:selectgroup attribute in conjunction with a spry:select attribute to allow you to have more than one set of selections on a page. For a working example of this, see the RSS Reader example in the demos folder of the Spry folder from Adobe Labs.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Behavior Attributes Example</title>
<style type="text/css">
.myHoverClass {
	background-color: yellow;
}
.mySelectClass {	color: white;	background-color: black;} 
.myOtherSelectClass {	color: white;	background-color: black;} 
</style>
<script type="text/javascript" src="../../includes/xpath.js"></script><script type="text/javascript" src="../../includes/SpryData.js"></script><script type="text/javascript">
var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", 
"/employees/employee");
</script></head><body><div spry:region="dsEmployees">
	<ul>
		<li spry:repeat="dsEmployees" spry:hover="myHoverClass" spry:select="mySelectClass"
spry:selectgroup="username">{username}</li>	</ul>
	<ul>
		<li spry:repeat="dsEmployees" spry:hover="myHoverClass" spry:select="myOtherSelectClass"
spry:selectgroup="firstname">{firstname}</li>
	</ul>
</div>
</body></html>

The value of a spry:selectgroup attribute is an arbitrary name. Any element that uses the same name for its spry:selectgroup attribute is automatically unselected when another element with the same select group name is clicked. Other elements with differing spry:selectgroup values are unaffected.