3

jCarousel プラグイン (sorgalla から) について質問があります。アイテムを正しい方法で削除するにはどうすればよいですか?

ここで私がどこまで行ったかがわかります。いくつかのアイテムを削除してから右にスクロールしてみてください。最終的には「空のスクロール」が表示されます。これを取り除こうとしています。

remove(); を使用してみました。css を表示するように変更する代わりに jQuery 関数を使用します。しかし、それはアイテムがあった場所に奇妙な白い空白スペースを生成します. 400 行目の jquery.jcarousel.js を見ると、remove 関数が表示されますが、その使用方法がわかりません。

どんな助けでも大歓迎です。ありがとう！

4

5 に答える 5

8

プラグインの範囲外に足を踏み入れているので、jCarouselがそれ自体を更新することを知らないことを除いて、あなたは例が理にかなっています。ドキュメントから、あなたが言及したremove（）メソッドが機能するようです。ただし、私の試行では、jCarouselオブジェクトに実際に「正しいことを実行」させ、ボタンを更新したり、スクロールしたりすることはできませんでした。

そのため、jCarouselクラスにそれを正確に実行する追加のメソッドを作成しました。removeAndAnimate（1）を呼び出して、カルーセルの最初のアイテムを削除し、すべてを再構築して、[次へ]/[前へ]ボタンを有効/無効にします。

また、jCarouselが提供するremove（）関数は、現在表示されているアイテムを削除できないようにします。これはまさに私たちが望んでいたことです（たとえば、ユーザーがカルーセルをクリックして画像を削除できるようにします）。 。

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インスタンス自体にアクセスするには：

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

それはうまくいくはずです！

于 2010-05-19T20:05:22.587 に答える
1 
$.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);
于 2011-04-20T11:04:35.040 に答える
1

どれもうまくいかなかったので、両方の答えを組み合わせました..

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();
        }

それはうまくいきます..

削除されたばかりのアイテムの位置にスクロールして戻るなど、さらに改善を加えることができます。

于 2011-01-17T13:14:17.147 に答える
0

ホワイトボックスの問題がどこから来るのかを見つけました。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;
}
于 2010-07-19T20:31:21.547 に答える
0

私の他の解決策は、ロードしたコンテンツにクラスを追加し、DOM にこのクラスを持たないすべてのアイテムを削除することでした。によって「削除」されるcarousel.reset()と、これらの要素は追加されたクラスを体系的に失います。

その後、次の方法で白いボックスを削除できます。

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

関数の直後に追加しcarousel.add()ます。

それはうまく機能し、カルーセルに機能を追加する必要さえありません.

これは「簡単に実行できる」ソリューションであり、前へ/次へのボタンをクリックすると、白いボックスが表示される場合があります。それを削除するには、コールバックbuttonNextCallback/に同じソリューションを適用しますbuttonPrevCallback。

于 2011-07-20T15:15:40.720 に答える