Как обновить одну функцию Javascript при вызове window.resize

Я снова застрял;

У меня есть функция jQuery в теге php-файла, которая получает ширину экрана для галереи. Он вызывается, когда страница загружается и работает довольно хорошо. Но теперь я хочу, чтобы функция вызывалась снова каждый раз, когда размер окна изменяется, чтобы правильно установить новую ширину экрана. Одна из возможностей — использовать window.location.href для перезагрузки всей страницы при вызове window.resize, но это не то, что мне нужно.

Есть ли способ перезагрузить только функцию (или весь блок кода javascript, написанный в ) без перезагрузки связанных js-файлов и html-структуры?? Я просто хочу перезагрузить эту единственную функцию:

jqSlider(function(){

                var container = jqSlider('div.sliderGallery'); 
                var ul = jqSlider('ul', container); 
                var fensterBreite = jqSlider("#preloader").outerWidth(); 
                var itemsWidth = 2559 - fensterBreite; 

            jqSlider('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500, 'linear');
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });

person lucasdidthis    schedule 08.02.2011    source источник


Ответы (1)


Я признаю, что меня немного смущает ваш синтаксис, и я прошу прощения, если я не на месте, поэтому дайте мне знать, если это не то, что вам нужно, и я сделаю все возможное, чтобы изменить код в соответствии с вашими потребностями. Похоже, вы передаете анонимную функцию методу jqSlider, поэтому работаете над этим предположением:

  1. Переместите свою анонимную функцию в сохраненное место в памяти
  2. Передайте ссылку на функцию вашему методу jqSlider
  3. Привяжите ссылку на функцию к событию изменения размера окна

var mySliderFunc = function () {

    var container = jqSlider('div.sliderGallery');
    var ul = jqSlider('ul', container);
    var fensterBreite = jqSlider("#preloader").outerWidth();
    var itemsWidth = 2559 - fensterBreite;

    jqSlider('.slider', container).slider({
        min: 0,
        max: itemsWidth,
        handle: '.handle',
        stop: function (event, ui) {
            ul.animate({ 'left': ui.value * -1 }, 500, 'linear');
        },
        slide: function (event, ui) {
            ul.css('left', ui.value * -1);
        } 
    });
};

jqSlider(mySliderFunc);

$(window).resize(mySliderFunc);

person lsuarez    schedule 08.02.2011
comment
Если метод .slider() принимает уничтожение в качестве аргумента для вызова деструктора, вы можете добавить строку для уничтожения ползунка перед его повторной инициализацией. В противном случае вы можете столкнуться со странным поведением при попытке повторной инициализации метода для элемента DOM, уже содержащего ползунок. - person lsuarez; 08.02.2011
comment
Извините за странный синтаксис, я использую две разные версии jQuery в одном документе, поэтому я использовал var jqSlider = $.noConflict(true), что вызывает странный код. В любом случае, я попробовал ваш совет, но происходит что-то странное: функция вызывается, даже если она перемещена в сохраненное место в памяти, и я ее не вызываю. Это, конечно, не проблема, но когда я уничтожаю ползунок и пытаюсь его повторно инициализировать, он уничтожается без повторной инициализации. Я попробовал jqSlider(window).resize(function() {jqSlider('.slider', container).slider(destroy); mySliderFunc();}) Идеи?? - person lucasdidthis; 08.02.2011
comment
#preloader все еще находится в DOM и виден при вызове функции изменения размера? - person lsuarez; 09.02.2011
comment
на самом деле это не так, но даже если я изменю #preloader на body (который всегда виден), это не поможет. Если я использую mySliderFunc(), возникает ошибка, что mySliderFunc не является функцией, но когда я использую mySliderFunc без фигурных скобок, ошибка исчезает, но она все равно просто убивает ползунок, не создавая новый. Может быть, уничтожение и новый слайдер как-то сталкиваются и должны как-то вызываться подряд!? - person lucasdidthis; 09.02.2011
comment
Я все еще надеюсь на помощь, потому что даже расположение функций (с небольшой помощью затухания и обратного вызова) в ряд не помогает. Он по-прежнему убивает слайдер, не устанавливая новый... - person lucasdidthis; 11.02.2011
comment
наконец я нахожу решение. Я обновил ползунок [stackoverflow.com/questions/4881630/, и теперь я нашел решение проблемы с обновлением! Спасибо lthibodeaux за вашу помощь, ваша идея была решением! Вместо var mySliderFunc я использую jQuery.fn.mySliderFunc, это дает мне возможность вызывать функцию. Уничтожить И установить новый (и сбросить ползунок) следующим образом: $(window).resize(function() {$(#slider).slider(destroy); $(#gallery).css(left, 0px) ;jQuery.fn.mySliderFunc(); }); - person lucasdidthis; 13.02.2011