| Ajax and XML: Five cool Ajax widgets |
| |
The carousel widget
Anyone who has done a significant amount of user interface (UI) work can tell you that screen real
estate is critical. It’s important to squeeze as much data as you can into a given space without it
feeling compressed. So, I was pretty impressed when I first saw a carousel control in Apple iTunes.
A carousel control shows several images in a fixed block of space. To the left and right of the block
of images are left and right arrows. If you click the arrows, the images shift to the left or right and
are replaced with a new set of images. In iTunes, the images were album covers, and there was a
carousel control for each genre.
The space savings are significant: You can put 30 album covers in the space of three and still show
each at a reasonable size. And the control is intuitive. It’s like a simplified scrollbar.
The downside is that carousels aren’t easy to implement, especially because part of the allure is the
animation of the images moving to the left or the right. So I was happy to see an open source
carousel called carousel built on the jQuery JavaScript framework.
I implemented a simple carousel widget on the Web page shown in Listing 9.
Listing 9. Carousel.html <html>
<head>
<script type=”text/javascript” src=”js/jquery-1.0.3.js”></script>
<script type=”text/javascript” src=”js/jcarousel.js”></script>
<style type=”text/css”>
#mycarousel { display: none; }
.jcarousel-scope { position: relative; width: 255px;
-moz-border-radius: 10px; background: #D4D0C8;
border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block; outline: none;
border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next { position: absolute; top: 45px;
right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
right: 0px; display: none; }
</style>
<script type=”text/javascript”>
function loadItemHandler( carousel, start, last, available ) {
if (available) { carousel.loaded(); return; }
var cr = carousel;
jQuery.get(“data.xml”, function(data) { appendItemCallback(cr, start, last, data); });
};
function appendItemCallback( carousel, start, last, data ) {
|
|
|
Apr
2008 | Java Jazz Up | 56 |
|
| |
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 |
|
|
|
