На этом шаге мы приведем окончательную версию приложения.
Ниже приводится окончательная версия программного кода 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. Окончательная версия
Полный текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать интерактивные формы.