Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
Шаг 1. Основная конструкция всплывающей подсказки.
Итак, займемся созданием такой подсказки с особым эффектом появления. Для начала нам нужно открыть файл, в котором будет располагаться такая подсказка или создать новый HTML-документ. Далее мы просто вставим следующий код между тегами
и , который нам будет служить основой для всплывающей подсказки:
Здесь мы создали таблицу со столбцами и строками, которая будет основой нашей всплывающей подсказке.
Шаг 2. Создание содержимого для подсказки.
Здесь мы, наконец, впишем содержимое нашей подсказки, которое будет отображаться при наведении на нее курсора. Вы можете придумать абсолютно любой код или взять мой и изменить его, но принцип работы должен оставаться тот же. Для того чтобы узнать куда поместить код содержимого подсказки вернитесь назад, к предыдущему коду, и там, где находится комментарий вставьте следующий код в своем документе:
Основная часть завершена, теперь нам остается немного изменить, а в некоторых местах и придать стиль нашей всплывающей подсказке. Ниже я разместил код, который следует вставить между тегами
и , а если у Вас есть своя таблица стилей и она подключена к данному файлу с подсказкой, то можете вставлять его туда. Итак, вот код:
Ну, и наконец-то настал заключительный шаг. Чтобы его осуществить, нам понадобится файл с jQuery последней версии. В исходниках я такой файл выложил. Называется он jquery.js. Просто закиньте его в ту папку, где у нас лежит файл с подсказкой. Также нам еще очень понадобится один Javascript, код которого я привел ниже. Вставлять его нужно между тегами
и . Именно этот скрипт позволяет нашему окошку плавно появляться и также плавно исчезать.
Javascript:
Code
<script type="text/javascript">
$(function () { $('.bubbleInfo').each(function () { var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('.trigger', this); var info = $('.popup', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).mouseover(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: -90, left: -33, display: 'block' }).animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }).mouseout(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); }); //--> </script>
Шаг 1. Основная конструкция всплывающей подсказки.
Итак, займемся созданием такой подсказки с особым эффектом появления. Для начала нам нужно открыть файл, в котором будет располагаться такая подсказка или создать новый HTML-документ. Далее мы просто вставим следующий код между тегами
и , который нам будет служить основой для всплывающей подсказки:
Здесь мы создали таблицу со столбцами и строками, которая будет основой нашей всплывающей подсказке.
Шаг 2. Создание содержимого для подсказки.
Здесь мы, наконец, впишем содержимое нашей подсказки, которое будет отображаться при наведении на нее курсора. Вы можете придумать абсолютно любой код или взять мой и изменить его, но принцип работы должен оставаться тот же. Для того чтобы узнать куда поместить код содержимого подсказки вернитесь назад, к предыдущему коду, и там, где находится комментарий вставьте следующий код в своем документе:
Основная часть завершена, теперь нам остается немного изменить, а в некоторых местах и придать стиль нашей всплывающей подсказке. Ниже я разместил код, который следует вставить между тегами
и , а если у Вас есть своя таблица стилей и она подключена к данному файлу с подсказкой, то можете вставлять его туда. Итак, вот код:
Ну, и наконец-то настал заключительный шаг. Чтобы его осуществить, нам понадобится файл с jQuery последней версии. В исходниках я такой файл выложил. Называется он jquery.js. Просто закиньте его в ту папку, где у нас лежит файл с подсказкой. Также нам еще очень понадобится один Javascript, код которого я привел ниже. Вставлять его нужно между тегами
и . Именно этот скрипт позволяет нашему окошку плавно появляться и также плавно исчезать.
Javascript:
Code
<script type="text/javascript">
$(function () { $('.bubbleInfo').each(function () { var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('.trigger', this); var info = $('.popup', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).mouseover(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: -90, left: -33, display: 'block' }).animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }).mouseout(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); }); //--> </script>
