Сообщение # 1 | 01:30:50 02 Сен 2013
Здравствуйте, имеется скрипт выдвижной панели.

Скрипт работает нормально, проблем в принципе нет, только одна незначительная но хотелось бы её решить.

Панель открывается при нажатии на кнопку, а закрывается она при клике на любое место сайта, т.е. за пределами самой панели, как сделать чтобы она закрывалась только при нажатии на ту же самую кнопку?

Никак что то не получается, что нужно удалить из скрипта? Или может что то добавить?

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

Добавлено (02 Сен 2013, 01:30:14)
---------------------------------------------
В предыдущий пост не поместился:

1 часть:

Код
(function($){
     $.fn.tabSlideOut = function(callerSettings) {
         var settings = $.extend({
             tabHandle: '.handle',
             speed: 300,  
             action: 'click',
             tabLocation: 'right',
             topPos: '200px',
             leftPos: '20px',
             fixedPosition: true,
             positioning: 'absolute',
             pathToTabImage: null,
             imageHeight: null,
             imageWidth: null                        
         }, 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();
         };);

Добавлено (02 Сен 2013, 01:30:50)
---------------------------------------------
2 часть:

Код

          
         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);

$(function(){      
      $('.center_dm_ru_chat').tabSlideOut({      
      tabHandle: '.handle',      
      pathToTabImage: 'http://marvelanddc.ucoz.ru/scripts/Knopkamchat/knopka_mini_chat.png',      
      imageHeight: '93px',      
      imageWidth: '20px',      
      tabLocation: 'right',      
      speed: 250,      
      action: 'click',      
      topPos: '50px',      
      fixedPosition: true      
      };);
};);