Web Development with jQuery®

Loading HTML Snippets from the Server (^) ❘ 197
height: 28px;
background: url('tree/internal.png') no-repeat left 1px;
padding: 4px 0 0 28px;
}
li.folderTreeDirectoryBranch {
position: relative;
padding: 0 0 0 20px;
zoom: 1 ;
}
img.folderTreeHasChildren {
position: absolute;
top: 3px;
left: 0 ;
}
div.folderTreeIcon {
background: url('tree/folder.png') no-repeat left;
width: 16px;
height: 16px;
margin: 0 5px 0 0 ;
float: left;
}
div.folderTreeBranchWrapper {
display: none;
}
Then the following JavaScript demonstrates how folders in a tree structure are loaded asynchro-
nously. Each folder is an HTML snippet that loads separately from the server, which makes the
initial download much smaller and the overall application much more effi cient.
$(document).ready(
function()
{
$('img.folderTreeHasChildren').click(
function()
{
var arrow = 'tree/down.png';
if (!$(this).next().children('ul').length)
{
$(this).next().load(
'Example%207-4/' +
$(this)
.prev()
.data('id') + '.html',
function()
{
$(this)
.show()
.prev()
.attr('src', arrow);
}
);
}
else
{
http://www.it-ebooks.info