jQuery 1.4 Animation Techniques - Index of

[ 39 ]
Chapter 2
#messageList table {
border-collapse:collapse; margin:10px 0; background-color:#666;
}
#messageList th, #messageList td {
width:100px; padding:10px; color:#eee; text-align:left;
border-bottom:1px solid #eee;
}
#messageList td { background-color:#ccc; color:#000; }
#messageList th.sub { width:220px; }
#messageList th.del { text-align:right; }
#messageList table a {
padding:0 7px 2px; float:right; background-color:#ea3c37;
color:#fff; text-align:center; text-decoration:none;
border:1px solid #990000; -moz-border-radius:5px;
-webkit-border-radius:5px; border-radius:5px;
}
.confirm { color:#eee; font-size:16px; }
.confirm button { margin:0 10px; }
.confirm a { font-size:12px; color:#ffcaca; }
4. Save this as fadeTo.css in the css folder.
What just happened?
The underlying HTML is relatively simple; we have an outer containing within which
reside a HTML5 element and a . Each row of the corresponds
to a received message. Don't forget to link to the fadeTo.css file in the of the new
page, as we have in previous examples.
As with previous examples, the CSS we use for this example is purely arbitrary and is used
simply to make the example presentable. We use the CSS3 rounded corner style property
again, to give a nice effect to the widget. Once again, these styles won't work in IE, but the
worst that will happen is that it will have square corners.
Time for action – adding the behavior
Finally we can add the script that will make it all work. In the empty function at the bottom
of the element, add the following:
var messageList = document.getElementById("messageList"),
messages = $("table", messageList),
confirmDiv = $("", {
"class": "confirm",
text: "Really delete?"