Jquery load () и colorbox () вместе - PullRequest
Новая
       9

Jquery load () и colorbox () вместе

1 голос
/ 21 января 2012

Я пытаюсь загрузить часть страницы с помощью функции загрузки jQuery и отобразить ее с помощью colorbox.В настоящее время я использую 

       $(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);
});
});

Это не работает, потому что нам нужен селектор для функции загрузкиЕсть ли способ решить мою проблему с помощью нагрузки?Если нет, есть ли альтернативное решение?

Ответы [ 3 ]

4 голосов
/ 21 января 2012

Я думаю, что вы присматриваете за методом .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);
            });
        });;
    });
});
1 голос
/ 21 января 2012

Вы можете начать открывать colorbox до или после возвращения информации 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();
    });
});

Когда вы нажмете, это переведет ваш контент в div, который не привязан к DOM.Когда этот ajax завершится, он запустит ящик с цветом и заполнит его содержимым бездомного div.Красноречивый?нет.Но это самое близкое решение к тому, что вы уже делаете.

0 голосов
/ 04 июня 2013

По вашему вопросу похоже, что вы пытаетесь загрузить часть внешней страницы в палитру цветов. Я не думал, что это возможно с $ .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
        });
    }); 
});

Это автоматически отделит элемент в URL, как того требует функция $ .load ().

Это означает, что вы можете поддерживать постепенную деградацию, используя такие URL-адреса в своих тегах: 

/test.html#div

Поскольку JS автоматически добавляет пробел перед #div, как того требует $ .load ().

...