Плагин стилевого оформления таблиц на JQuery

18.01.13 18.01.13 Нет 4968

Плагин стилевого оформления таблиц на 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'  
    });

Смотреть пример

Скачать исходник Размер: 242,64kB | Изменен: 18.01.13 | Загрузок: 183