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

30.07.2009   |  

jQuery   |  

Комментарии (3)

разворачивающийся список с jQuery

jExpand это ультра легкий jQuery плагин, который заставит ваши сроки расширяться. Типичная строка для бизнес-приложений, эта функция поможет Вам лучше организовать таблицы. Таким образом, таблица может содержать больше информации, таких как изображения, списки, диаграммы и другие элементы.

Если включить фантазию, по применений плагина jExpand, тогда можно и разворачивающийся список, и очень крутое меню сделать. Нужно только фантазию включить :)

demoскачать

Как это работает?

Чтобы иметь такие расширяемые таблицы нужно добавить по два ряда для каждой строки, первая будет “Главная строка”, а вторая “Внутренняя строка”. При нажимании на “Главная строка”, будет открываться “Внутренняя строка”.

“Главная строка” может содержать столько колонок, сколько это необходимо. Важно то, что “Главною строку”, придется заключать в 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

Интересные статьи:

  1. none 12.08.2009 09:36

    Ух ты! Прикольненький плагинчик, надо будет протестить… а то я для подобных целей использовал Accordition.

  2. Eugene 25.01.2010 16:20

    Спасибо, скрипт понравился! +1
    Править под себя очень быстро!
    Надеюсь заказчику понравиться!

  3. Roman 01.02.2010 16:29

    Подскажите, а как сделать чтобы эта таблица грузилась открытой, а при клике закрывалась?

Оставь свое мнение:




Подпишись на обновление блога