ВНИМАНИЕ! Опубликовано расписание занятий на 2017-2018 уч. год Подробнее
Toggle Bar

БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

jQuery. Как сделать выпадающие окна подсказок

На страницу вашего сайта требуется вывести подсказку или подробное описание чего либо. Оно должно "красиво" появиться при нажатии на ссылку или кнопку, при этом сама страница не должна перегружаться. Простой и быстрый способ решения такой задачи — использование библиотеки jQuery.

В этом уроке мы рассмотрим как сделать выпадающие окна подсказок или сообщений с использованием библиотеки jQuery. В результате должно получится следующее:

demo      skachat

  1. Сделайте фон страницы серым или голубым (любым, кроме белого, иначе ссылку не будет видно).
  2. Подключить к своей странице 2 библиотеки jQuery которые должны находиться в папке js, например так:

    <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
     <script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script>

  3. Создайте 2 класса box и boxclose в таблицах стилей:

    <style type="text/css">
     .box{
         position:fixed;
         top:-300px;
         left:20%;
         right:20%;
         background-color:#fff;
         color:#4F4F4F;
         padding:10px;
         border:2px solid #aaa;
         z-index:101;
     }
    a.boxclose{
         float:right;
         width:18px;
         height:18px;
         background:transparent url(images/cancel.png) repeat top left;
         margin-top:-7px;
         margin-right:-7px;
         cursor:pointer;
     }
     </style>

  4. Вставте в нужном месте сайта ссылку для открытия «выпадающего» окна:

    <div class="content">
     <a class="activator" id="activator" style="cursor:pointer; color:#fff">открыть</a>
     </div>

    Ссылка может быть как текстовой (показано в примере), тка и графической.

  5. Создаем еще два блока div, один с идентификатором overlay второй с id box:

    <div class="overlay" id="overlay" style="display:none;"></div>
     <div class="box" id="box">
        <a class="boxclose" id="boxclose"></a>
        <h2 align="center">Подробное описание</h2><hr width="80%" />
        <p>Тут должен быть текст выпадающей подсказки. В тексте можно использовать HTML-теги форматирования (для текста, картинок, таблиц ит.д.)</p>
     </div>

  6. Еще нужно создать небольшой скриптв разделе head, обеспечивающий появление и исчезновение окна.

    <script type="text/javascript">
     $(function(){
       $("#dialog").dialog({
          autoOpen: false
       });
     $("#openD").click(function(){
       $("#dialog").dialog("open");
       });
     });
    </script>

  7. Далее вставляем в конец страницы скрипт:

    <script type="text/javascript">
     $(function() {
      $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
          $('#box').animate({'top':'260px'},500);
        });
      });
      $('#boxclose').click(function(){
        $('#box').animate({'top':'-300px'},500,function(){
          $('#overlay').fadeOut('fast');
        });
      });
    });
    </script>


    Первая часть скрипта выводит окно на экран, вторая — убирает окно. В каждой части есть регулируемые параметры, которые определяют отступ от верхнего края и время анимации (скорость появления или исчезновения окна). Скрипт нужно поставить в раздел head:

  8. Для корректной работы скрипта в правом верхнем углу выпадающего окна должен появился крестик, поместите графический файл cancel.png в папку images.

    cancel

  9. Сохраните страницу и проверьте ее работу.

 

Добавить комментарий
  • Комментарии не найдены
 
DMC Firewall is a Joomla Security extension!