Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Как создать красивую всплывающую подсказку с помощью jQuery
Как создать красивую всплывающую подсказку с помощью jQuery
nDiviDДата: Пятница, 23.07.2010, 08:10 | Сообщение # 1
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Как создать красивую всплывающую подсказку с помощью jQuery

В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект.

В этом нам поможет jQuery.

С самого начала документа подключаем фреймворк:
-

Code
<script src="jquery.tools.min.js"></script>

-
Далее подключаем стили оформления. Как Вы видите - они находятся во внешнем файле:
-
Code
<link rel="stylesheet" type="text/css" href="tooltip.css"/>

-
В теле документа нам понадобится следующий код:
-
Code
<a href="#" id="trigger">
        Move the mouse over this box to see the tooltip in action.
    </a>
<!-- tooltip element -->
        <div class="tooltip">
    <h3>The Tooltip</h3>
   <p>
    <strong>A great tool for designing better layouts and more intuitive user-interfaces.</strong>
    </p>
   <p>
   Tooltips can contain any HTML such as links, images, forms and tables.
        This tooltip is vertically centered on the top edge of the trigger element.
    </p>
    </div>   

-
Класс "trigger" - это видимый объект на странице, а "tooltip" - это то, что должно появится при наведении мышки.

После этого кода нам необходимо инициализировать функцию.
-

Code
<script>
   $.tools.addTipEffect("slidedown",   
          
        // opening animation
        function() {   
        var opacity = this.getConf().opacity;
        this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show();
        },   
      
        // closing animation
        function() {
        this.getTip().animate({top: '+=15', opacity:0}, 300, function() {   
        $(this).hide().animate({top: '+=30'}, 0);
        });
        }
        );
     $("#trigger").tooltip({effect: 'slidedown'});
        </script>

-
Все готово! Оставайтесь с нами!




Прикрепления: newtooltip.zip(39.8 Kb)




Web-create пати uNiceGroup =) Порно бесплатно!


Сообщение отредактировал nDiviD - Пятница, 23.07.2010, 08:11
 
вверх
DemoZДата: Вторник, 28.09.2010, 18:00 | Сообщение # 2
Молчун
Группа: Пользователи
Пользователь №: 82
Сообщений: 5
Награды: 0
Репутация: 0
Статус: оффлайн
Точнее раскажи что куда запихивать а то тут всё как то не понятно.
 
вверх
nDiviDДата: Среда, 29.09.2010, 11:20 | Сообщение # 3
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
DemoZ, мне не понятно, что именно Вам не понятно =)


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
DemoZДата: Четверг, 30.09.2010, 17:24 | Сообщение # 4
Молчун
Группа: Пользователи
Пользователь №: 82
Сообщений: 5
Награды: 0
Репутация: 0
Статус: оффлайн
Всё просто.Вопрос такой обьясни в какие директории устанавливать.
 
вверх
MarcheXДата: Пятница, 01.10.2010, 10:23 | Сообщение # 5
Молчун
Группа: Пользователи
Пользователь №: 224
Сообщений: 14
Награды: 0
Репутация: -1
Статус: оффлайн
в корень сайта
 
вверх
DemoZДата: Пятница, 01.10.2010, 15:12 | Сообщение # 6
Молчун
Группа: Пользователи
Пользователь №: 82
Сообщений: 5
Награды: 0
Репутация: 0
Статус: оффлайн
Та я там уже разобрался затупил поначалу просто.
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Как создать красивую всплывающую подсказку с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск: