Публикации

Пользователь:

Пароль:


Запомнить

Регистрация
Забыли пароль?



Пользователей: 3898
Новичок: BAnatol
Поддержи проект
Поддержите проект Webmoney
R197422573540
E197270426287
Z701768662172
Сказали «Спасибо»

Навигация

Выпадающий блок на jQuery+CSS


Автор: Кадников Александр
 8.1 - 10 голосов -

Решил написать очередной урок, сегодня будем делать хак «Выпадающий блок» на jQuery+CSS...

Данное решение идеально подходит для контактных форм, счетчиков посещений, карт проезда к месту, пояснительных и других текстов, опросов на сайте, да и вообще для любых целей. Расположить его можно с любой стороны страницы. Кроме этого, можно использовать красивую кнопку (как она будет выглядеть, зависит, только от вас) для повышения кликабельности.

Итак приступим...

1. Создаем в папке с вашей темой новую папку и называем её outblock

2. В папке outblock создаем текстовый файл и называем его OutBlock.js

3. Открываем этот файл и вставляем в него следующий код:
  1. (function($){
  2.     $.fn.tabSlideOut = function(callerSettings) {
  3.         var settings = $.extend({
  4.             tabHandle: '.handle',
  5.             speed: 300,
  6.             action: 'click',
  7.             tabLocation: 'left',
  8.             topPos: '200px',
  9.             leftPos: '20px',
  10.             fixedPosition: false,
  11.             positioning: 'absolute',
  12.             pathToTabImage: null,
  13.             imageHeight: null,
  14.             imageWidth: null                      
  15.         }, callerSettings||{});
  16.  
  17.         settings.tabHandle = $(settings.tabHandle);
  18.         var obj = this;
  19.         if (settings.fixedPosition === true) {
  20.             settings.positioning = 'fixed';
  21.         }
  22.                 else {
  23.             settings.positioning = 'absolute';
  24.         }
  25.  
  26.         // Исправление проблемы с IE6
  27.         if (document.all && !window.opera && !window.XMLHttpRequest) {
  28.             settings.positioning = 'absolute';
  29.         }
  30.  
  31.         // Задание начальных CSS
  32.         settings.tabHandle.css({
  33.             'display': 'block',
  34.             'width' : settings.imageWidth,
  35.             'height': settings.imageHeight,
  36.             'textIndent' : '-99999px',
  37.             'background' : 'url('+settings.pathToTabImage+') no-repeat',
  38.             'outline' : 'none',
  39.             'position' : 'absolute'
  40.         });
  41.  
  42.         obj.css({
  43.             'line-height' : '1',
  44.             'position' : settings.positioning
  45.         });
  46.  
  47.        
  48.         var properties = {
  49.             containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
  50.             containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
  51.             tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
  52.             tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
  53.         };
  54.  
  55.         // Набор рассчета CSS
  56.         if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
  57.             obj.css({'left' : settings.leftPos});
  58.             settings.tabHandle.css({'right' : 0});
  59.         }
  60.        
  61.         if(settings.tabLocation === 'top') {
  62.             obj.css({'top' : '-' + properties.containerHeight});
  63.             settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
  64.         }
  65.  
  66.         if(settings.tabLocation === 'bottom') {
  67.             obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
  68.             settings.tabHandle.css({'top' : '-' + properties.tabHeight});
  69.            
  70.         }
  71.        
  72.         if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
  73.             obj.css({
  74.                 'height' : properties.containerHeight,
  75.                 'top' : settings.topPos
  76.             });
  77.            
  78.             settings.tabHandle.css({'top' : 0});
  79.         }
  80.        
  81.         if(settings.tabLocation === 'left') {
  82.             obj.css({ 'left': '-' + properties.containerWidth});
  83.             settings.tabHandle.css({'right' : '-' + properties.tabWidth});
  84.         }
  85.  
  86.         if(settings.tabLocation === 'right') {
  87.             obj.css({ 'right': '-' + properties.containerWidth});
  88.             settings.tabHandle.css({'left' : '-' + properties.tabWidth});
  89.            
  90.             $('html').css('overflow-x', 'hidden');
  91.         }
  92.  
  93.         // Функции для создания анимации
  94.        
  95.         settings.tabHandle.click(function(event){
  96.             event.preventDefault();
  97.         });
  98.        
  99.         var slideIn = function() {
  100.             if (settings.tabLocation === 'top') {
  101.                 obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
  102.             }
  103.                         else if (settings.tabLocation === 'left') {
  104.                 obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
  105.             }
  106.                         else if (settings.tabLocation === 'right') {
  107.                 obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
  108.             }
  109.                         else if (settings.tabLocation === 'bottom') {
  110.                 obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
  111.             }    
  112.            
  113.         };
  114.  
  115.         var slideOut = function() {
  116.             if (settings.tabLocation == 'top') {
  117.                 obj.animate({top:'-3px'},  settings.speed).addClass('open');
  118.             }
  119.                         else if (settings.tabLocation == 'left') {
  120.                 obj.animate({left:'-3px'},  settings.speed).addClass('open');
  121.             }
  122.                         else if (settings.tabLocation == 'right') {
  123.                 obj.animate({right:'-3px'},  settings.speed).addClass('open');
  124.             }
  125.                         else if (settings.tabLocation == 'bottom') {
  126.                 obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
  127.             }
  128.         };
  129.  
  130.         var clickScreenToClose = function() {
  131.             obj.click(function(event){
  132.                 event.stopPropagation();
  133.             });
  134.            
  135.             $(document).click(function() {
  136.                 slideIn();
  137.             });
  138.         };
  139.        
  140.         var clickAction = function() {
  141.             settings.tabHandle.click(function(event) {
  142.                 if (obj.hasClass('open')) {
  143.                     slideIn();
  144.                 } else {
  145.                     slideOut();
  146.                 }
  147.             });
  148.            
  149.             clickScreenToClose();
  150.         };
  151.        
  152.         var hoverAction = function() {
  153.             obj.hover(
  154.                 function() {
  155.                     slideOut();
  156.                 },
  157.                
  158.                 function() {
  159.                     slideIn();
  160.                 });
  161.                
  162.                 settings.tabHandle.click(function(event) {
  163.                     if (obj.hasClass('open')) {
  164.                         slideIn();
  165.                     }
  166.                 });
  167.                 clickScreenToClose();
  168.                
  169.         };
  170.        
  171.         // Выбор типа действия
  172.         if (settings.action === 'click') {
  173.             clickAction();
  174.         }
  175.        
  176.         if (settings.action === 'hover') {
  177.             hoverAction();
  178.         }
  179.     };
  180. })(jQuery);
