Exore LTD » jQuery » Создание таблицы со скользящими элементами
Лого SiteHere.ru

Октябрь 29, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Создание таблицы со скользящими элементами

Создание таблицы со скользящими элементами

Таблицы хороши тем, что в них можно размещать большие объемы информации и смотреться это будет очень компактно. Но в данном уроке мы создадим не просто таблицу, в которой будет какая-то информация, а таблицу в которой будет в 2 раза больше данных. Она будет занимать столько же места, сколько занимает обычная таблица, но с содержать больше информации.

На тему таблиц советую изучить следующие статьи:

Как обычно сперва самостоятельно посмотрите на пример и попробуйте кликнуть на элемент таблицы:

Посмотреть примерСкачать

Пример раскрытых элементов:

Пример раскрытых элементов таблицы

Как установить данную таблицу на свой сайт?

1 Подключаем иконочные шрифты

Между тегами <head> и </head> подключаем иконки от Font Awesome:

HTML КОД
1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Это будет не совсем стандартная таблица, потому что она будет состоять только из <div> блоков:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="services" class="cf">
    <section class="service">
        <div class="service-icon">
            <span class="fa fa-paper-plane"></span>
            <br/>	
            Заголовок 1
        </div>
        <div class="service-description">
            <p>Текст блока</p>
        </div>
    </section><!-- Конец одного элемента таблицы -->
    ...
</div>

Немного поясню структуру:

  • Строки: со 2 по 11 — отдельный элемент таблицы.
  • Строки: с 3 по 7 — видимая часть элемента с иконкой.
  • Строки: с 8 и 10 — часть элемента, которая появляется по клику.

2 CSS стили

На данном этапе у нас присутствует только структура таблицы и нет ни единого стиля. Давайте же сделаем таблицу более красивой:

CSS КОД
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

#services {
    max-width: 850px;
    margin: 30px auto 0;
}
 
#services .service .service-icon:hover {
    cursor: pointer;
    color: #28B595;
}
 
#services .service .service-icon span {
    display: block;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
 
#services .service .service-icon span.fa {
    font-size: 40px;
}
 
#services .service .service-icon {
    text-align: center;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
#services .service .service-icon:hover span {
    position: relative;
    bottom: 5px;
}
 
#services .service {
    width: 33%;
    float: left;
    padding: 0.5em;
    min-height: 200px;
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
}
 
#services .service .service-icon, 
#services .service .service-description {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    padding: 50px 0;
    color: #222;
}
 
#services .service .service-description {
    left: 100%;
    background: #323A45;
    color: #fff;
    padding: 50px;
}
 
#services .service .service-description:hover { 
    cursor: pointer; 
}

Но это еще не всё, потому что на мобильных устройствах мы можем разместить не по три элемента в строке, а последовательно уменьшать количество элементов в зависимости от размера экрана устройства. Делается это с помощью медиа запросов:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11

@media screen and (max-width: 600px) {
    #services .service {
        width: 50%;
    }
}
 
@media screen and (max-width: 320px) {
    #services .service {
        width: 100%;
    }
}

3 jQuery

Осталось подключить библиотеку jQuery и обработать клик мышкой по элементу:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.service').click(function() {
        var $this = $(this);
        if ($this.hasClass("open")) {
            $this.find('.service-icon').animate({left: "0"});
            $this.find('.service-description').animate({left: "100%"});
            $this.removeClass("open");
        }
        else {
            $this.find('.service-icon').animate({left: "-100%"});
            $this.find('.service-description').animate({left: "0"});
            $this.addClass("open");
        }
    });
});
</script>

На этом установка завершена!

Вывод

Размещая информацию в таблицах мы хотим как можно более компактно разместить большое количество данных. С данной таблицей можно разместить на той же части страницы в 2 раза больше информации. Конечно не всегда можно применить данный способ, но нужно всегда помнить о нём. Поэтому советую добавить в закладки, чтобы Вы смогли быстро найти его.

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

9 комментариев к записи
  • ЯНЕЛЕНА

    Работает только в WordPress ❓

     
    Ответить
    • Юрий

      Это же просто HTML+CSS+jQuery. Можно установить на любую CMS.

       
      Ответить
  • ЯНЕЛЕНА

    Тогда почему здесь не работает?
    (ссылки в комментариях запрещены)
    Подключено jquery 1.7.2 ❗

     
    Ответить
  • Daria

    Юрий, какая отличная вещь! Уже знаю, куда ее приспособить! Спасибо!

     
    Ответить
  • grigruss

    Надеюсь теги здесь нормально обрабатываются и код в комментарии будет видно…
    —————————————————————————————————————

    $('td').click(function(){
    $(this).children().slideToggle();
    };

    ————————————————————————————————————
    Разница только в том, что сворачиваться будет наверх. Может чуть подшаманить надо, но в теории должно работать. Прелесть в том, что меньше трафик, а принципиально тот же эффект.

     
    Ответить
  • Ivan

    Юрий, отличный урок, очень полезная вещь!

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

    Заранее благодарен!

     
    Ответить
  • TIB

    Можно ли вместо иконок font-awesome поместить картинку? И как это сделать?

     
    Ответить
    • Юрий Немец

      Добрый день, Олег!
      Да, конечно, можно поместить изображение. Для этого необходимо вместо данного элемента:

      Вписать изображение с помощью тега img.

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *