Современные информационные технологии. Лабораторное занятие №2. Динамический тулбар на Javascript

Вам нужно создать простой тулбар со сценарием открытия и закрытия и произвольным содержимым.

Для этого потребуется:

A) Конфигурация Javascript со сценарием

B) Стили в CSS

C) HTML-файл, который вы встроите в блог tumblr (1) и blogger (2)

1) Для это прописываем простой сценарий с кнопкой, по нажатию на которую откроется тулбар, а по нажатию на крестик

кнопка исчезнет:

(function($) {

    $(document).ready(function() {

        var $panel = $('#panel');

        if ($panel.length) {

            var $sticker = $panel.children('#panel-sticker');

            var showPanel = function() {

                $panel.animate({

                    left: '+=400',

                }, 200, function() {

                    $(this).addClass('visible');

                });

            };

            var hidePanel = function() {

                $panel.animate({

                    left: '-=400',

                }, 200, function() {

                    $(this).removeClass('visible');

                });

            };

            $sticker

                .children('span').click(function() {

                    if ($panel.hasClass('visible')) {

                        hidePanel();

                    }

                    else {

                        showPanel();

                    }

                }).andSelf()

                .children('.close').click(function() {

                    $panel.remove();

                });

        }

    });

})(jQuery);

2) Сохраняем сценарий в виде .js файла

3) Стили и цвета мы описываем в отдельном CSS-файле (перепишите цвет кнопки на тот, который вам нравится):

#panel {

    position: absolute;

    top: 50%;

    left: -400px;

    margin: -40px 0 0 0;

    overflow: hidden;

}

#panel-content {

    background: #EEE;

    border: 1px solid #CCC;

    width: 388px;

    height: 80px;

    float: left;

    padding: 3px 5px;

}

#panel-sticker {

    float: left;

    position: relative;

    background: orange;

    padding: 3px 20px 3px 5px;

    margin: 0;

    cursor: pointer;

}

#panel-sticker .close {

    position: absolute;

    right: 3px;

    top: 3px;

}

4) Сохраняем их как .css файл

5) Выгружаем оба файла туда, где будет тулбар - либо в tumblr (изменить HTML - шестеренка - ресурсы темы - загрузить)

либо в blogger - через администрирование google sites (у меня - https://sites.google.com/site/konoplevmedia/system/app/pages/admin/attachments)

6) Прописываем HTML-код в отдельную страницу в tumblr (добавляется через форму меню в самом низу сайдбара) или в виджет Javascript/HTML в blogger

<div id="panel">

    <div id="panel-content">

        Текст, который будет внутри раскрываемого тулбара

    </div>

    <div id="panel-sticker">

        <span>Название вашей кнопки</span>

        <div class="close">?</div>    

    </div>

</div>

7)Внедряем в код сценарий из Javascript перед всеми остальными параметрами:

<script src="https://static.tumblr.com/qd5f4bl/q3Qpga5v7/mover.js"></script>

8) Далее указываем расположение файла с конфигурацией стилей:

 <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/qd5f4bl/AZapga6wy/toolbar_css.css">

    

9) Затем собственно сам HTML-код.

Внимание! Tumblr не всегда корректно обрабатывает отображение тулбара, поэтому просьба дублировать задание в blogger. В последнем вам нужна тема,

поддерживающая Javascript (таких большинство). Ссылки на выполненное задание принимаются до 18:00 16 октября.