Удаление элемента из плагина jCarousel - PullRequest
Новая
       41

Удаление элемента из плагина jCarousel

3 голосов
/ 15 апреля 2010

У меня есть вопрос, касающийся плагина jCarousel (от sorgalla). Как правильно извлечь из него предметы?

Вы можете видеть, как далеко я зашел здесь . Попробуйте удалить несколько элементов и затем прокрутить вправо, в конечном итоге вы увидите «emtpy scroll», и это то, от чего я пытаюсь избавиться.

Я пытался использовать remove (); Функция jQuery вместо изменения CSS для отображения: нет; но это создает странное белое пустое пространство, где раньше был элемент. Если вы посмотрите на файл jquery.jcarousel.js в строке 400, вы увидите функцию удаления, но я не уверен, как ее использовать.

Любая помощь очень ценится. Спасибо!

Ответы [ 5 ]

8 голосов
/ 20 мая 2010

Ваш пример имеет смысл, за исключением того, что вы выходите за пределы плагина, jCarousel не знает, как себя обновить. Из документов кажется, что метод remove (), который вы упомянули, будет работать. Тем не менее, в моих испытаниях я никогда не мог заставить объект jCarousel действительно «делать правильные вещи» и обновлять его кнопки, прокручивать и т. Д.

Из-за всего этого я написал дополнительный метод для класса jCarousel, который делает именно это. Вы вызываете removeAndAnimate (1), чтобы удалить первый элемент в карусели и перестроить все, чтобы кнопки «следующий / предыдущий» были включены / отключены, и все работает.

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

Реализация для removeAndAnimate (i): 

removeAndAnimate: function(i) {

        var e = this.get(i);

        var d = this.dimension(e);

        if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px');

        e.remove();
        this.options.size--;

        var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null;
        var li = this.list.children('li');
        var self = this;

        if (li.size() > 0) {
            var wh = 0, i = this.options.offset;
            li.each(function() {
                self.format(this, i++);
                wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + 'px');            
        }

        this.scroll(0,true);
        this.buttons();

    }

Я рекомендую размещать это сразу после реализации remove (). Чтобы получить доступ к самому экземпляру jCarousel с помощью jQuery, вне функций обратного вызова: 

var carousel = $("#mycarousel").data("jcarousel");
carousel.removeAndAnimate(1);

Это должно сработать!

1 голос
/ 20 апреля 2011 
$.jcarousel.fn.extend({
    removeAndAnimate: function(index) {

        var itemsHTML = new Array();
        var counter = 0;

        // Me guardo los que quedan
        for(i = 0; i < this.size(); i++)
        {
            if(i != (index - 1))
                itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html();
        }

        // Configuro uno menos y borro todo
        this.size(this.options.size -1);
        this.reset();


        // Vuelvo a cargarlos
        counter = 0;
        for(i = 0; i < itemsHTML.length; i++)
        {
            this.add(counter++, itemsHTML[i]);
        }

        this.reload();
    }
});

ИСПОЛЬЗОВАНИЕ 

var carousel = jQuery('#mycarousel').data('jcarousel');
carousel.removeAndAnimate(1);
1 голос
/ 17 января 2011

Я объединил оба ваших ответа, потому что ни один из них не сработал для меня ..

Я добавил его в свою пользовательскую функцию init 

carousel.removeAndAnimate = function(i) {
            var counter = 1;    
            var itemsHTML = new Array();
            var e = this.get(i);
            children = e.parent().find("li");
            $(e).remove()
            $.each(children,function(){
                if(counter != i) {
                    itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
                }
                counter++;
            });
            this.size(this.options.size -1);
            this.reset();
            counter = 1;
            carousel = this;
            $.each(itemsHTML, function(k, v){
                if(v != null) {
                    carousel.add(counter, v[0].innerHTML);
                    counter++;
                }
            });
            this.reload();
        }

Хорошо работает ..

Вы можете добавить больше улучшений, таких как прокрутка назад к элементу, который был только что удален.

0 голосов
/ 20 июля 2011

Мое другое решение состояло в том, чтобы добавить класс к моему загруженному контенту и удалить все элементы, у которых нет этого класса в DOM. После «удаления» carousel.reset() эти элементы систематически теряют добавленный класс.

Затем вы сможете удалить белые поля с помощью: 

$("li:not(.the_class)").remove();

Добавьте его сразу после функции carousel.add().

Это работает хорошо, и вам даже не нужно добавлять какие-либо функции в вашу карусель.

Это простое решение, и при нажатии на кнопки «предыдущий / следующий» может появиться белое поле. Чтобы удалить его, примените то же решение к обратному вызову buttonNextCallback / buttonPrevCallback.

0 голосов
/ 20 июля 2010

Я нашел, откуда возникла проблема с белыми ящиками. Метод JCarousel format () не заменяет имена классов, а просто добавляет новые. Я переписал эту функцию, и она хорошо работает для меня: 

format: function(e, i) {
        // remove all class names matches 'jcarousel-item' at the start
        $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, '');
        // add new class names  
        var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({
            'float': 'left',
            'list-style': 'none'
        });
        $e.attr('jcarouselindex', i);
        return $e;
}
...