Плагин: Kwicks for Jquery отлично работает с Jquery 1.2.6, но не с 1.4.2 - PullRequest
0 голосов
/ 27 сентября 2010

Это плагин jquery (похожий на mootools): http://www.jeremymartin.name/projects.php?project=kwicks

У меня та же проблема, что и у этого парня jquery kwicks проблема (kwicks для jquery отлично работает на тестовом сайте, но не на живом сайте), но в моем случае я знаю, в чем проблема, я могу только Пока не нашли ответ, и плагин Kwicks больше не находится в активной разработке.

Мне кажется, проблема в версии Jquery. Этот плагин отлично работает с 1.2.6, но на 1.4.2 он просто не работает. Я пытался проверить код для плагина, но я не знаю, как обновить его до версии 1.4.2 Jquery. совместимы.

Я никогда не использовал 1.2.6, поэтому я не знаю, что мне нужно изменить, чтобы эта работа работала для 1.4.2.

Пожалуйста, помогите. Спасибо!

P.S> Ниже приведен исходный код плагина (совместим с Jquery 1.2.6).

(function($){
$.fn.kwicks = function(options) {
    var defaults = {
        isVertical: false,
        sticky: false,
        defaultKwick: 0,
        event: 'mouseover',
        spacing: 0,
        duration: 500
    };
    var o = $.extend(defaults, options);
    var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
    var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top

    return this.each(function() {
        container = $(this);
        var kwicks = container.children('li');
        var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
        if(!o.max) {
            o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
        } else {
            o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
        }
        // set width of container ul
        if(o.isVertical) {
            container.css({
                width : kwicks.eq(0).css('width'),
                height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
            });                
        } else {
            container.css({
                width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
                height : kwicks.eq(0).css('height')
            });                
        }

        // pre calculate left or top values for all kwicks but the first and last
        // i = index of currently hovered kwick, j = index of kwick we're calculating
        var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
        for(i = 0; i < kwicks.size(); i++) {
            preCalcLoTs[i] = [];
            // don't need to calculate values for first or last kwick
            for(j = 1; j < kwicks.size() - 1; j++) {
                if(i == j) {
                    preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
                } else {
                    preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
                }
            }
        }

        // loop through all kwick elements
        kwicks.each(function(i) {
            var kwick = $(this);
            // set initial width or height and left or top values
            // set first kwick
            if(i === 0) {
                kwick.css(LoT, '0px');
            } 
            // set last kwick
            else if(i == kwicks.size() - 1) {
                kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
            }
            // set all other kwicks
            else {
                if(o.sticky) {
                    kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
                } else {
                    kwick.css(LoT, (i * normWoH) + (i * o.spacing));
                }
            }
            // correct size in sticky mode
            if(o.sticky) {
                if(o.defaultKwick == i) {
                    kwick.css(WoH, o.max + 'px');
                    kwick.addClass('active');
                } else {
                    kwick.css(WoH, o.min + 'px');
                }
            }
            kwick.css({
                margin: 0,
                position: 'absolute'
            });

            kwick.bind(o.event, function() {
                // calculate previous width or heights and left or top values
                var prevWoHs = []; // prevWoHs = previous Widths or Heights
                var prevLoTs = []; // prevLoTs = previous Left or Tops
                kwicks.stop().removeClass('active');
                for(j = 0; j < kwicks.size(); j++) {
                    prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
                    prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
                }
                var aniObj = {};
                aniObj[WoH] = o.max;
                var maxDif = o.max - prevWoHs[i];
                var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
                kwick.addClass('active').animate(aniObj, {
                    step: function(now) {
                        // calculate animation completeness as percentage
                        var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
                        // adjsut other elements based on percentage
                        kwicks.each(function(j) {
                            if(j != i) {
                                kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
                            }
                            if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
                                kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
                            }
                        });
                    },
                    duration: o.duration,
                    easing: o.easing
                });
            });
        });
        if(!o.sticky) {
            container.bind("mouseleave", function() {
                var prevWoHs = [];
                var prevLoTs = [];
                kwicks.removeClass('active').stop();
                for(i = 0; i < kwicks.size(); i++) {
                    prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
                    prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
                }
                var aniObj = {};
                aniObj[WoH] = normWoH;
                var normDif = normWoH - prevWoHs[0];
                kwicks.eq(0).animate(aniObj, {
                    step: function(now) {
                        var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
                        for(i = 1; i < kwicks.size(); i++) {
                            kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
                            if(i < kwicks.size() - 1) {
                                kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
                            }
                        }
                    },
                    duration: o.duration,
                    easing: o.easing
                });
            });
        }
    });
};})(jQuery);

Ответы [ 2 ]

2 голосов
/ 27 сентября 2010

Благодаря Нику Крейверу и http://jsfiddle.net/ (см. Комментарий к исходному сообщению) я обнаружил проблему! Кажется, что у упакованной и свернутой версии, которую я скачал с сайта проекта, есть проблема, потому что теперь я использую распакованную версию, и она отлично работает.

Загрузите распакованную версию (или просто скопируйте код, как я вставил в OP выше), и вы должны быть готовы. Тогда упакуйте его сами, если хотите ;-) http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.js

StackOverflow пород!

0 голосов
/ 19 октября 2010

У меня такая же проблема. В FF, используя jquery 1.4.2, плагин wkicks не работает. Я меняю строку 28

Старая линия

var kwicks = container.children('li');

Заменить на

var kwicks = container.find('li');

И тогда плагин отлично работает в IE и FF, используя версию jquery 1.4.2

...