优化颜色框并添加额外的 jquery答案

【问题标题】：optimizing colorbox and adding extra jquery优化颜色框并添加额外的 jquery
【发布时间】：2012-01-24 11:54:05
【问题描述】：

我有两个问题

我正在尝试打开一个 jQuery 颜色框，它非常慢。原因是我试图从不同的页面获取 html 内容（我不能使用 iframe，因为我只需要这个页面的一部分）。以下代码有效，但单击按钮后需要一些时间：

$(document).ready(function() {
    $(".cart-link a").click(function(event) {
        $(this).colorbox.close();
    });


    $(".rest-menuitem a").click(function(event) {
        event.preventDefault();
        var result = null;
        var sURL = $(this).attr("href");
        $.colorbox({
            html: function() {
                $.ajax({
                    url: sURL,
                    type: 'get',
                    dataType: 'html',
                    async: false,
                    success: function(data) {
                        result = data;
                    }
                });
                return $(result).find('.product');
            },
            width: '650px',
            height: '10px',
            onComplete: function() {
                $(this).colorbox.resize();
            }
        });

    });

});

我想知道是否有其他方法可以做到这一点。我不介意颜色框是否弹出然后需要时间来加载内容。上面的版本可以在这个 url (http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products) 找到。

当用户单击添加到购物车时，我还尝试关闭颜色框。但由于某种原因它没有被触发。当我点击添加到购物车时，$(".cart-link a").click 不会被触发。有没有一种特殊的方法可以将 jquery 添加到颜色框内容？

【问题讨论】：

标签： javascript jquery jquery-plugins colorbox

【解决方案1】：

试试这个：

$(".rest-menuitem a").colorbox({
    href: function(){ 
        return $(this).attr('href') + ' .products';
    },
    width: '650px',
    height: '10px',
    onComplete: function() {
        $(this).colorbox.resize();
    }
});

ColorBox 使用 jQuery 的 load() 方法进行 ajax 处理，因此您只需将所需的选择器添加到链接的 href。

【讨论】：

也为我工作。谢谢！

【解决方案2】：

对于你的问题 2，你可以试试这个吗？

$(document).ready(function() {
    $(".cart-link a").live('click',function(event) {
        $(this).colorbox.close();
    });
});

对于您的问题 1.. 它会很慢，因为您是从不同的页面获取它。为此使用不同的逻辑

For your question no 1



 $('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
        $.ajax({
            url :'Your url',
            data : {}, //data to send if any
            type : "POST" //or get
            success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
                     $('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
                }


});
}});

【讨论】：

有没有办法打开颜色框然后获取？