Таблица со слайдером

Тема в разделе "JavaScript", создана пользователем yura, 10 окт 2014.

Модераторы: ZiX
  1. yura

    yura

    Регистр.:
    6 апр 2006
    Сообщения:
    437
    Симпатии:
    65
    Нужно сделать примерно такое _Перейти по ссылке

    Т.е. обычная таблица с несколькими колонками, в каждой строке строит плюсик, при нажатии на который таблица выезжает вниз. Такой себе спойлер в таблице..

    Как такое организовать? Или может кто-то видел подобные скрипты?
     
  2. mo.Lex

    mo.Lex Создатель

    Регистр.:
    5 окт 2014
    Сообщения:
    13
    Симпатии:
    9
    Все просто - в ячейке прячется слой, который в обычном состоянии не виден. При нажатии на кнопку он становится видимым и раскрывается. Можно сделать и на jquery и на просто javascript.
     
  3. yura

    yura

    Регистр.:
    6 апр 2006
    Сообщения:
    437
    Симпатии:
    65
    Может ты видел чтот похожее?
     
  4. warg

    warg Постоялец

    Регистр.:
    26 июн 2007
    Сообщения:
    129
    Симпатии:
    136
    похожего море, такие таблицы есть в том же ExtJS, Dojo, побольше бы конкретики, например где такое нужно реализовать,
    поскольку в простой хтмл табличке такие скрипты прикручивать излишество, когда можно просто обойтись чем то типа

    Код:
    <script type="text/javascript">
    $(function() {
        $(".spoiler-label").click(function() {
            $(this).parent().find(".spoiler-content").toggle();
        });
    });
    </script>
    
    echo '<td><div>
        <span class="spoiler-label">+</span>
        <div class="spoiler-content" style="display: none">Spoiler content</div>
    </div></td>';
     
    yura и mo.Lex нравится это.
  5. mo.Lex

    mo.Lex Создатель

    Регистр.:
    5 окт 2014
    Сообщения:
    13
    Симпатии:
    9
    Простой jquery - это и есть мой пример. Warg показал как раз то о чем я думал
    Вот я делал когда-то давно знакомой из Украины
    Перейти по ссылке

    Вот код - он просто как два пальца. Все дело в библиотеке

    Код:
    <div class="sliders">
    <script type="text/javascript" src="functions.js"></script>
    
    <dt><a>1</a></dt>
    <dd style="display: none">
    1 open
    </dd>
    <dt><a>2</a></dt>
    <dd style="display: none">
    2 open
    </dd>         
    <dt><a>3</a></dt>
    <dd style="display: none">
    3 open
    </dd>
    </div>
    Перейти по ссылке вот сама библиотека.
     
    warg и yura нравится это.
  6. yura

    yura

    Регистр.:
    6 апр 2006
    Сообщения:
    437
    Симпатии:
    65
    Просто спойлеров в сети уйма примеров. Вопрос в том как спойлер вписать в таблицу, как по ссылке в моем первом посте, так чтобы оно работало?

    Код:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      </tr>
    <то что должно показаться при разворачивании первой строки>
      <tr>
      <td>11</td>
      <td>22</td>
      <td>33</td>
      <td>44</td>
      </tr>
    <то что должно показаться при разворачивании второй строки>
    </table>
    Код примерно такой...

    У меня получается в спойлер вставить табличку чтобы после клика по какому-то слову раскрывался спойлер и там была таблица. Получается и так чтобы вместо слова по которому кликаешь была таблица. НО не получается сделать чтобы это было циклично. Т.е. чтобы каждая строка была спойлером.

    Идея такова, что каждая строка
    Код:
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      </tr>
    это вывод краткой инфы с определенной записи и записей таких уйма. А то, что выводится при раскрытии спойлера - полная новость, если хотите
     
  7. warg

    warg Постоялец

    Регистр.:
    26 июн 2007
    Сообщения:
    129
    Симпатии:
    136
    mo.Lex и yura нравится это.
  8. Ewgi

    Ewgi Создатель

    Регистр.:
    26 сен 2014
    Сообщения:
    12
    Симпатии:
    1