maxua.com.ua Автоматизация интернет магазинов

Главная » Шпаргалка » PHP MYSQL javascript » jQuery » Подсказки к файлам на jQuery

Подсказки к файлам на jQuery

http://www.ruseller.com/lessons/les264/example/index.html

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


Шаг 1. Основная конструкция всплывающей подсказки

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

HTML:

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

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

<style type="text/css" media="screen">

</style>

Здесь перечислены все стили, которые мы прикрепляли к нашим таблицам, столбцам, строкам и даже некоторым тегам, таким как, например, <body>.

Шаг 4. jQuery-доработки

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

JAVASCRIPT:

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

Ну вот и все! Надеюсь, что Вам очень понравился данный вид всплывающих подсказок, потому что он наиболее важен и полезен на сайтах, чем просто обычные подсказки. Спасибо за внимания, жду Ваших комментариев.

maxua.com.ua Автоматизация интернет магазинов

Категории раздела

Последние статьи:

Последнее блога:

Клиенты:

Подсказки к файлам на jQuery