Форум PHP программистов > Таблица + Эффект аккордеона

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Таблица + Эффект аккордеона

MailRes

10.02.2012 - 21:25

Всем привет!

Возникла заморочка, как реализовать следующее:

Например, выводится таблица html из 5 строк:

№1 | a | b | c | d
---------------------
№2 | a | b | c | d
---------------------
№5 | a | b | c | d
---------------------
№6 | a | b | c | d
---------------------
№7 | a | b | c | d

Строки 3 и 4 отсутствуют, но после нажатия на строку 2, должны появиться выдвижным эффектом:

№1 | a | b | c | d
---------------------
№2 | a | b | c | d
---------------------
№3 | a | b | c | d
---------------------
№4 | a | b | c | d
---------------------
№5 | a | b | c | d
---------------------
№6 | a | b | c | d
---------------------
№7 | a | b | c | d

Подскажите, где можно почитать/посмотреть аналогичные примеры, чтобы так сделать?

Спустя 5 минут, 39 секунд (10.02.2012 - 20:30) nugle написал(а):

.slideUp, .slideDown ф-ии jquery + событие click(), так же можно методами js. Выставить по умолчанию строке 3 и 4 display:none; нажимая на строку 2, запускать ф-ию, которая будет менять у 3 и 4 строки display на block

Спустя 4 минуты, 25 секунд (10.02.2012 - 20:35) MailRes написал(а):

вооо) надо опробовать. Т.е., можно повешать на строку класс какой-нибудь (<tr class=***>...</tr>) и экспериментировать?

Спустя 2 минуты, 47 секунд (10.02.2012 - 20:37) nugle написал(а):

MailRes
да, именно так, только не в том разделе ты тему создал.
Если что, спрашивай, помогу, там в принципе все очень просто

Спустя 3 минуты, 5 секунд (10.02.2012 - 20:41) MailRes написал(а):

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

Спустя 6 часов, 14 минут, 56 секунд (11.02.2012 - 02:55) sergeiss написал(а):

Перемещаю тему в раздел по JS.

Хотя тут можно многое сделать средствами CSS

Спустя 20 часов, 56 минут, 49 секунд (11.02.2012 - 23:52) MailRes написал(а):

Подразобрался, поставил .slideUp .slideDown, которые применялись к <tr> - эффекта слайда не увидел как в примере (главное, что отображает скрытые строки и прячет их по клику), но дело в другом:
1) если в таблице одна строка, по которой можно нажать и под ней появляются скрытые строки, то нормально работает.
2) но если в таблице несколько строк, по которым можно нажать, то нажав на любую из них - отображаются ВСЕ скрытые строки.

Другими словами - нужен мне "спойлер" в таблицу. Подскажите каким способом надо настроить событие .click ?
Думаю, что надо как-то к классам прикручивать, чтобы идентифицировать - "Что показать", а "Что спрятать"

Спустя 12 минут, 56 секунд (12.02.2012 - 00:05) nugle написал(а):

Внутри click пиши так $(this).next().slideToggle(100)

Спустя 3 минуты, 21 секунда (12.02.2012 - 00:09) TranceIT написал(а):


$("tr.click").click(function(){
    $(this).next("tr.slide").slideToggle();
});

Спустя 11 минут, 4 секунды (12.02.2012 - 00:20) MailRes написал(а):

nugle, круто, но...
1) показывает только одну скрытую строку (вместо двух или трех или больше)
2) анимации нету

попробовал прикрутить .each(), но не получилось - вообще ничего не открывалось

Спустя 5 минут, 3 секунды (12.02.2012 - 00:25) TranceIT написал(а):

Вот таблица всех селекторов. Судя по всему вам очень пригодится =)
http://habrahabr.ru/blogs/jquery/51717/

Сам туда время от времени поглядываю... Левым глазом... Правой пятки...

Спустя 1 минута, 28 секунд (12.02.2012 - 00:26) TranceIT написал(а):

Цитата (MailRes @ 11.02.2012 - 21:20)

nugle, круто, но...
1) показывает только одну скрытую строку (вместо двух или трех или больше)
2) анимации нету

попробовал прикрутить .each(), но не получилось - вообще ничего не открывалось

Селектор next() выбирает ОДИН следующий элемент в ДОМ.

Спустя 1 час, 20 минут, 49 секунд (12.02.2012 - 01:47) MailRes написал(а):

Спойлер-то обычный сделать не сложно, нужно всего лишь засунуть DIV во внутрь другого DIVа... А как это реализовать со строками (<tr>) таблицы? И чтоб анимация была?
Что-то вообще в голове не укладывается =\


<tr>...<tr>
<tr class='zagolovok_spoilera'>...</tr>
<tr class='soderzhimoe_spoilera'>...</tr>
<tr class='soderzhimoe_spoilera'>...</tr>
<tr>...<tr>
<tr>...<tr>
<tr class='zagolovok_spoilera'>...</tr>
<tr class='soderzhimoe_spoilera'>...</tr>
<tr class='soderzhimoe_spoilera'>...</tr>
<tr class='soderzhimoe_spoilera'>...</tr>
<tr>...<tr>

Про селекторы не первый раз читаю... Что-то не вижу пока света в конце тоннеля...

PS Может кто-нибудь встречал уже реализованную таблицу со спойлерами (которую хочу сделать)? Дайте ссылку на тот сайт, погляжу файрбагом - как там сделано...

Спустя 17 минут, 14 секунд (12.02.2012 - 02:04) TranceIT написал(а):

Разметка неудачная, по-этому так сложно.

Мой вариант:



$(document).ready(function(){
    $('.title').click(function(){
        $(this).next('.spoiler').slideToggle();
    });
});

<table>
  <tr class="title">
    <td>заголовок</td>
  </tr>
  <tr class="spoiler" style="display: none;">
    <td>Тут весь контент</td>
  </tr>
</table>

Спустя 10 часов, 20 минут, 34 секунды (12.02.2012 - 12:25) MailRes написал(а):

не зря говорят: "Утро вечера мудренее".

Засунул в строку таблицу со строками спойлера - и всё норм =) Осталось только подшаманить, чтобы красиво выглядело)

Спустя 4 минуты, 31 секунда (12.02.2012 - 12:29) nugle написал(а):

Получилось у тебя?

Быстрый ответ:

Здесь расположена полная версия этой страницы.