Question

我有一个使用colorbox和各种ajax请求的应用。有时候，我会在colorbox中发出一个ajax请求，它会调用另一个在colorbox外部加载的ajax请求......我觉得这真的很乱，这是我的代码，有没有更好的方法来做这个？没有重新初始化彩盒这么多次？

   jQuery.fn.initFunctions = function() {



        $(".overlay_box").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            title: '&nbsp;',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
            }
        });

        $(".overlay_box_inline").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            inline: true,
            title: '&nbsp;',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();

            }
        });     

        $(".overlay_box_inline_resize").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            scrolling: true,
            inline: true,
            title: '&nbsp;',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
                $.colorbox.resize();

            }
        });



        $('.remove').click(function(){
                var id = $(this).attr('id');
                $.ajax({
                      url: $(this).attr('href'),
                      success: function(data){
                            $.ajax({
                                  url: "/checkout/ten/"+id,
                                  success: function(data){
                                    $('#ten').html(data);
                                    $(this).initFunctions();
                                  }
                            });
                      }
                });
                return false;
        });
        $('.friends .add').bind('click', function(){
                var id = $(this).attr('id');
                $.ajax({
                      url: $(this).attr('href'),
                      success: function(data){

                            $.colorbox({
                                href: "/checkout/"+id,
                                opacity: 0.40,
                                transition: 'none',
                                speed: 200,
                                height: 480,
                                width: 700,
                                scrolling: true,
                                title: '&nbsp;',
                                overlayClose: true,
                                onComplete: function () {
                                    $.ajax({
                                          url: "/checkout/invite/"+id,
                                          success: function(data){
                                            $('#ten_friends').html(data);
                                            $(this).initFunctions();
                                          }
                                    });
                                }
                            });
                      }
                });



        });     



   };

   $(this).initFunctions();

Answer 1

第一步可能是重复使用这样的公共选项对象：

var defaults = {
  opacity: 0.4,
  speed: 200,
  overlayClose: true
};

$(".overlay_box_inline").colorbox($.extend(defaults, {
  height: 480,
  width: 700
}));

// ... more colorboxes

Answer 2

ColorBox的设置对象可公开访问，因此可以随意更改默认值（而不仅仅是特定的实例值）。例如：

$.colorbox.settings.opacity = 0.4;
$.colorbox.settings.speed = 200;

或像Betamos建议的那样扩展对象：

$.extend($.colorbox.settings, {opacity:0.4, speed:200});

此外，您可以通过为其重新分配颜色框来更新元素的设置。例如：

$(".overlay_box, .overlay_box_inline").colorbox({
            opacity: 0.40,
            transition: 'none',
            speed: 200,
            height: 480,
            width: 700,
            scrolling: true,
            title: '&nbsp;',
            overlayClose: true,
            onComplete: function () {
                $(this).initFunctions();
            }
        });

$(".overlay_box_inline").colorbox({inline:true});

Answer 3

如果每次设置相同，请按以下步骤操作：

jQuery.fn.initFunctions = function() {

    $(".overlay_box, .overlay_box_inline").colorbox({
        opacity: 0.40,
        transition: 'none',
        speed: 200,
        height: 480,
        width: 700,
        scrolling: true,
        title: '&nbsp;',
        overlayClose: true,
        onComplete: function () {
            // $(this).initFunctions(); // if you want to reinit another colorbox, you should pass the element as an argument to initFunctions rather than calling this as a blanket initializer for all colorboxes.
        }
    });  
}

Answer 4

好的，问题是当你在任何选择器上调用colorbox方法的AJAX时，它不在DOM中。试试这个：

$("body").delegate(".overlay_box, .overlay_box_inline", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                           opacity: 0.40,
                           transition: 'none',
                           speed: 200,
                           height: 480,
                           width: 700,
                           scrolling: true,
                           title: 'TheTitle',
                           overlayClose: true});
             });

由于$('selector').delegate();监视某些'selector'的DOM，所以即使通过AJAX调用或任何其他方法将新元素添加到DOM，也会知道它们已被添加并绑定点击事件给他们。

此外，它不是初始化颜色框并等待，而是等待点击，初始化框，然后立即完成工作。如果这对你来说很重要，那么这对你的加载时间也有帮助。

Colorbox和jQuery ajax请求的多个实例

4 个答案: