| 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 |
|
| |
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 |
|
|
|
