Красивые всплывающие подсказки для ucoz. Оригинальное название этого скрипта Tipsy Tooltip. Этот скрипт я адаптировал с модуля dle под ucoz. Демо вы сможете увидеть на нашем сайте, лично я их использовал в блоке "наши партнёры". Также я создал отдельное демо, чтобы вы смогли полностью разглядеть его работу. Установка простая и быстрая.
Установка:
Для начало вам нужно подключить необходимый нам код в тег /head вашего сайта, для этого вам нужно вставить этот код перед этим тегом, на всех страницах вашего сайта:
Code
<link media="screen" href="/js/tipsy.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.tipsy.js"></script>
<script type='text/javascript'>
$(function() {
$('.north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
});
</script>
<script type="text/javascript" src="/js/jquery.tipsy.js"></script>
<script type='text/javascript'>
$(function() {
$('.north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
});
</script>
Основу мы сделали, теперь для того чтобы эти подсказки отображались на страницах вашего сайта, нужно брать ссылки в определённый класс и титл, для этого используйте один их ниже перечисленных готовых ссылок:
Code
<a class='north' href='#' original-title='Подсказка появляется снизу'>Север</a>
<a class='south' href='#' original-title='Подсказка появляется сверху'>Юг</a>
<a class='east' href='#' original-title='Подсказка появляется слева'>Восток</a>
<a class='west' href='#' original-title='Подсказка появляется справа'>Запад</a>
<a class='south' href='#' original-title='Подсказка появляется сверху'>Юг</a>
<a class='east' href='#' original-title='Подсказка появляется слева'>Восток</a>
<a class='west' href='#' original-title='Подсказка появляется справа'>Запад</a>
Качаем архив, содержимое архива кидаем в корень сайта в папку "js" .
Готово.
Посмотреть демо Всплывающие подсказки (Tipsy Tooltip) для uCoz
Другие новости |
Поделиться ссылкой
|