Делаем разворачивающийся список с jQuery – плагин jExpand
30.07.2009 |
jQuery |

jExpand это ультра легкий jQuery плагин, который заставит ваши сроки расширяться. Типичная строка для бизнес-приложений, эта функция поможет Вам лучше организовать таблицы. Таким образом, таблица может содержать больше информации, таких как изображения, списки, диаграммы и другие элементы.
Если включить фантазию, по применений плагина jExpand, тогда можно и разворачивающийся список, и очень крутое меню сделать. Нужно только фантазию включить
Как это работает?
Чтобы иметь такие расширяемые таблицы нужно добавить по два ряда для каждой строки, первая будет “Главная строка”, а вторая “Внутренняя строка”. При нажимании на “Главная строка”, будет открываться “Внутренняя строка”.

“Главная строка” может содержать столько колонок, сколько это необходимо. Важно то, что “Главною строку”, придется заключать в span (используя атрибут colspan) все столбцы, если вы хотите иметь полную информацию подряд области, конечно. В примере, приведенном ниже, таблица содержит 4 колонки и строки подробности (Внутренняя строка) охватывает ровно 4 колонки.
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 | <table id="report"> <tbody> <tr> <th>Страна</th> <th>Население</th> <th>Площадь</th> <th></th> </tr> <tr> <td>США</td> <td>306,939,000</td> <td>9,826,630 km2</td> <td></td> </tr> <tr> <td colspan="4"><!-- Ваша информация --></td> </tr> <tr> <td>Великобритания</td> <td>61,612,300</td> <td>244,820 km2</td> <td></td> </tr> <tr> <td colspan="4"><!-- Ваша информация --></td> </tr> </tbody> </table> |
Отлично работает во всех браузерах: FF, Opera, Chrome, Safari, IE (кроме IE8).
Источник: jankoatwarpspeed.com
Перевод: Webchester
Интересные статьи:
-
none 12.08.2009 09:36
-
Eugene 25.01.2010 16:20
Спасибо, скрипт понравился! +1
Править под себя очень быстро!
Надеюсь заказчику понравиться! -
Roman 01.02.2010 16:29
Подскажите, а как сделать чтобы эта таблица грузилась открытой, а при клике закрывалась?
Оставь свое мнение:
Ух ты! Прикольненький плагинчик, надо будет протестить… а то я для подобных целей использовал Accordition.