Jquery load（）和colorbox（）在一起

我想使用jQuery加載函數加載頁面的一部分，並使用colorbox顯示它。我目前正在使用Jquery load（）和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); 
}); 
});

這不起作用，因爲我們需要有一個用於加載函數的選擇器。有沒有辦法解決我的問題使用負載？如果沒有，還有其他解決方案嗎？

來源

2012-01-20 user899893

您是否試過[.get（）]（http://api.jquery.com/jQuery.get/）取代.load（） –

.get（）函數不會過濾頁面的一部分。由於我不需要整個頁面。 – user899893

那麼，你可以很容易地自己過濾它... .load（）方法之後加載所有的頁面過濾器。 –

我認爲你所關注的是.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-20 21:33:26

我將高度設置爲false，允許框成爲正確的高度，但我發現它在內部內容加載之前過早設置高度。有什麼建議麼？ –

您可以在ajax信息返回之前或之後開始打開colorbox。以前可能更有意義的用戶，後更容易適應你的代碼：

$(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完成時，它會觸發一個colorbox並用無家可歸的div的內容填充它。雄辯？沒有。但它是您已經在做的最接近的解決方案。

來源

2012-01-20 21:28:19 Sinetheta

它看起來像，從你的問題，您嘗試到外部網頁的一部分加載到一個顏色框。我不認爲這是可能的$ .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中分離出來。

這意味着您可以通過使用像這樣的網址在你的標籤保持平穩退化：

/test.html#div

由於JS將#div之前自動添加一個空格所要求的$ .load（）。

來源

2013-06-04 12:01:16

Jquery load（）和colorbox（）在一起

回答

相關問題