Magazine
 
Quick Review:Ajax
 
Ajax and XML: Five cool Ajax widgets
 

var prevOut = function() {
jQuery(this).attr(“src”, “img/horizontal-ie7/prev.gif”); };
var prevDown = function() {
jQuery(this).attr(“src”, “img/horizontal-ie7/prev-down.gif”); };
function prevButtonStateHandler(carousel, button, enabling) {
if (enabling) {
jQuery(button).attr(“src”, “img/horizontal-ie7/prev.gif”)
.mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
} else {
jQuery(button).attr(“src”, “img/horizontal-ie7/prev-disabled.gif”)
.unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
}
}
jQuery(document).ready(function() {
jQuery().ajaxStart(function() { jQuery(“.loading”).show(); });
jQuery().ajaxStop(function() { jQuery(“.loading”).hide(); });
jQuery(“#mycarousel”).jcarousel({
itemVisible: 3, itemScroll: 2, wrap: true,
loadItemHandler: loadItemHandler,
nextButtonStateHandler: nextButtonStateHandler,
prevButtonStateHandler: prevButtonStateHandler
});
});
</script></head><body><div id=”mycarousel”>
<div class=”loading”>
<img src=”img/loading.gif” width=”16" height=”16" border=”0" />Loading...</div>
<img src=”img/horizontal-ie7/prev.gif” border=”0" class=”jcarousel-prev” />
<img src=”img/horizontal-ie7/next.gif” border=”0" class=”jcarousel-next” />
<ul></ul>
</div></body></html>

Yes, there is a lot more to it than in the previous examples. But most of the code is setting up the graphics and interpreting the Ajax data returned from the server. In fact, most of the code for this article is based on one of the examples provided with the download. So, I didn’t have to learn much or read any documentation to use the control.
The data for the carousel is shown in Listing 10.

Listing 10. Data.xml

<images>
<img href=”pics/image1.jpg” />
<img href=”pics/image2.jpg” />
<img href=”pics/image3.jpg” />
<img href=”pics/image4.jpg” />
</images>

Apr 2008 | Java Jazz Up | 57
previous
index
next
 
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,

30
, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53 , 54, 55, 56, 57,

58
, 59, 60, 61, 62, 63 , 64, 65 , 66 , 67 , 68 , 69 , 70, 71, 72, 73, 74, 75, 76, 77, 78,   Download PDF