М есто
Гонщ ик 1
7Johkh
1
N ico R osberg
25
2
Jenson Button
18
3
Lewis Hamilton
15
диум). Таблица как таб-
лица - ничего особен-
ного (рис. 1).
Сейчас мы ее оживим,
и наша таблица при на-
ведении курсора мыши
будет выделять строку под ним салатовым цветом.
Для этого нам понадобится сделать буквально 4
шага, но очень маленьких.
I
1
В заголовок
HEAD
веб-страницы до-
LUCll
I .бавляем подключение библиотеки:
<script type=”text/javascript”
src="hltable.js”x/script>
Чтобы строка при наве-
.дении курсора выделя-
лась, в списке стилей следует описать
класс, например, с именем hoverRow:
Шаг 1.
ф
Шаг 2.:
Шаг 4.!
М есто
Гонщ ик l £ ^ i
гОчки
1
N ico R osberg
25
2
:
Jenson Button
18
u
=
Lewis Hamilton
s
o
.hoverRow { background-color: #CCFFCC;}
I | о п Q Для таблицы указать идентифика-
L u d l
О «тор (например, id=”mytab”), чтобы
библиотека могла к ней обратиться как к конкрет-
ному объекту:
<table id=”mytab” border=”0”.
..
После таблицы в код веб-страницы
следует по-
местить команду инициали-
зации подсветки
highlightTableRows.
При
этом, если данную команду
поместить выше таблицы,
то это ни к чему не приве-
дет, поскольку к моменту вызова этой функции
таблица в веб-странице уже должна существовать
<script type=”text/javascript”>
highlightTableRows (“mytab”,"hoverRow”,””, false);
</script>
Функция принимает четыре ар-
гумента, первым из которых сле-
дует идентификатор таблицы,
затем класс стиля выделения
при наведении курсора мыши на
строку, далее класс стиля выде-
ления выбранной строки по клику левой кнопкой
мыши, и последний аргумент включает множест-
венный выбор строк (так называемый
m u ltis e le c -
tio n ).
Но о последних двух аргументах поговорим
позже. Теперь наша таблица будет как бы следить
за курсором пользователя (рис. 2), выделяя под
ним строку таблицы салатовым цветом.
Выбор строк
Н
у вот, как я и обещал, наша таблица ожила, а
интерактивность веб-страницы повысилась.
Но зачем останавливаться на достигнутом? Давайте
создадим для пользователя возможность выделять
нужные ему строки в нашей турнирной таблице. Для
этого нужно сделать всего лишь два простых шага.
В список стилей до-
бавляем описание
класса, например, clickedRow, для выде-
ления выбранной строки таблицы красным
цветом, и чтобы на этом темном фоне
текст в ячейках отображался белым цве-
том для повышения контрастности:
.clickedRow { background-color: #F00; color:
#FFF;;}
I
Q В вызове уже знакомой нам фун-
Ш С М
Сш %
кции highlightTableRows в качес-
тве третьего аргумента
указываем класс clicked-
Row стиля выделения вы-
бранной строки:
highlightTableRows
(“mytab”,” hoverRow”,
"clickedRow”, false);
При этом получим вот такую таблицу, где одно-
временно может быть выбрана одна строка, и вы-
делена другая (рис. 3).
Мультивыбор
М есто
ГонщикІ- ^
J
Очки
1
N ico R osberg
25
2
Jenson Button
18
3
Lew is Hamilton
15
М
1 М е ст о
О чки
■j
N ico R osb erg
2 5
Щ
1
Jenson Button
18
!l
ü
_______
L ew is Hamilton
Ü
U
одуль hltable.js настолько хорош, что по-
зволяет осуществлять множественный вы-
бор строк, т.е. одновременный выбор
нескольких строк в таблице.
Для этого все, что нужно сделать -
это в вызове функции highlightTable-
Rows указать для последнего аргумен-
та значение
true
, тем самым включим
мультивыбор (рис. 4).
Тогда выбор строк таблицы будет осуществ-
ляться, как это происходит обычно в любом
диалоговом окне выбора файлов, когда поль-
зователь удерживает нажатой клавишу Ctrl и
кликает на желаемый объект.
Подробно о библиотеке можно
почитать на странице
www.tigir.com/highlight_table_-
rows.htm. Рекомендую этот
сайт, поскольку для себя вы там
найдете еще много полезный ве-
щей, которые реализованы на языке JavaScript.
Сортировка таблицы
H
«
і
|аша турнирная таблица получилась весьма
I приветливой. Но предположим, что она содер-
жит гораздо больше, чем три строки. Тогда найти в
ней нужную информацию будет уже не так просто.
Чтобы пользователь сам мог выбрать наиболее
удобный для себя режим отображения информа-
ции в таблице, например, сортировка строк, дос-
таточно выполнить несколько манипуляций, о ко-
торых пойдет речь далее.
Скачиваем библиотеку
вог^аЫе_1ауа8спрЫ!Ь.гаг, размер 33 Кб) и под-
Шаг 1.
предыдущая страница 36 Компьютер 2012 11-12 читать онлайн следующая страница 38 Компьютер 2012 11-12 читать онлайн Домой Выключить/включить текст