Как сделать подсказки на jQuery?

dodskazВ данном уроке мы расмотрим как создать кравивые и эфектные подсказки на JQuery. Это бывает очень полезно и разместить в этой подсказке и картинку и ссылку все что вам требуется. Рабочий пример можно увидеть тут, а скачать все исходники по этой ссылке. Итак, займемся созданием такой подсказки с особым эффектом появления. Для начала нам нужно открыть файл, в котором будет располагаться такая подсказка или создать новый HTML-документ. Далее мы просто вставим следующий код между тегами <body> и </body> , который нам будет служить основой для всплывающей подсказки:

<div class="bubbleInfo">
<div><span id="download" class="trigger"><strong>Наведите на меня мышку :)</strong></span></div>
<table id="dpop" class="popup" border="0">
<tbody>
<tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td>Подсказка <a href="#">Ссылка</a>
Еще какаято информация...</td>
<td class="right"></td>
</tr>
<tr>
<td id="bottomleft" class="corner"></td>
<td class="bottom">< src="images/bubble-tail2.gif" alt="popup tail" width="30" height="29" /></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>

Стилизация подсказки.

Основная часть завершена, теперь нам остается немного изменить, а в некоторых местах и придать стиль нашей всплывающей подсказке. Ниже я разместил код, который следует вставить между тегами и , а если у Вас есть своя таблица стилей и она подключена к данному файлу с подсказкой, то можете вставлять его туда. Итак, вот код:

<!--
<!         * {             margin: 0;             padding: 0;         }         body {             padding: 10px;         }         .bubbleInfo {             position: relative;             margin: 50px;                     }         .trigger {             position: absolute;         }         /* Bubble pop-up */         .popup {                 position: absolute;                 display: none;                 z-index: 50;                 border-collapse: collapse;         }         .popup td.corner {                 height: 15px;                 width: 19px;         }         .popup td#topleft { background-image: url(images/bubble-1.gif); }         .popup td.top { background-image: url(images/bubble-2.gif); }         .popup td#topright { background-image: url(images/bubble-3.gif); }         .popup td.left { background-image: url(images/bubble-4.gif); }         .popup td.right { background-image: url(images/bubble-5.gif); }         .popup td#bottomleft { background-image: url(images/bubble-6.gif); }         .popup td.bottom { background-image: url(images/bubble-7.gif); text-align: center;}         .popup td.bottom img { display: block; margin: 0 auto; }         .popup td#bottomright { background-image: url(images/bubble-8.gif); }         .popup table.popup-contents {                 font-size: 12px;                 line-height: 1.2em;                 background-: #fff;                 : #666;                 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;                 }         table.popup-contents th {                 text-align: right;                 }         table.popup-contents td {                 text-align: left;                 } 				tr#download th {                 text-align: left;                 text-indent: -9999px;                 background: url(images/starburst.gif) no-repeat top right;                 height: 17px;                 }         tr#download td a {                 : #333;         }     -->
--&gt;

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

<script src="jquery.js" type="'text/javascript'"></script> <="text/javascript">// <![CDATA[
    $(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>
Ну вот и все! Надеюсь, что Вам очень понравился данный вид всплывающих подсказок, потому что он наиболее важен и полезен на сайтах, чем просто обычные подсказки. Ну как всегда продолжение следует.

  • Andrews32

    Здравствуйте, автор. Ссылки на демо и на исходники не работают, исправьте пожалуйста.

Запись навигация

Top