Мы в твиттере Мы в телеграме!

Провеббер » Web » Полезные статьи » Самый простой способ создания подсказок с помощью jQuery и qTip

Самый простой способ создания подсказок с помощью jQuery и qTip

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Самый простой способ создания подсказок с помощью jQuery и qTip.

Самый простой способ создания подсказок с помощью jQuery и qTip

Описание qTip!
Подсказки qTip поддерживают следующие возможности:

поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;

Для установки и использования qTip нам понадобится один файл jquery.qtip-1.0.0.min.js, т.к. в DLE основной файл jQuery уже подключен. Указанный файл по умолчанию находится в архиве на сайте разработчиков, однако, в дополнение к этому файлу Вы можете скачать дополнительные файлы – неминимизированные файлы js, так же на сайте разработчиков. Подключите указанный файл в вашем шаблоне в файле main.tpl перед закрывающимся тегом /head:
<script type="text/javascript" src="/jquery.qtip-1.0.0.min.js"></script>

после него, ниже добивать
<script>
  jQuery(function(){
   $('a[title]').qtip({ style: {
          width:150, //ширина подсказки
          border: {
         width: 3,
         radius: 8,
         color: '#FFEFF4' //цвет подсказки
         },
     tip: true }
})

   });
</script>

по идее все! Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь вид
Самый простой способ создания подсказок с помощью jQuery и qTip


Объекты метода qtip

В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.

Show - объект, настраивающий параметры отображения подсказки
Hide - объект, настраивающий параметры сокрытия подсказки
Position - объект, настраивающий расположение подсказки;
Content - объект, определяющий тип содержимого подсказки;
Style - объект, отвечающий за стиль подсказки


P.S. Это моя первая новость на сайте, не судите строго=) Ребят, если будет интересно данный метод, потом могу поколдовать с другими методами и выложить наиболее интересные сюда.

Missing update?
Checkout our NULLED Web Community


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


-1
Просмотры: 9 625 :: Комментарии (8) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Heon

  • 13 сентября 2011 21:09
  • Регистрация: 13.02.2010
  • Был(а) онлайн: 31.08.2022
  • Комментариев: 109
  • 0
Объекты метода qtip
Не совсем понятно как его реализовать.

--------------------

#2realyhead

  • 14 сентября 2011 00:15
  • Регистрация: 14.02.2011
  • Был(а) онлайн: 30.08.2014
  • Комментариев: 119
  • 0
Пантово! робит)

#3-=CDSERG=-

  • 14 сентября 2011 00:25
  • Регистрация: 16.04.2011
  • Был(а) онлайн: 24.07.2023
  • Комментариев: 1
  • 0
Номармально работает - чуток вооброжения и ok

#4YoRkbi

  • 15 сентября 2011 22:16
  • Регистрация: 18.05.2010
  • Был(а) онлайн: 6.04.2022
  • Комментариев: 39
  • 0
полезная шняга

#5soulman

  • 22 сентября 2011 03:08
  • Регистрация: 14.04.2011
  • Был(а) онлайн: 16.08.2022
  • Комментариев: 77
  • 0
блин, ппц, мою тему уже свиснули=)))жопа..
если че, админы, нашел тут _http://cmsrules.ru/3015-samyy-prostoy-sposob-sozdaniya.html

#6kamaz6141

  • 11 ноября 2011 20:41
  • Регистрация: 17.09.2010
  • Был(а) онлайн: 15.10.2015
  • Комментариев: 56
  • -1
что то не работает =(

аа, всё)) jquery.qtip-1.0.0.min.js пустой был biggrin

#7nestea

  • 29 ноября 2011 12:20
  • Регистрация: 29.11.2011
  • Был(а) онлайн: 29.11.2011
  • Комментариев: 10
  • 0
на HTML5 можно реализовать

#8DjDiLiSoFT

  • 19 декабря 2011 01:19
  • Регистрация: 18.12.2011
  • Был(а) онлайн: 20.02.2012
  • Комментариев: 1
  • 0
Спосибо памогло

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей
Май 2024 (2)
Апрель 2024 (20)
Март 2024 (18)
Февраль 2024 (27)
Январь 2024 (11)
Декабрь 2023 (12)
Друзья сайта