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

    <<

    Admin

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

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

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

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

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

    aldous

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

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

    Admin

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

    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

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

    Получилось со ссылкой. Очень странно блоггер относится к скрипту, не даёт редактировать. Приходится всё делать в блокноте.
    JQuery скрипт всплывающая подсказка
    <<

    Admin

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

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

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

    aldous

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

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

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

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

    aldous

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

    И так, чтобы работали подсказки нужно:
    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'/>

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

    Теперь непосредственно сами подсказки. Документация на офсайте. Конкретный пример:
    JQuery скрипт всплывающая подсказка
    menu.png (9.21 КБ) Просмотров: 48

    Чтобы получить такую всплывающую менюшку, я использовал в посте:
    Ссылка:
      Код:
    <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>


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


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

    aldous

    Сообщение 17 июл 2011, 12:48

    В качестве дополнения:
    тескт можно прятать с помощью этого скрипта.
    <<

    aldous

    Сообщение 18 июл 2011, 09:05

    Пофисил баги и дополнил.
    <<

    Admin

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

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

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

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