Создали и сохранили файл, идем дальше...

5. В папке outblock так же должны находится изображения кнопок, по умолчанию размер 140x35px, для примера вот такие:

Кнопка для верхнего расположения блока:
- top.png

Кнопка для левого расположения блока:
- left.png

Называем файлы изображений соответственно top, bottom, left и right.
Ну с оставшимися двумя кнопками всё понятно
Я эти кнопки нарисовал, только для этого урока, вы естественно будете делать свои...
С этим закончили, идем дальше...

6. Открываем файл header_default.php, который находится по адресу e107_themes/templates/ header_default.php

7. Находим в нем следующий код:
  1. echo "<!-- *JS* -->\n";

и после него вставляем эти строки:
  1. echo "<style type='text/css' media='screen'>    
  2.                 .slide-out-div {
  3.                         padding: 5px 0px 0px 0px; /* Отступы в блоке */
  4.                         width: 680px; /* Размер блока */
  5.                         color: #fff; /* Цвет текста в блоке */
  6.                         text-align: center;
  7.                         background-color: #1f242b; /* Цвет фона в блоке */
  8.                         opacity: 1; /* Прозрачность блока */
  9.                         border: #000 2px solid; /* Бордюр */
  10.                         border-radius: 5px; /* Радиус бордюра */
  11.                         -ms-border-radius: 5px;
  12.                         -moz-border-radius: 5px;
  13.                         -webkit-border-radius: 5px;
  14.                 }
  15.         </style>
  16. ";
  17.  
  18. echo "<script src='http:// ajax.googleapis.com/ajax/libs/ jquery/1.7/jquery.min.js' type='text/javascript'></ script>
  19.    <script src='".THEME."/outblock/OutBlock.js'></ script>
  20.    <script>
  21.                 $(function() {
  22.                         $('.slide-out-div') .tabSlideOut({
  23.                                 tabHandle: '.handle', /* Класс элемента */
  24.                                 pathToTabImage: '".THEME."/outblock/top.png', /* Путь к изображению + обязательно + */
  25.                                 imageHeight: '140px', /* Высота изображения + обязательно + */
  26.                                 imageWidth: '35px', /* Ширина изображения + обязательно + */
  27.                                 tabLocation: 'top', /* Сторона на которой будет вкладка top, right, bottom, или left */
  28.                                 speed: 550, /* Скорость анимации, чем больше значение, тем плавнее */
  29.                                 action: 'hover', /* Опции: 'click' или 'hover', анимация при нажатии или наведении */
  30.                                 topPos: '0px', /* Расположение от верхнего края, если использовать tabLocation = left или right */
  31.                                 leftPos: '350px', /* Расположение от левого края, если использовать tabLocation = top или bottom */
  32.                                 fixedPosition: true /* Опции: true сделает данную вкладку неподвижной при скроллинге экрана */
  33.                         });
  34.                 });
  35.         </script>
  36. ";

7. Далее в этом же файле находим строчки кода:
  1. echo "</head>
  2. <body".$body_onload.">\n";

И вставляем после них следующий код:
  1. # Добавил Predator 12.07.2010
  2. echo "<div class='slide-out-div' style='text-align: left';>
  3.        <a class='handle' href='http://link-for-non-js- users'>JavaScript Off</a>
  4.        <h4><span>Выпадающий блок</span></h4>
  5.                 <br />
  6.                 <span>
  7.                 Тут может-быть абсолютно любой текст<br />
  8.                 Либо, какая-то форма<br />
  9.                 Либо счетчики<br /><br />
  10.                 В общем всё, что угодно!<br />
  11.                 </span>
  12.         </div>";

8. Сохраняем файл и смотрим, что у нас получилось.

Подробно о каждой опции Вы можете прочитать в комментариях к коду. Как Вы могли заметить в коде сверху присутствует ссылка. Она будет показана пользователям, у которых отключен Javascript. Ну и соответственно весь контент блока располагается между тэгами
  1. <div></div>


Как менять положение блока по сторонам экрана думаю сами разберетесь
Если меняете положение блока, естественно нужно менять и изображение кнопки...

На этом всё. Всем удачи и до новых уроков!