Всем привет!
Все веб-программисты сталкиваются с табличным представлением данных — это частый элемент панелей администрирования, всевозможных списков и т.п.
Очень часто необходимо, помимо данных, вывести сервисные ссылки — удаление, редактирование, статистика. И тут начинается — вывод слева, вывод справа… Кто на что горазд. Сам я использовал как тот, так и другой способы. Все бы ничего — но в условиях жесткого ограничения на размер блока, куда выводится таблица, хочется видеть чем больше информации, тем лучше. Вот тут и встал вопрос — а куда девать панель сервисных кнопок?
Ответ родился такой — можно снизу, в другую строку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <tr> <!-- Строка с данными #1 --> </tr> <tr> <!-- Строка с меню для данных #1 --> </tr> ... <tr> <!-- Строка с данными #n --> </tr> <tr> <!-- Строка с меню для данных #n --> </tr> </table> |
Реализация
Под строкой с данными, скажем, в 4 ячейки, идет новая строка с одной, объединенной ячейкой. В этой ячейке находится элемент DIV, у которого свойство position установлено в relative. Внутри него, находится еще один DIV, но с position:absolute. Последний DIV — это и есть наша панель, которая находится в зависимости от позиционирования либо слева, либо справа.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<tr> <td>1</td> <td> <a href="#details/8"> <i class="icon-table"></i> Анализ АИС </a> </td> <td> <i class="icon-calendar"></i> 13/02/12, вы </td> <td>всем</td> </tr> <tr> <td class="toolpbar-holder" colspan="4"> <div class="with-toolbar"> <div class="row-toolbar big-icons"> <a href="#edit/8" title="Редактировать анкету «Анализ АИС»"> <i class="icon-edit"></i> </a> <a href="#delete/8" title="Удалить анкету «Анализ АИС»"> <i class="icon-trash"></i> </a> <a href="#results/8" title="Результаты анкеты «Анализ АИС»"> <i class="icon-list-alt"></i> </a> </div> </div> </td> </tr> |
Сам стиль:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.with-toolbar{ position: relative; text-align: right; font-size: 11px!important; margin: 0!important; padding: 0 2px!important; } .with-toolbar > div.row-toolbar{ background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; border-radius: 7px 7px 7px 7px; box-shadow: 1px 2px 5px rgba(6, 6, 6, 0.69); padding: 2px; bottom: 10px; position: absolute; right: 5px; display: none; } td.toolpbar-holder { padding:0!important;} tr:hover + tr td .with-toolbar > div.row-toolbar, div.row-toolbar:hover{ display: block;} .row-toolbar.big-icons{ font-size: 22px; } .row-toolbar.big-icons a { display: inline-block; margin:0 3px;} .row-toolbar.big-icons a + a{ margin-left: 5px;} |
Как это работает.
Когда мы наводим указатель на строку, срабатывает правило tr:hover + tr td .with-toolbar > div.row-toolbar и нижняя строка становится видна. Когда мы наводим указатель на сервисную панель, тогда срабатывает правило div.row-toolbar:hover. Остальныя правила — просто украшательства.
Рабочий пример использует Bootstrap CSS для оформления, и в элементах ссылок. Я не великой знаток CSS, так что возможно можно сделать проще. Но я сделал пока что так. Смотреть — тут.