переинициализация скрипта при изменении размера страницы

Тема в разделе "JavaScript", создана пользователем registered, 16 апр 2012.

Модераторы: ZiX
  1. registered

    registered Создатель

    Регистр.:
    13 апр 2012
    Сообщения:
    45
    Симпатии:
    4
    есть скрипт:
    Код:
    /*
        tabSlideOUt v1.1
       
        By William Paoli: http://wpaoli.building58.com
     
        To use you must have an image ready to go as your tab
        Make sure to pass in at minimum the path to the image and its dimensions:
       
        example:
       
            $('.slide-out-div').tabSlideOut({
                    tabHandle: '.handle',                        //class of the element that will be your tab -doesnt have to be an anchor
                    pathToTabImage: 'images/contact_tab.gif',    //relative path to the image for the tab *required*
                    imageHeight: '133px',                        //height of tab image *required*
                    imageWidth: '44px',                          //width of tab image *required*   
            });
     
       
    */
     
     
    (function($){
        $.fn.tabSlideOut = function(callerSettings) {
            var settings = $.extend({
                tabHandle: '.handle',
                speed: 300,
                action: 'click',
                tabLocation: 'left',
                topPos: '200px',
                leftPos: '20px',
                fixedPosition: false,
                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();
            });
           
            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);
    

    выводит popover в нужном месте.
    запускается таким образом:
    Код:
    <script type="text/javascript">
        $(function(){
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle', //класс элемента вкладки
                pathToTabImage: '/img/slide_tab/slide_tab_tag_2.png', //путь к изображению "обязательно"
                imageHeight: '400px', //высота изображения "обязательно"
                imageWidth: '40px', //ширина изображения "обязательно"
                tabLocation: 'left', //сторона на которой будет вкладка top, right, bottom, или left
                speed: 300, //скорость анимации
                action: 'click', //опции=: 'click' или 'hover', анимация при нажатии или наведении
                topPos: '200px', //расположение от верхнего края/ использовать если tabLocation = left или right
                leftPos: '20px', //расположение от левого края/ использовать если tabLocation = bottom или top
                fixedPosition: false //опции: true сделает данную вкладку неподвижной при скролле
            });
        });
    </script>
    
    однако, позицию для "выплывания" и размеры он устанавливает один раз, при запуске (считывает размеры div`a).
    а мне нужно, чтобы при изменении размера страницы менялись и размеры слоя, и, соответственно, скрипт грузился заново, или переинициализировался.
    мой воспалённый моск работает в таком направлении:
    я выношу всё, что относится к установке размеров и позиции в отдельную функцию:
    Код:
    .
    .
    .
            this.resetInit = function(){
                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');
                }
            }
     
            this.resetInit();
    .
    .
    .

    но теперь не знаю, как к ней обратиться из моей страницы.
    какие будут мысли?
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    эм, а зачем такой огород?
    HTML:
    
    $(window).bind('resize', function() {
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle', //класс элемента вкладки
            pathToTabImage: '/img/slide_tab/slide_tab_tag_2.png', //путь к изображению "обязательно"
            imageHeight: '400px', //высота изображения "обязательно"
            imageWidth: '40px', //ширина изображения "обязательно"
            tabLocation: 'left', //сторона на которой будет вкладка top, right, bottom, или left
            speed: 300, //скорость анимации
            action: 'click', //опции=: 'click' или 'hover', анимация при нажатии или наведении
            topPos: '200px', //расположение от верхнего края/ использовать если tabLocation = left или right
            leftPos: '20px', //расположение от левого края/ использовать если tabLocation = bottom или top
            fixedPosition: false //опции: true сделает данную вкладку неподвижной при скролле
        });
    });
    
     
  3. registered

    registered Создатель

    Регистр.:
    13 апр 2012
    Сообщения:
    45
    Симпатии:
    4
    варианты?
    предложения?