HTML and CSS Reference
In-Depth Information
• All download links for software components are of the form
xxxx
-comp.zip
: for
example,
Component1-comp.zip
.
This hiding and showing of download links happens on the client side using jQuery attribute selectors.
Listing 2-8 shows the skeleton of this code.
Listing 2-8.
Hiding or Showing Download Links Using Attribute Selectors
$(document).ready(function () {
$("#DropDownList1").change(function () {
switch ($("#DropDownList1").val()) {
case "A":
case "P":
case "WP":
case "C":
}
})
})
The
ready
function wires an event handler for the
change
event of
DropDownList1
. As you might guess,
the
change
event is raised when the selection in the
DropDownList
changes. The
change
event handler
consists of a JavaScript
switch
statement that checks for the selected value. Let's discuss what goes in each
case section.
If the selected value is
"A"
, meaning All Downloads, then the
display
CSS property of all the table rows
is set to
block
. This ensures that all types of downloads (products, components, and white papers) are
shown in the grid:
case "A":
$("#GridView1 tr a").parent().css("display", "block");
break;
If the selected value is
"P"
(Products), then the
attribute contains
selector (
*=
) is used to match all the
anchor elements whose
href
attribute contains the string
"products/"
. Once matched, the table rows
containing the matched hyperlink elements are shown, and other rows are kept hidden:
case "P":
$("#GridView1 tr a[href *= 'products/']").parent().css("display", "block");
$("#GridView1 tr a[href |= 'Paper']").parent().css("display", "none");
$("#GridView1 tr a[href $= '-comp.zip']").parent().css("display", "none");
break;
If the selected value is
"WP"
(White Papers), the code uses the
attribute contains prefix
selector (
|=
) to
select hyperlinks prefixed with the text
"paper"
. Notice that the URLs for white papers begin with
"Paper-"
,
but the selector specifies only
"Paper"
; this is because while matching the elements, the
attribute contains
prefix
selector automatically assumes a hyphen (
-
). Once selected, the table rows containing those
hyperlinks are shown, and the other rows are kept hidden:
case "WP":
$("#GridView1 tr a[href *= 'products/']").parent().css("display", "none");
$("#GridView1 tr a[href |= 'Paper']").parent().css("display", "block");
$("#GridView1 tr a[href $= '-comp.zip']").parent().css("display", "none");
break;
Finally, if the selected value is
"C"
(Components), the code selects links related to components using
the
attribute ends with
selector (
$=
) and displays and hides table rows accordingly:
