Page 299 - DCAP109_GRAPHIC_TOOLS

Graphic Tools

Notes else Spry.Utils.removeClassName(ele,”grayOut”);
}
}
}
There is a class defined in atom.css called grayOut that changes the opacity of an element
to 30%.

We pass in the name of the class that we want to highlight. We loop through the data set
and apply the grayOut class to all those element divs that do not have the class name that
is passed in. We use the id=”ds_{No}” that we set up on the element divs to identify the
divs that need this new class.
This function gets the data in ds1 and from that we get the number of rows (numRows).

We then loop through all the element divs. We use Spry.Utils to find out if the element
does not have the class name we are looking to highlight. If it does not have it, we add the
grayOut class. If it does have the class name we are looking for, we leave it alone. That’s
the inverse highlighting. If it already has the grayOut class applied, we assume it is from
a previous highlight and remove it.
The other function clears any highlighting by looping through the element divs and
removes any instance of the grayOut class.

To use these functions, we use the other data sets. All three work the same way. For
example:
<div> <span class=”redText”>Element Types: </span> <span
spry:region=”types” spry:repeat=”types” class=”SpryHiddenRegion”> <a
href=”#” onclick=”GrayOutTable(‘{Element_Type}’);”>{Element_Type}</
a> </span></div>
z The div is so we can align this group correctly.

z The first <span> simply adds the redText class to the initial text.
z The second <span> defines the spry:region for, in this case, the types data set.
The spry:repeat is tied to the same data set. The SpryHiddenRegion hides the
markup until the page is ready.
z The <a> has a null href so we get the hand cursor. The onclick attribute is the
actual function. The parameter in the function is the Element_Type data reference
and it is the value we are sending to the function. We want to highlight that Element
Type. The actual text of the link is also the Element Type. The space ( ) is
used to separate the links when we repeat through the data set.
So this will loop through the data set, which has the distinct Element Types and attaches
the function to each type. This easily creates the list of highlight types.
We use the same code for the groups and periods data sets. They all go to the same
function, since we are attaching those values on the element div as class names. So we can
use these values to pick the right elements to highlight.
Conclusion
This is a nice example of how to use Spry for more complicated web layouts. With a small
amount of markup, some CSS and a couple custom functions, you have a functional,
interactive learning tool.
Contd...

292 LOVELY PROFESSIONAL UNIVERSITY