| Шаг 1. Основная конструкция всплывающей подсказки Итак, займемся созданием такой подсказки с особым эффектом появления. Для начала нам нужно открыть файл, в котором будет располагаться такая подсказка или создать новый HTML-документ. Далее мы просто вставим следующий код между тегами <body> и </body> , который нам будет служить основой для всплывающей подсказки: HTML: Code <div class="bubbleInfo"> <div> <img class="trigger" src="images/dl_image.png" id="download" /> </div> <table id="dpop" class="popup"> <tbody><tr> <td id="topleft" class="corner"></td> <td class="top"></td> <td id="topright" class="corner"></td> </tr> <!--Здесь будет содержимое вашей подсказки --> <tr> <td class="corner" id="bottomleft"></td> <td class="bottom"><img width="30" height="29" alt="popup tail" src="images/bubble-tail2.png"/></td> <td id="bottomright" class="corner"></td> </tr> </tbody></table> </div> Здесь мы создали таблицу со столбцами и строками, которая будет основой нашей всплывающей подсказке. Шаг 2. Создание содержимого для подсказки. Здесь мы, наконец, впишем содержимое нашей подсказки, которое будет отображаться при наведении на нее курсора. Вы можете придумать абсолютно любой код или взять мой и изменить его, но принцип работы должен оставаться тот же. Для того чтобы узнать куда поместить код содержимого подсказки вернитесь назад, к предыдущему коду, и там, где находится комментарий вставьте следующий код в своем документе: HTML: Code <tr> <td class="left"></td> <td><table class="popup-contents"> <tbody><tr> <th>Файл:</th> <td>codapub.zip</td> </tr> <tr> <th>Дата:</th> <td>04/06/09</td> </tr> <tr> <th>Размер:</th> <td>~ 180 КБ</td> </tr> <tr> <th>ОС:</th> <td>Любая</td> </tr> <tr id="download"> <th></th> <td><a title="Скачать" href="#">Скачать</a></td> </tr> </tbody></table> </td> <td class="right"></td> </tr> Шаг 3. Стилизация подсказки. Основная часть завершена, теперь нам остается немного изменить, а в некоторых местах и придать стиль нашей всплывающей подсказке. Ниже я разместил код, который следует вставить между тегами <head> и </head> , а если у Вас есть своя таблица стилей и она подключена к данному файлу с подсказкой, то можете вставлять его туда. Итак, вот код: CSS:
Code <style type="text/css" media="screen">
<!--
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.bubbleInfo {
position: relative;
top: 150px;
left: 100px;
width: 500px;
}
.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.png); }
.popup td.top { background-image: url(images/bubble-2.png); }
.popup td#topright { background-image: url(images/bubble-3.png); }
.popup td.left { background-image: url(images/bubble-4.png); }
.popup td.right { background-image: url(images/bubble-5.png); }
.popup td#bottomleft { background-image: url(images/bubble-6.png); }
.popup td.bottom { background-image: url(images/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(images/bubble-8.png); }
.popup table.popup-contents {
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #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 {
color: #333;
}
-->
</style>
Шаг 4. jQuery-доработки Ну, и наконец-то настал заключительный шаг. Чтобы его осуществить, нам понадобится файл с jQuery последней версии. В исходниках я такой файл выложил. Называется он jquery.js. Просто закиньте его в ту папку, где у нас лежит файл с подсказкой. Также нам еще очень понадобится один Javascript, код которого я привел ниже. Вставлять его нужно между тегами <head> и </head>. Именно этот скрипт позволяет нашему окошку плавно появляться и также плавно исчезать. 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>
Демо
|
