Доброго времени суток!
Иногда на сайте нужно организовать такой блок, который не должен занимать место "Спереди" но быть всегда под рукой. К примеру окно обратной связи или "контакты", окно для входа в личный кабинет, в общем все что изначально должно быть скрытым. Идея заключается в том, что справа/слева вверху/внизу будет кнопка, при нажатии на которую будет выдвигаться панель. И так - приступим.
Можете посмотреть пример:
Для работы скрипта, необходимо подключить библиотеку jQuery перед закрывающимся тегом
</head>
Если у Вас уже подключалась библиотека ранее для работы какого-то другого скрипта, то пропустите этот шаг для избежания конфликтов и нарушения работы других скриптов.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
Создайте файл, например panel.js и вставте в него следующий код:
$(function(){
$('.panel').tabSlideOut({ //Класс панели
tabHandle: '.handle', //Класс кнопки
pathToTabImage: 'imgbutton.jpg', //Путь к изображению кнопки
imageHeight: '122px', //Высота кнопки
imageWidth: '40px', //Ширина кнопки
tabLocation: 'right', //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
speed: 300, //Скорость анимации
action: 'click', //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
topPos: '200px', //Отступ сверху
fixedPosition: false //Позиционирование блока false - position: absolute, true - position: fixed
});
});
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
}, callerSettings||{});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
settings.tabHandle.css({
'display': 'block',
'width' : settings.imageWidth,
'height': settings.imageHeight,
'textIndent' : '-99999px',
'background' : 'url('+settings.pathToTabImage+') no-repeat',
'outline' : 'none',
'position' : 'absolute'
});
obj.css({
'line-height' : '1',
'position' : settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({'left' : settings.leftPos});
settings.tabHandle.css({'right' : 0});
}
if(settings.tabLocation === 'top') {
obj.css({'top' : '-' + properties.containerHeight});
settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'bottom') {
obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
settings.tabHandle.css({'top' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height' : properties.containerHeight,
'top' : settings.topPos
});
settings.tabHandle.css({'top' : 0});
}
if(settings.tabLocation === 'left') {
obj.css({ 'left': '-' + properties.containerWidth});
settings.tabHandle.css({'right' : '-' + properties.tabWidth});
}
if(settings.tabLocation === 'right') {
obj.css({ 'right': '-' + properties.containerWidth});
settings.tabHandle.css({'left' : '-' + properties.tabWidth});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event){
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({top:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({left:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({right:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
}
};
var clickScreenToClose = function() {
obj.click(function(event){
event.stopPropagation();
});
$(document).click(function(){
slideIn();
});
};
var clickAction = function(){
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function(){
obj.hover(
function(){
slideOut();
},
function(){
slideIn();
});
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
};
})(jQuery);
В начале скрипта строки, в которых можно настроить появление.
Далее подключаем данный файл сразу после подключения библиотеки.
<script src="panel.js" type="text/javascript"></script>
Далее вставляем где-то(где Вам удобнее) после тега
<body>
следующий код html:
<div class="panel"> <a class="handle" href="#">Смотреть</a> <!-- Ссылка для пользователей с отключенным JavaScript --> <h3><span > Заглавие </span></h3><br> <span> Текст или скрипт сюда </span> </div>
Для настройки панели которая появится после нажатия кнопки используйте следующий код CSS:
.panel {
padding: 20px;
width: 250px;
background: #eeeeee;
border: #282828 2px solid;
font-family: Georgia;
}
Если вы все сделали правильно, то у Вас появится результат. Также можете скачать исходники.
На этом все. Спасибо за внимание 🙂