columnHover - це плагін jQuery, який організовує підсвічування стовпців таблиці при наведенні курсору. Плагін вміє працювати навіть з таблицями, що мають осередки з параметрами colspan.
В налаштуваннях плагіна можуть змінюватися чотири змінні. Ось їх назви і тип можливих значень:
- hoverClass - string - CSS клас, який ми присвоюємо осередкам, коли підсвічується їх. Значення за замовчуванням: hover.
- eachCell - boolean - підсвічує колонки таблиці, коли курсор знаходиться над тілом або «футером» таблиці. Якщо параметр відключений, стовпці підсвічуються тільки при наведенні курсору на заголовок таблиці. Значення за замовчуванням: false.
- includeSpans - boolean - параметр вказує, чи потрібно підсвічувати осередки з параметром colspan. Значення за замовчуванням: true.
- ignoreCols - array - масив чисел. Вказує, які колонки таблиці не потрібно підсвічувати. Індексація починається з 1! Значення за замовчуванням: [].
проста підсвічування
Щоб зробити найпростішу підсвічування, потрібно скористатися функцією columnHover ()
Результат демонструє підсвічування колонок при наведенні на заголовки таблиці. Так як ми не вказали жодних параметрів, скрипт буде працювати з настройками за замовчуванням. З усіх ключових параметрів варто звернути на клас hover, який присвоюється підсвічується клітинам. Таким чином, для підсвічуються осередків потрібно задати свої властивості по селектору td.hover (зверніть увагу, саме через точку, а не двокрапка).
перша настройка
Тепер зробимо просту настройку скрипта. Всі параметри передаються в JSON-форматі.
Ми змінили значення eachCell на true, тим самим включивши підсвічування при наведенні курсору на будь-яку клітинку. Ну а hoverClass змінили на betterhover. Тепер стилі підсвічуються осередків варто описати за допомогою селектора td.betterhover.
Робота з collspan
Тепер змінимо структуру таблиці так, щоб в ній з'явилися осередки з параметром colspan.
Тепер посммотрім, що вийде, якщо ми відключимо параметр includeSpans.
Вимкнення підсвічування для заданих колонок
Ну і наостанок перевіримо роботу властивості ignoreCols. Спробуємо вимкнути підсвічування для стовпців C +, C-, D +, D-. Вони у нас під порядковими номерами 5, 6, 7, 8. Так і напишемо в коді:
До речі, якщо додати ще підсвічування і осередкам в рядку за допомогою звичайного css, вийде цікавий ефект перехрестя.
Зараз у нас в стилях знаходиться приблизно такий код:
Додаємо ще один селектор до цих стилів:
На цьому все, урок закінчений.