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

Чтение RSS Мы в твиттере
Название темыПросмотровОтветовПоследний
Чат 44 7 Assada
50к на подписки - эксперимент 951 37 _M_
Как изменить skin.txt в uppod плеере? 57 5 WinDiZ
Есть тут создатели AMX плагинов? 0 0 Deerty.vs
Бесплатные SMS и MMS 120 4 animex
Linux Debian 443 28 }{oтт@бь)ч
«    Май 2012    »
ПнВтСрЧтПтСбВс
 
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
 

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

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


У нас вы можете скачать бесплатно Самый простой способ создания подсказок с помощью jQuery и qTip .
Это материал доступен по следующим словам - jQuery, qTip, подсказки для dle.
Не пропустите комментарии к Самый простой способ создания подсказок с помощью jQuery и qTip.
Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

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



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

Heon

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

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

realyhead

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

-=CDSERG=-

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

YoRkbi

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

soulman

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

kamaz6141

  • 11 ноября 2011 20:41
  • Регистрация: 17.09.2010
  • ICQ: 1342277
  • Комментариев: 28
что то не работает =(

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

nestea

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

DjDiLiSoFT

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

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


Yandex-Апдейт
↓ Апдейты Яndex тИЦ
13.04.2012Последний
16.02.2012
04.02.2012
↓ Апдейты выдачи Яndexa
23.05.2012Последний
17.05.2012
15.05.2012
↓ Апдейты ЯКаталога
23.05.2012Последний
22.05.2012
21.05.2012
Витрина ссылок
Elegant Division: Коллекция смайлов для DLE
Assada: Profile Reviews 1.3 - модуль стены для DLE! http://assada.com.ua/
Misterio: DCOReARTS.COM - Студия web - дизайна и графики!
Misterio: DCOReARTS.COM - Студия web - дизайна и графики!
skRpk: пбчит.рф Баги и Читы для игры Point Blank

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

Опросы

Чего не хватает сайту?

Материала
Живого общения

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

  • Всё для IPB
  • Информер