1

我正在尝试使用 jQuery 加载函数加载页面的一部分并使用颜色框显示它。我目前正在使用

       $(document).ready(function()
       {
          $(".rest-menuitem a").click(function(event) 
          {
                event.preventDefault();
                var elementURL = $(this).attr("href");
                $.colorbox({ html: $.load(elementURL+ " .product" ) , width:'1000px',height:'80%', href: finalURL);
});
});

这不起作用，因为我们需要一个用于加载功能的选择器。有没有办法使用负载解决我的问题？如果没有，是否有替代解决方案？

4

3 回答 3

4

我认为您所关注的是.get()方法。它从指定的 url 加载数据并在数据可用时执行回调。然后，您可以自己过滤收到的 html 并使用您的 colorbox 插件。

像这样的东西：

$(document).ready(function() {
    $(".rest-menuitem a").click(function(event) {
        event.preventDefault();
        $.get($(this).attr("href"), function(data) {
            $.colorbox({
                html: $(data).find('.product'),
                width: '1000px',
                height: '80%',
                href: finalURL);
            });
        });;
    });
});
于 2012-01-20T21:33:26.563 回答
1

您可以在 ajax 信息返回之前或之后开始打开颜色框。之前可能对用户更有意义，之后更容易调整您的代码：

$(document).ready(function()
{
    $(".rest-menuitem a").click(function(event) 
    {
        var elementURL = $(this).attr("href");
        var $html = $('<div />');
        $.when( $html.load(elementURL+ " .product" ) ).done(function(){
            $.colorbox({ html: $html.html() , width:'1000px',height:'80%', href: finalURL);
        });
        event.preventDefault();
    });
});

当您单击时，这会将您的内容 ajax 到未附加到 DOM 的 div 中。当该 ajax 完成时，它将触发一个颜色框并用无家可归的 div 的内容填充它。雄辩？不。但这是与您已经在做的最接近的解决方案。

于 2012-01-20T21:28:19.087 回答
0

从您的问题来看，您正在尝试将外部页面的一部分加载到颜色框中。我认为 $.get() 不可能做到这一点。

我必须为客户做这件事，这是我想出的解决方案：

$('.popup-link').click(function(e) {
    e.preventDefault();

    var url = $(this).attr('href').replace('#', ' #');

    $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="ajax-load-element" style="padding: 20px;"></div></div>');

    $('#ajax-load-element').load(url, function() {
        $.colorbox({
            href: '#ajax-load-element',
            width: 600,
            height: 400,
            inline: true,
            opacity: .7
        });
    }); 
});

这将根据 $.load() 函数的要求自动分隔 URL 中的元素。

这意味着您可以通过在标签中使用这样的 URL 来保持优雅的降级：

/test.html#div

由于 JS 会根据 $.load() 的要求在#div 之前自动添加一个空格。

于 2013-06-04T12:01:16.757 回答