Плагин стилевого оформления таблиц на JQuery. Прост в установке и бесплатен. В примере содержатся различные готовые варианты, которые можно сразу использовать.
Пример использования:
Между <head></head>
:
Использование плагина в самом простом варианте:
$('table').styleTable();
Это придаст стилевое оформление всем таблицам на странице. Убедитесь, что обрамили ваш код в функцию полной загрузки документа:
$(document).ready(function(){ $('table').styleTable(); });
Вы также можете определить таблицу(ы) с определенным классом или id
, которые вы желали бы оформить:
$(document).ready(function(){ $('table').styleTable(); // для всех таблиц $('table.fancy').styleTable(); // для всех таблиц с классом fancy $('table#stylish').styleTable(); // определенной таблицы с id=" stylish" });
Убедитесь, что первой подключили библиотеку JQuery, и затем плагин:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styletable.jquery.plugin.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $('table').styleTable(); }); </script>
Настройки плагина:
// Параметры для заголовков th_bgcolor // цвет фона заголовка th_image // фоновое изображение заголовка th_color // цвет текста заголовка th_border_color // цвет верхней и нижней границ заголовка // // Параметры для строк tr_odd_bgcolor // цвет фона нечетных строк tr_even_bgcolor // цвет фона четных строк tr_bgcolor //цвет фона всех строк tr_hover_bgcolor // цвет фона строки при наведении tr_odd_image // изображение фона нечетных строк tr_even_image // изображение фона четных строк tr_image // изображение фона всех строк tr_hover_image // строка фонового изображения при наведении tr_odd_color // цвет текста нечетных строк tr_even_color // цвет текста четных строк tr_color // цвет всех строк текста tr_border_color // цвет границ всех строк // // Параметры для колонок td_odd_bgcolor // цвет фона нечетной колонки td_even_bgcolor // цвет фона четной колонки td_hover_bgcolor // цвет фона колонки при наведении td_odd_image // изображение фона нечетных колонок td_even_image // изображение фона четных колонок td_hover_image // фонового изображение колонок при наведении td_odd_color // цвет текста нечетной колонки td_even_color // цвет текста четной колонки // // Параметры для таблицы font_name // название шрифта / семьи, которые будут использоваться для таблицы font_size // размер шрифта, который будет использоваться для таблицы
Пример плагина с настройками:
$('table#table2').styleTable({ th_bgcolor: '#3E83C9', th_color: '#ffffff', th_border_color: '#333333', tr_odd_bgcolor: '#ECF6FC', tr_even_bgcolor: '#ffffff', tr_border_color: '#95BCE2', tr_hover_bgcolor: '#BCD4EC' });
Комментарии:
Нет комментариев к этой статье.