Question

我有多个元素打开带有ajax数据的colorbox（通过ajax分页后的ajax链接），如果存在任何滚动条，还会渲染jScrollPane。

$( '.showcolorBox' ).live('click',function(e){
e.preventDefault();
$(this).colorbox({open:true,
    opacity:0.98,
    maxHeight: '95%',
    onComplete: function() {
    $('#cboxContent').jScrollPane({
        showArrows: false
    });
    },
    onClosed: function() {
    var ele = $('#cboxContent').jScrollPane({showArrows: false});
    var api = ele.data('jsp');
    api.destroy();
    }
});
});

这是按预期工作的，除了它只能在第一次调用时工作，每次调用后第一次调用打开颜色框模态但没有数据...完全空白！

问题出现在jScrollPane的.destroy调用之后，重新初始化似乎无法正常工作。我在firebug中没有错误，并且花了一天时间试图解决问题并搜索网络，没有解决方案，一个不断弹出的东西是重新初始化后滚动元素的宽度和高度，但我还没弄明白任何东西。

任何帮助？

修改

我现在正在处理我自己的ajax请求并将内容放在colorbox内联元素中，我遇到的问题是在colorbox.resize之后没有添加滚动条？

$( '.show_btn' ).live('click',function(e){
e.preventDefault();
$.colorbox({
    opacity:0.90,
    maxHeight: '95%',
    fixed:true,
    transition:"fade",
    overlayClose:false,
    returnFocus: true,
    inline:true, 
    href:"#bytePad",
    width: "655px",
    height: "0px",
    onLoad: function() {
      $('#cboxSpinner').show();
      $('#cboxSpinner').ajaxComplete(function(event,request, settings) {
        $(this).hide();
        $(this).colorbox.resize("#bytepad");
      });
    }
});
});

Answer 1

每次单击时，都不应将colorbox分配给$（this）。第一次点击后，每次点击它都会打开，分配颜色框，然后再次自动打开。试试这个：

$( '.showcolorBox' ).live('click',function(e){
e.preventDefault();
$.colorbox({
    href:this.href,
    opacity:0.98,
    maxHeight: '95%',
    onComplete: function() {
    $('#cboxContent').jScrollPane({
        showArrows: false
    });
    },
    onClosed: function() {
    var ele = $('#cboxContent').jScrollPane({showArrows: false});
    var api = ele.data('jsp');
    api.destroy();
    }
});
});

之前我没有使用过jScrollPane，但您可以将jScrollPane分配给#cboxLoadedContent，每次将新内容加载到colorbox时都会将其销毁。然后你可以在onClosed回调中删除你为它做的清理工作。

Colorbox ajax数据 - jScrollPane初始化第一次正确但在.destroy重新初始化后无效，空彩盒

1 个答案: