28 августа 2015

таблица, всплывающие элементы, создание всплывающих элементов

Создание всплывающих элементов в таблицах

JQuery

Привет! Чем же хороши таблицы?) Таблицы хороши тем, что в них можно размещать большие объемы информации и смотреться это будет очень компактно. И все бы хорошо, вот только что будет если придется разместить еще больше информации? Вот как раз таки об этом мы и поговорим в данном уроке. Мы создадим не просто таблицу, в которой будет какая-то информация, а таблицу в которой будет в два раза больше данных. Она будет занимать столько же места, сколько занимает обычная таблица, но содержать больше информации, а все благодаря всплывающим элементам.

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

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

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

HTML

<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit modi.</p>
        </div>
    </section>
</div>

Структура:

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

CSS
На данном этапе у нас присутствует только структура таблицы и нет ни единого стиля. Поэтому давайте украсим нашу блочную таблицу)

#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; 
}

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

CSS2

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

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

<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>

Установка завершена!

Вот таким вот несложным образом вы можете в своих таблицах размещать в два раза больше информации. Иногда эта вещь бывает очень полезна, поэтому возьмите ее себе на заметку! Всем удачи!)

vk.com
Комментарии