jquery: запуск публичного метода одного плагина после изменений из второго плагина - PullRequest
Новая
       19

jquery: запуск публичного метода одного плагина после изменений из второго плагина

8 голосов
/ 12 ноября 2010

эй .. нужен совет еще раз:)

Я работаю над проектом с фильтруемым портфелем [на основе этой ссылки на плагин: www.gethifi.com / blog / a-jquery-плагин для создания-интерактивного-фильтруемого-портфолио- как-наш .

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

вот и моя проблема:

ширина ползунка рассчитывается в плагине smoothdivscroller www.smoothdivscroll.com . но когда я изменяю содержимое ползунка с помощью навигации по фильтру, общая ширина ползунка изменяется, но плагин smoothdivscroller этого не замечает.

Я настроил упрощенный пример в jsfiddle для вас, и вы можете испытать всю проблему здесь kuemmel-schnur.de / projekte : когда все проекты показаны (все) и Вы прокручиваете вправо, а затем переключаетесь в категорию «Lehrprojekte», вы не увидите никаких проектов, потому что они находятся на крайней левой стороне и общая ширина контейнера не пересчитывается.

Чтобы это исправить, у меня есть три идеи, где мне нужна серьезная помощь.

1) плагин smoothdivscroll предлагает публичный метод для пересчета ширины контейнера, например 

$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

, который мне нужно запускать каждый раз после нажатия portfolio-list a. и мне нужно объединить это с методом, в котором ползунок автоматически переключается на первый элемент текущего содержимого 

$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");

2) Моя вторая идея - потому что я не знаю, работает или нет 1) - проверить, изменяется ли URL-адрес, а затем запустить пересчет. фильтр использует хеш для адресации содержимого. поэтому я подумал, что могу прочитать URL-адрес, и каждый раз, когда часть сразу после изменения хеша, я могу запустить метод.

3) Я мог бы связать фильтруемый плагин с плагином smoothDivScroll чем-то вроде (остерегайтесь совершенно неправильного кода:) 

$('#portfolio-list').filterable();
 $('#portfolio-filter a').click(function(){
        $('#makeMeScrollable').smoothDivScroll("moveToElement", "first")("recalculateScrollableArea");
});

так .. что ты думаешь? снова ссылка jsfiddle: jsfiddle.net / tobiasmay / QudtF /

спасибо, тоби.

пс. я бы правильно настроил ссылки, но мне нужно еще 1 очко репутации, чтобы публиковать более 1 ссылки;)

Ответы [ 3 ]

2 голосов
/ 05 февраля 2012

Вы можете прослушать событие filterportfolio и оттуда пересчитать / moveToElement. 

$("body").bind("filterportfolio", function()
{
    var
        interval = 50,
        duration = 1000;

    var intervalId = setInterval(function()
    {
        $("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

        duration -= interval;

        if(duration <= 0)
        {
            clearInterval(intervalId);
        }
    }, interval);

    $("#makeMeScrollable").smoothDivScroll("moveToElement", "first");
});

Казалось, что он работает при игре с ним в консоли javascript на живом сайте . Добавьте блок кода в aks.js или попробуйте его в Chrome: перейдите на сайт, откройте консоль, вставьте код и нажмите ввод. Должен работать сразу при воспроизведении шагов из вопроса: прокрутите далеко вправо, нажмите на фильтр.

Редактировать: из-за анимации в фильтрации, .smoothDivScroll(...) необходимо назвать после анимации выполнены. Поскольку анимации могут выглядеть немного некрасиво, если их вызывать только один раз, пересчеты будут выполняться несколько раз в течение duration миллисекунд с интервалом interval миллисекунд.

1 голос
/ 27 марта 2012

Вы можете использовать пользовательское событие jQuery: при изменении содержимого слайдера выполняется

$(document).trigger('contentChange');

и в плагине он устанавливает обработчик для этого события

$(document).bind('contentChange', function(){//here the code that changes the width of slider});

0 голосов
/ 05 февраля 2012

Вот мой взгляд на эту проблему.

Вы можете попробовать второй вариант: захватить событие изменения хеша 

$('window').hashChange(function() {
    $('portfolio-list').filterable();
});

Единственный минус при таком подходе: IE7 не поддерживает hashChangeСобытие изначально.

...