优化colorbox并添加额外的jquery

optimizing colorbox and adding extra jquery

本文关键字：jquery 添加 colorbox 优化      更新时间：2023-09-26

我有两个问题

  1. 我正在尝试打开一个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();
            }
        });
    });
});

    我想知道是否有另一种方法。我不介意颜色框弹出，然后需要时间加载内容。以上版本可以在这个网址找到(http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&amp-Winebar/产品）。

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

试试这个：

$(".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，你能试试这个吗？

$(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 */
                }

});
}});
相关文章：