JQuery скрипт всплывающая подсказка

Ответить
<<

Admin

Аватара пользователя

Автор темы

Сообщения: 1452

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 158 раз.

Сообщение 15 июл 2011, 11:43

Re: JQuery скрипт всплывающая подсказка

aldous писал(а):Мне надо в группу блоггер? :head:

Да. Нужно указать свой блог в поле в профиле.

aldous писал(а):
  Код:
content: {
   text: 'I really like owls!',
   title: { text: 'About me' }

Ну почему :furious: ну почему :x абсолютно все так пишут :dash: Ну человек, который не разбирается в скриптах, он не знает, куда эти строчки вписывать. И в документации, там по другому написано :blush:
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 15 июл 2011, 12:51

Re: JQuery скрипт всплывающая подсказка

Красноречивые смайлики.
Попозже отпишу человеческим языком. Я пока сам не всё понял, а именно как запихнуть ссылочный массив. Можете дать код своего блока?
Блог указал, дайте мне возможность пришпиливать пикчи :gcrazy:
<<

Admin

Аватара пользователя

Автор темы

Сообщения: 1452

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 158 раз.

Сообщение 15 июл 2011, 15:03

Re: JQuery скрипт всплывающая подсказка

aldous писал(а): Можете дать код своего блока?

Ну так я его буду переделывать, с учетом подсказок. В общем будут кнопки социальных сетей с ссылками на мои аккаунты в них. Рядом с каждой кнопкой будет, наверно, картинка знака вопроса, при щелчке на которую и будет появляться подсказка. Как-то так:
  Код:
<a href="ссылка на аккаунт в соцсети"><img src="картинка-кнопка соцсети" /></a><img src="картинка знака вопроса" />

И так для каждой сети. Естественно, все это будет в дивах.
Не знаю, что вы там хотите увидеть, на данный момент весь блок с подпиской и ссылками на статьи выглядит так:
  Код:
    <div id='podpiska'>
<a class='share' href='http://feeds.feedburner.com/blogspot/smoy' onClick='javascript: pageTracker._trackPageview(&apos;/out/rssfeed&apos;);' rel='nofollow' target='_blank'><img src='https://lh6.googleusercontent.com/_G92voTj-yF0/TUyR9ITtkOI/AAAAAAAABKU/WarqTuoHsH8/rss1.png'/></a> <a class='share' href='http://vkontakte.ru/public24000342' rel='nofollow' target='_blank'><img src='https://lh6.googleusercontent.com/_G92voTj-yF0/TUyR9bY86kI/AAAAAAAABKc/kJriHQeKjn4/vkontakte1.png'/></a> <a class='share' href='http://twitter.com/amateurbloger' rel='nofollow' target='_blank'><img src='https://lh3.googleusercontent.com/_G92voTj-yF0/TUySKbxRTcI/AAAAAAAABKk/IymIiE36dzw/twitter1.png'/></a> <a class='share' href='http://www.facebook.com/amateurblogger.ru' target='_blank'><img src='https://lh3.googleusercontent.com/_G92voTj-yF0/TUySKreUueI/AAAAAAAABKs/k8ic-MR5GNc/facebook1.png'/></a><br/>
<!-- rss2email -->
<table cellpadding='0' cellspacing='2' id='rssemail'>
<form action='http://www.rss2email.ru/ready.asp' method='get'>
<tr><td class='rss2email3_txt'><input name='rss' type='hidden' value='http://feeds.feedburner.com/blogspot/smoy'/><input name='link' type='hidden' value=''/><input name='logo' type='hidden' value=''/><span>Получать на почту через RSS2email.ru</span><input name='email' onfocus='if (this.value==&apos;Ваш E-mail&apos;) this.value=&apos;&apos;;' size='20' style='width: 230px;' type='text' value='Укажите Ваш e-mail'/></td></tr><tr><td><input type='submit' value=' Получать на почту '/>
</td></tr></form></table>
<!-- /rss2email -->
<div id='question'>
<a href='http://amateurblogger.ru/2010/10/rss-eto-dolzhen-znat-kazhdyj.html'>Что такое RSS</a><br/>
<a href='http://amateurblogger.ru/2010/06/how-to-use-twitter.html'>Как пользоваться Twitter</a><br/>
<a href='http://amateurblogger.ru/2010/10/dobro-pogalovat-v-facebook.html'>Узнать больше о Facebook</a><br/>
<a href='http://amateurblogger.ru/2011/02/otvety-na-voprosy-vypusk-odinadtcatyj.html'>Как сделать такие кнопки подписки</a><br/>
<a href='http://amateurblogger.ru/2011/01/kak-sdelat-menu-vkladki-tab-menu.html'>Как сделать такое меню с вкладками</a>
</div>

</div>

aldous писал(а):Блог указал, дайте мне возможность пришпиливать пикчи :gcrazy:

Присвоила группу.
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 15 июл 2011, 18:34

Re: JQuery скрипт всплывающая подсказка

Получилось со ссылкой. Очень странно блоггер относится к скрипту, не даёт редактировать. Приходится всё делать в блокноте.
Mozilla Firefox.png
У вас нет необходимых прав для просмотра вложений в этом сообщении.
<<

Admin

Аватара пользователя

Автор темы

Сообщения: 1452

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 158 раз.

Сообщение 15 июл 2011, 19:34

Re: JQuery скрипт всплывающая подсказка

aldous писал(а):Получилось со ссылкой.

Хорошо :) Это если кликнуть на подсказку? А можно сделать без клика, а при наведении на кнопку самой социальной сети?
Клик актуален в том случае, когда в подсказке подгружается статья, а если только ссылка, то без клика, мне кажется, лучше ;-)
И когда будет инструкция человеческим языком :blush:
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 15 июл 2011, 21:58

Re: JQuery скрипт всплывающая подсказка

Admin писал(а):
aldous писал(а):Получилось со ссылкой.

Хорошо :) Это если кликнуть на подсказку? А можно сделать без клика, а при наведении на кнопку самой социальной сети?
Клик актуален в том случае, когда в подсказке подгружается статья, а если только ссылка, то без клика, мне кажется, лучше ;-)
И когда будет инструкция человеческим языком :blush:

Странный вопрос)
Вы же видели демки http://craigsworks.com/projects/qtip/demos/ И клик и наведение, куча всего.
Последняя - modal tooltips больше всего подходит, от её кода и надо плясать).
Как расположу все ссылки одна под другой, так напишу.
Что касается привязке к картинке - это уже следующий шаг.
Не знаю, что там с другими подсказками, а этой я проникся, занятная тема, можно на любой движок поставить. Мне бы хотя б мануал целиком прочитать :ok:
Я чтобы сэкономить время слазил к ним на форум и методом научного тыка всё понял.
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 16 июл 2011, 11:08

Re: JQuery скрипт всплывающая подсказка

И так, чтобы работали подсказки нужно:
1) в секции
  Код:
<head> </head>
прописать
  Код:
<script src='http://linuxesrf.gb7.ru/docs/jquery-1.3.2.min.js' type='text/javascript'/>

2) перед
  Код:
</body>
прописать
  Код:
<script src='http://linuxesrf.gb7.ru/docs/jquery.qtip-1.0.0-rc3.min.js' type='text/javascript'/>

Мой хостинг не обязательно использовать, это для примера что и куда класть.

Теперь непосредственно сами подсказки. Документация на офсайте. Конкретный пример:
menu.png

Чтобы получить такую всплывающую менюшку, я использовал в посте:
Ссылка:
  Код:
<div id="content"><a href="#" rel="">тыц</a></div>


+ сам код:
  Код:
<script class="example" type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('#content a[rel]').each(function()
   {
      $(this).qtip(
      {
         content: {
   text: '<a href="http://amateurblogger.ru/2010/10/rss-eto-dolzhen-znat-kazhdyj.html">Что такое RSS</a> ' + '<br /><a href="http://amateurblogger.ru/2010/06/how-to-use-twitter.html">Как пользоваться Twitter</a>' + '<br /><a href="http://amateurblogger.ru/2010/10/dobro-pogalovat-v-facebook.html">Узнать больше о Facebook</a>' + '<br/ ><a href="http://amateurblogger.ru/2011/02/otvety-na-voprosy-vypusk-odinadtcatyj.html">Как сделать такие кнопки подписки</a>' + '<br /><a href="http://amateurblogger.ru/2011/01/kak-sdelat-menu-vkladki-tab-menu.html">Как сделать такое меню с вкладками</a>'
,
   title: {
text: 'Сцылки',
button: 'Закрыть'
}
},
         position: {
            corner: {
               target: 'bottomMiddle', // Position the tooltip above the link
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: {
            when: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 0,
               radius: 4
            },
            name: 'light', // Use the default light style
            width: 350 // Set the tooltip width
         }
      })
   });
});
</script>

Пояснение:

  Код:
$('#content a[rel]')
- идентификатор кода (content), указывается в
  Код:
<div id="content">
, чтобы к нужной строчке кода подключить нужный скрипт

Опции:
content или
  Код:
content: { text: 'My tooltip content' }
- текст, который должна содержать подсказка. Если ставите ссылки, не забывайте, что нужны в них двойные кавычки.

  Код:
title: {
text: 'Сцылки',
button: 'Закрыть'
}
- заголовок и кнопка закрыть

  Код:
         position: {
            corner: {
               target: 'bottomMiddle', // Position the tooltip above the link
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
- Расположение подсказки. С помощью
  Код:
position: { adjust: { x: 13, y: 0 } }
можно указать расположение более точно

  Код:
show: {
            when: 'mouseover'
- показывать при наведении

  Код:
name: 'light'
- это стили внешнего вида (подробности)

  Код:
width: 350 // Set the tooltip width
- ширина окна

Описание всех опций здесь.

Подсказку можно сделать и для картинки. Скрипт тот же, ссылка будет подобого вида:
  Код:
<div id="content">
<a href="http://ya.ru" rel="" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="225" src="http://4.bp.blogspot.com/-TInFglpfIT4/TiPfh6j3ssI/AAAAAAAAFns/cEAQ5JeP5wI/s320/images.jpg"/></a></div>


Пример:
tp.png


Сразу говорю, это не готовое решение "как пользоваться qTip", а пища для размышления :yes:
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось aldous 18 июл 2011, 13:14, всего редактировалось 9 раз(а).
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.
<<

Admin

Аватара пользователя

Автор темы

Сообщения: 1452

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 158 раз.

Сообщение 18 июл 2011, 14:22

Re: JQuery скрипт всплывающая подсказка

Шикарно. Как только улучу свободное время, сразу же займусь внедрением. :thank:
Пред.

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: Yandex [Bot]

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo