На этом шаге мы приведем окончательную версию приложения.
Ниже приводится окончательная версия программного кода JavaScript, полученная в результате совместного использования всех функций:
$(document).ready(function() {
$('table.striped').bind('stripe', function() {
$('tbody', this).each(function() {
$(this).find('tr:not(:has(th))')
.filter(function() {
return this.style.display != 'none';
})
.removeClass('odd').addClass('even')
.filter(function(index) {
return (index % 6) < 3;
}).removeClass('even').addClass('odd');
});
}).trigger('stripe');
});
$(document).ready(function() {
var $authorCells = $('table.striped td:nth-child(3)');
var $tooltip = $('<div id="tooltip"></div>').appendTo('body');
var positionTooltip = function(event) {
var tPosX = event.pageX;
var tPosY = event.pageY + 20;
$tooltip.css({top: tPosY, left: tPosX});
};
var showTooltip = function(event) {
var authorName = $(this).text();
var action = 'Выделить';
if ($(this).parent().is('.highlight')) {
action = 'Снять выделение';
}
$tooltip
.text(action + ' автора: ' + authorName)
.show();
positionTooltip(event);
};
var hideTooltip = function() {
$tooltip.hide();
};
$authorCells
.addClass('clickable')
.hover(showTooltip, hideTooltip)
.mousemove(positionTooltip)
.click(function(event) {
var authorName = $(this).text();
$authorCells.each(function(index) {
if (authorName == $(this).text()) {
$(this).parent().toggleClass('highlight');
}
else {
$(this).parent().removeClass('highlight');
}
});
showTooltip.call(this, event);
});
});
$(document).ready(function() {
var collapseIcon = 'images/bullet_toggle_minus.png';
var collapseText = 'Свернуть этот раздел';
var expandIcon = 'images/bullet_toggle_plus.png';
var expandText = 'Развернуть этот раздел';
$('table.collapsible tbody').each(function() {
var $section = $(this);
$('<img />').attr('src', collapseIcon)
.attr('alt', collapseText)
.prependTo($section.find('th'))
.addClass('clickable')
.click(function() {
if ($section.is('.collapsed')) {
$section.removeClass('collapsed')
.find('tr:not(:has(th)):not(.filtered)')
.fadeIn('fast');
$(this).attr('src', collapseIcon)
.attr('alt', collapseText);
}
else {
$section.addClass('collapsed')
.find('tr:not(:has(th))')
.fadeOut('fast', function() {
$(this).css('display', 'none');
});
$(this).attr('src', expandIcon)
.attr('alt', expandText);
}
$section.parent().trigger('stripe');
});
});
});
$(document).ready(function() {
$('table.filterable').each(function() {
var $table = $(this);
$table.find('th').each(function(column) {
if ($(this).is('.filter-column')) {
var $filters = $('<div class="filters"></div>');
$('<h3></h3>')
.text('Filter by ' + $(this).text() + ':')
.appendTo($filters);
$('<div class="filter">Все</div>').click(function() {
$table.find('tbody tr').removeClass('filtered');
$(this).addClass('active')
.siblings().removeClass('active');
$table.trigger('stripe');
}).addClass('clickable active').appendTo($filters);
var keywords = {};
$table.find('td:nth-child(' + (column + 1) + ')')
.each(function() {
keywords[$(this).text()] = $(this).text();
});
$.each(keywords, function(index, keyword) {
$('<div class="filter"></div>').text(keyword)
.bind('click', {key: keyword}, function(event) {
$('tr:not(:has(th))', $table).each(function() {
var value = $('td', this).eq(column).text();
if (value == event.data['key']) {
$(this).removeClass('filtered');
}
else {
$(this).addClass('filtered');
}
});
$(this).addClass('active')
.siblings().removeClass('active');
$table.trigger('stripe');
}).addClass('clickable').appendTo($filters);
});
$filters.insertBefore($table);
}
});
});
});
Рис.1. Окончательная версия
Полный текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать интерактивные формы.