Главная » Файлы » Прочие скрипты » jQuery
Красивые полупрозрачные подсказки через плагин JQuery Quick Tip на jQuery
23.06.14, 13:46:15

Скачать файл



Замечательный плагин, позволяющий создавать красивые полупрозрачные подсказки. Плагин работает через атрибут title для нужных вам тегов (a, span. div и т.д.). Плагин очень гибок в настройке

Установка:

После /head (Или в самый верх любого глобального блока) на нужных вам страницах вставляйте:
Код
<script src='/js/quicktip.js'></script>

  <style>
  #tooltip{  
  position:absolute;  
  background:#DDD;  
  padding:20px;  
  opacity:0.9;  
  -moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;  
  font-weight:bold;  
  font-size:12px;  
  display:none;  
  }  
  </style>


Если вы тот счастливец, кто хорошо разбирается в css - настройте внешний вид подсказок на свой вкус. Если же навыки в css у вас очень незначительные - УЧИТЕ CSS smile

Следующий код вставляйте сразу после предыдущего:
Код
<script>
  $(document).ready(function(){  
$('a [title]').quicktip({  
speed:700  
});  
  $('img [title]').quicktip({  
speed:700  
});  
  });  
  </script>


Немного разберём настройки:

$('a [title]'), $('img [title]') - в нашем случае скрипт будет обрабатывать параметр title лишь у тегов a (Ссылки) и img (Картинки). Если хотите, чтобы скрипт обрабатывал и другие теги, вам придётся прописать для каждого из них запускающие коды. Вот, к примеру, добавим тег div:
Код
<script>
  $(document).ready(function(){  
$('a [title]').quicktip({  
speed:700  
});  
  $('img [title]').quicktip({  
speed:700  
});  
  $('div [title]').quicktip({  
speed:700  
});  
  });  
  </script>


По этой аналогии добавляйте запускающие скрипты ко всем нужным тегам

Параметр speed:700 - время плавного появления подсказки

Осталось лишь залить скрипт из прикреплённого архива в папку js

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Через, на, плагин, tip, JQuery, подсказки, полупрозрачные, quick, красивые
Просмотров: 463 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: