从jCarousel插件中删除项目 [英] Removing an item from jCarousel plug-in

问题描述

我对jCarousel插件(来自sorgalla)有疑问.如何以正确的方式从中删除项目?

I have a question regarding the jCarousel plug-in (from sorgalla). How do I remove items from it the right way?

您可以在此处看到我走了多远. 尝试删除一些项目，然后向右滚动，最终您会看到空滚动"，而这就是我想要摆脱的.

You can see how far I've gone here. Try deleting a few items and then scrolling to the right, you'll see an "emtpy scroll" eventually, and that's what I'm trying to get rid of.

我尝试使用remove(); jQuery函数，而不是更改css的显示方式:none;但这会产生一个奇怪的白色空白，以前是该项目所在的地方. 如果您查看第400行的jquery.jcarousel.js，将会看到一个删除功能，但是我不确定如何使用它.

I've tried using the remove(); jQuery function instead of changing the css to display: none; but that produces a weird white blank space where the item used to be. If you look at the jquery.jcarousel.js on line 400 you'll see a remove function, but I'm not sure on how to use it.

我们非常感谢您的帮助.谢谢！

Any help is much appreciated. Thanks!

推荐答案

您的例子很有意义，除了因为您超出了插件的范围，jCarousel不知道自己进行更新.从文档中看来，您提到的remove()方法似乎可以工作.但是，根据我的试验，我永远无法让jCarousel对象真正做正确的事"并更新其按钮，四处滚动等.

You're example makes sense, except since you're stepping outside the bounds of the plugin, jCarousel doesn't know to update itself. From the docs, it seems like the remove() method you mentioned would work. However, it my trials I never could get the jCarousel object to actually "do the right thing" and update it's buttons, scroll around, etc.

由于所有这些，我在jCarousel类上写了一个额外的方法来实现此目的.您调用removeAndAnimate(1)删除轮播中的第一项，然后重新构建所有内容，以便启用/禁用下一步/上一步按钮.

Because of all that, I wrote an additional method on the jCarousel class that does exactly that. You call removeAndAnimate(1) to remove the first item in the carousel and rebuild everything so that next/prev buttons are enabled/disabled, the works.

同样值得注意的是，jCarousel提供的remove()函数可防止您删除当前正在显示的项目，而这正是我们想要做的(允许用户通过单击从轮播中删除图片，例如).

Also worth noting, the remove() function jCarousel provides prevents you from removing an item that is currently being shown, which is exactly what we wanted to do (allow the user to remove an image from the carousel by clicking on it, for example).

removeAndAnimate(i)的实现:

The implementation for 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()实现之后.要使用jQuery在回调函数之外访问jCarousel实例本身，

I recommend placing this directly after the remove() implementation. To access the jCarousel instance itself with jQuery, outside of the callback functions:

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

应该可以！

这篇关于从jCarousel插件中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！