Question

通常要使colorbox调整其大小以适应我使用此代码段的内容：

var group = peopleList
  .GroupBy(x => new {
     Name = x.Item1,
     No   = x.Item2
   })
  .Select(chunk => new {
     Name = chunk.Key.Name,
     No   = chunk.Key.No,
     Sum  = chunk.Sum(item => item.Item3) 
   })

但是这次，在成功响应之后，当我在ajax函数中尝试相同的操作时，它不起作用：

          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });

结果是颜色框打开时尺寸过小，并且无法调整大小以适合内容。我在做什么错了？

Answer 1

我创建了一个自定义函数，用于在加载内容之后，调整浏览器窗口的大小或在移动设备上更改方向后也可以有效地更改浏览器窗口宽度的颜色框的大小。

现代网页设计必须处理广泛变化的浏览器宽度，尤其是在手机和平板电脑上的用户如此之多的情况下，因此，您正在加载的内容应具有响应性，从大约320像素宽度开始。然后，出于美观原因，让颜色框的大小由浏览器的可用宽度以及最大合理的大小决定。

这出现在每个页面底部的javascript文件中：

/* Colorbox resize function */
var resizeTimer;
var resizeColorBox = function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($("#cboxOverlay").is(":visible")) {
            $.colorbox.resize({maxWidth:"400px",width:"95%"});
        }
    }, 300);
};

// Resize Colorbox when resizing window or changing mobile device orientation
$(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

然后，colorbox函数本身具有一些需要正确设置的参数。请注意，我将closebutton设置为false，因为我的HTML内容包括一个关闭按钮，该按钮调用了colorbox close函数。

$.colorbox({
    width:"95%",
    maxWidth:400,
    maxHeight:"95%",
    speed:300,
    closeButton:false,
    onComplete : function() {
        $(this).colorbox.resize({width:"95%",maxWidth:400});
        $(window).trigger("resize");
    },
    html:'Your HTML Here'
});

因此，您的代码只需要在加载AJAX内容后调用resizeColorBox（）函数，就可以了。另外，它还可以处理其他调整大小的情况。

[编辑]如果您确实需要调整内部内容的宽度，那么resize函数应首先获取内部内容的容器div的宽度，然后再调整为该宽度（可能加上颜色框填充的宽度）等）。在这种情况下，调整大小功能将更像：

var resizeColorBox = function() {
    var w = $('content_container').width() + padding_w;
    var h = $('content-container').height() + padding_h;

    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($("#cboxOverlay").is(":visible")) {
            $.colorbox.resize({width:w, height:h});
        }
    }, 300);
};

Ajax成功响应后如何调整颜色框的大小

1 个答案: