PHP и WEB для новичков: живые таблицы

Таблицы для сайта – обычное дело. В таблицах отображаются какие-то данные, характеристики, списки. Но те таблицы, которые получаются обычным способом, выглядят безжизненными, безучастными к действиям посетителя сайта. Как их оживить?

Для этого воспользуемся библиотекой hltable.js (www.tigir.com/js/hltable.js или select_table_javascript_lib.rar размер 4 Кб), написанной на JavaScript. Она превосходно работает в таких распространенных браузерах, как Mozilla FireFox, Google Chrome, Opera, Internet Explorer, Safari.

Для начала рассмотрим обычную таблицу. Для примера я взял турнирную таблицу этапа гонки Формула 1 гран-при Китая, состоявшегося 15 апреля 2012 года. Напишем HTML-код типичной таблицы:

В нашей таблице есть заголовок с названиями колонок, расположенный в первой строке (постоянно выделен серым фоном). Ниже идут три строки с гонщиками, занявшими в гонке первые три места (вошедшие на подиум). Таблица как таблица – ничего особенного (рис. 1).

Сейчас мы ее оживим, и наша таблица при наведении курсора мыши будет выделять строку под ним салатовым цветом. Для этого нам понадобится сделать буквально 4 шага, но очень маленьких.

Шаг 2. Чтобы строка при наведении курсора выделялась, в списке стилей следует описать класс, например, с именем hoverRow:

Шаг 3. Для таблицы указать идентификатор (например, id=”mytab”), чтобы библиотека могла к ней обратиться как к конкретному объекту:

Шаг 4. После таблицы в код веб-страницы следует поместить команду инициализации подсветки highlightTableRows. При этом, если данную команду поместить выше таблицы, то это ни к чему не приведет, поскольку к моменту вызова этой функции таблица в веб-странице уже должна существовать.

Функция принимает четыре аргумента, первым из которых следует идентификатор таблицы, затем класс стиля выделения при наведении курсора мыши на строку, далее класс стиля выделения выбранной строки по клику левой кнопкой мыши, и последний аргумент включает множественный выбор строк (так называемый multiselection). Но о последних двух аргументах поговорим позже. Теперь наша таблица будет как бы следить за курсором пользователя (рис. 2), выделяя под ним строку таблицы салатовым цветом.

Ну вот, как я и обещал, наша таблица ожила, а интерактивность веб-страницы повысилась. Но зачем останавливаться на достигнутом? Давайте создадим для пользователя возможность выделять нужные ему строки в нашей турнирной таблице. Для этого нужно сделать всего лишь два простых шага.

Шаг 1. В список стилей добавляем описание класса, например, clickedRow, для выделения выбранной строки таблицы красным цветом, и чтобы на этом темном фоне текст в ячейках отображался белым цветом для повышения контрастности:

Шаг 2. В вызове уже знакомой нам функции highlightTableRows в качестве третьего аргумента указываем класс clickedRow стиля выделения выбранной строки:

При этом получим вот такую таблицу, где одновременно может быть выбрана одна строка, и выделена другая (рис. 3).

Модуль hltable.js настолько хорош, что позволяет осуществлять множественный выбор строк, т.е. одновременный выбор нескольких строк в таблице.

Для этого все, что нужно сделать – это в вызове функции highlightTableRows указать для последнего аргумента значение true, тем самым включим мультивыбор (рис. 4).

Тогда выбор строк таблицы будет осуществляться, как это происходит обычно в любом диалоговом окне выбора файлов, когда пользователь удерживает нажатой клавишу Ctrl и кликает на желаемый объект.

Подробно о библиотеке можно почитать на странице www.tigir.com/highlight_table_rows.htm. Рекомендую этот сайт, поскольку для себя вы там найдете еще много полезный вещей, которые реализованы на языке JavaScript.

Наша турнирная таблица получилась весьма приветливой. Но предположим, что она содержит гораздо больше, чем три строки. Тогда найти в ней нужную информацию будет уже не так просто.

Чтобы пользователь сам мог выбрать наиболее удобный для себя режим отображения информации в таблице, например, сортировка строк, достаточно выполнить несколько манипуляций, о которых пойдет речь далее.

Шаг 1. Скачиваем библиотеку (select_table_javascript_lib.rar, размер 33 Кб) и подключаем ее внутри тега BODY, предварительно объявив важные переменные:

где параметр initial_sort_id указывает порядковый номер столбца (0 – столбец “Место”, 1 – столбец “Гонщик”, 2 – “Очки”), который будет отсортирован при загрузке веб-страницы.

Параметр initial_sort_up указывает направление сортировки (0 – сортировка вниз, т.е. по возрастанию или 1 – сортировка вверх, т.е. по убыванию).

Шаг 2. Указываем теги THEAD (шапка таблицы) и TBODY (основная часть таблицы). Обычно их мало кто использует, но здесь эти теги весьма кстати. В принципе, тег TBODY можно и не указывать, поскольку достаточно обозначить хотя бы заголовочную часть таблицы.

Шаг 3. Также нужно создать две картинки, которые бы указывали текущий вариант сортировки – sort_0.gif (картинка сортировки вниз) и sort_1.gif (картинка сортировки вверх). Поместите их, например, в папку “skin”.

Я обычно называю папки с картинками для сайта именно так, но ничто не мешает использовать для наших целей классическую папку “images”. Дело хозяйское, просто тогда вам нужно будет поменять в коде скрипта sort_table.js значение переменной img_dir.

При необходимости в скрипте библиотеки можно указать, должна ли быть сортировка регистрозависимой или нет (параметр sort_case_sensitive).

Третий шаг необязателен, но может добавить наглядности, отображая режим, в котором находится сортировка и для какого столбца она осуществляется в данный момент (рис. 5).

В качестве дополнения, хочу предложить еще одну библиотеку, которая позволяет для форм создать очень удобный выскакивающий календарик, пользуясь которым пользователь без особого труда сможет выбрать необходимую дату при заполнении веб-формы.

Библиотека состоит из трех модулей: calendar-en.js, calendar.js, calendarm.js и списка стилей calendar-mos.css (calendar_javascript_lib.rar, размер 11 Кб). Подключить библиотеку очень легко. Достаточно объявить все модули и список стилей, как показано на примере:

Далее в самой форме располагается текстовое поле обязательно с идентификатором, например, id=”date”. Вслед за полем можно расположить либо кнопку, либо иконку с изображением календарика, что будет, несомненно, более интуитивно понятным, при клике на которую следует вызывать функцию return showCalendar.

Функция showCalendar принимает два параметра. Первый параметр – это идентификатор текстового поля формы, куда следует вписать дату, которую выберет пользователь.

Второй параметр – это формат, в котором следует выдавать в поле формы выбранные в календаре данные. Формат может иметь вид, например, 'y-mm-dd', где y – это год, mm – месяц и dd – день.

Таким образом, пользователь кликает на иконке, после этого появляется окно календаря, где он выбирает необходимую дату. При этом можно листать месяцы и годы (рис. 6).

После того, как пользователь двойным кликом выбрал дату, окно календаря исчезает, а выбранная дата в соответствующем формате вписывается в поле формы. Например, для выбранной даты 12 апреля 2012 года (День космонавтики) в поле будет записана строка “2012-04-12”.

Все JavaScript-библиотеки, о которых рассказывается в нашем журнале можно найти на странице Скачать полезные программы в секции “Программирование”.

Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.

PHP и WEB для новичков: живые таблицы

Выбор строк

Мультивыбор

Сортировка таблицы

Укажите дату