prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

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

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


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Самый простой способ создания подсказок с помощью 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. Это моя первая новость на сайте, не судите строго=) Ребят, если будет интересно данный метод, потом могу поколдовать с другими методами и выложить наиболее интересные сюда.


+2
Просмотры: 7424 VIP ProWebber | Комментарии (8)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Heon

  • 13 сентября 2011 21:09
  • Регистрация: 13.02.2010
  • ICQ: 562788181
  • Комментариев: 108
Объекты метода qtip
Не совсем понятно как его реализовать.

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

0

#2realyhead

  • 14 сентября 2011 00:15
  • Регистрация: 14.02.2011
  • ICQ: --
  • Комментариев: 119
Пантово! робит)

0

#3-=CDSERG=-

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

0

#4YoRkbi

  • 15 сентября 2011 22:16
  • Регистрация: 18.05.2010
  • ICQ: --
  • Комментариев: 39
полезная шняга

0

#5soulman

  • 22 сентября 2011 03:08
  • Регистрация: 14.04.2011
  • ICQ: --
  • Комментариев: 77
блин, ппц, мою тему уже свиснули=)))жопа..
если че, админы, нашел тут
Для просмотра скрытого текста необходимо зарегистрироваться!

0

#6kamaz6141

  • 11 ноября 2011 20:41
  • Регистрация: 17.09.2010
  • ICQ: --
  • Комментариев: 56
  • Выкл.
что то не работает =(

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

-1

#7nestea

  • 29 ноября 2011 12:20
  • Регистрация: 29.11.2011
  • ICQ: --
  • Комментариев: 10
на HTML5 можно реализовать

0

#8DjDiLiSoFT

  • 19 декабря 2011 01:19
  • Регистрация: 18.12.2011
  • ICQ: --
  • Комментариев: 1
Спосибо памогло

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

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки