Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.17.179.132
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Подсказка к файлам
Сообщение оставлено 09.06.2010 в 22:09:52 | Сообщение #1
Шаг 1. Основная конструкция всплывающей подсказки.

Итак, займемся созданием такой подсказки с особым эффектом появления. Для начала нам нужно открыть файл, в котором будет располагаться такая подсказка или создать новый 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"

Здесь мы создали таблицу со столбцами и строками, которая будет основой нашей всплывающей подсказке.

Шаг 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. Стилизация подсказки.

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

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, код которого я привел ниже. Вставлять его нужно между тегами и . Именно этот скрипт позволяет нашему окошку плавно появляться и также плавно исчезать.

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>
 
 
   
Сообщение оставлено 09.06.2010 в 22:26:40 | Сообщение #2
Эмм мб скрин какой нибудь ? о_о
 
 
   
Сообщение оставлено 11.06.2010 в 23:31:53 | Сообщение #3
А скрин есть?
 
 
   
Сообщение оставлено 12.06.2010 в 00:18:09 | Сообщение #4
да..хотелось бы посмотреть на скрин.
 
[img]http://s05.radikal.ru/i178/1005/91/c9c21c1ccc9c.png[/img]
 
   
Сообщение оставлено 21.07.2010 в 19:15:52 | Сообщение #5
Ребят ни когда не ставьте все что без скрина
Можете затопить свой сайт
 
Если помог ставь 1+
 
   
Сообщение оставлено 29.07.2010 в 09:20:28 | Сообщение #6
блин столько времени прошло что тяжело скрин выложить?
 
[qc]
Вроде как ушел с портала, а вроде как и остался)[/qc]
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика