Colorbox和jQuery ajax請求的多個實例

Question

我有一個使用colorbox和各種ajax請求的應用程序。有時候，我會在colorbox中發出一個ajax請求，這個請求會調用另一個在colorbox之外加載的ajax請求......我覺得這很麻煩，這裏是我的代碼，有沒有更好的方法來做到這一點？沒有重新初始化colorbox這麼多次？

jQuery.fn.initFunctions = function() { 



     $(".overlay_box").colorbox({ 
      opacity: 0.40, 
      transition: 'none', 
      speed: 200, 
      height: 480, 
      width: 700, 
      scrolling: true, 
      title: ' ', 
      overlayClose: true, 
      onComplete: function() { 
       $(this).initFunctions(); 
      } 
     }); 

     $(".overlay_box_inline").colorbox({ 
      opacity: 0.40, 
      transition: 'none', 
      speed: 200, 
      height: 480, 
      width: 700, 
      scrolling: true, 
      inline: true, 
      title: ' ', 
      overlayClose: true, 
      onComplete: function() { 
       $(this).initFunctions(); 

      } 
     });  

     $(".overlay_box_inline_resize").colorbox({ 
      opacity: 0.40, 
      transition: 'none', 
      speed: 200, 
      scrolling: true, 
      inline: true, 
      title: ' ', 
      overlayClose: true, 
      onComplete: function() { 
       $(this).initFunctions(); 
       $.colorbox.resize(); 

      } 
     }); 



     $('.remove').click(function(){ 
       var id = $(this).attr('id'); 
       $.ajax({ 
         url: $(this).attr('href'), 
         success: function(data){ 
          $.ajax({ 
            url: "/checkout/ten/"+id, 
            success: function(data){ 
            $('#ten').html(data); 
            $(this).initFunctions(); 
            } 
          }); 
         } 
       }); 
       return false; 
     }); 
     $('.friends .add').bind('click', function(){ 
       var id = $(this).attr('id'); 
       $.ajax({ 
         url: $(this).attr('href'), 
         success: function(data){ 

          $.colorbox({ 
           href: "/checkout/"+id, 
           opacity: 0.40, 
           transition: 'none', 
           speed: 200, 
           height: 480, 
           width: 700, 
           scrolling: true, 
           title: ' ', 
           overlayClose: true, 
           onComplete: function() { 
            $.ajax({ 
              url: "/checkout/invite/"+id, 
              success: function(data){ 
              $('#ten_friends').html(data); 
              $(this).initFunctions(); 
              } 
            }); 
           } 
          }); 
         } 
       }); 



     });  



    }; 

    $(this).initFunctions(); 

Answer 1

一個第一步驟可以是重複使用一個共同的選擇對象是這樣的：

var defaults = { 
    opacity: 0.4, 
    speed: 200, 
    overlayClose: true 
}; 

$(".overlay_box_inline").colorbox($.extend(defaults, { 
    height: 480, 
    width: 700 
})); 

// ... more colorboxes 

Answer 2

如果設置是一樣的，每次，像這樣做：

jQuery.fn.initFunctions = function() { 

    $(".overlay_box, .overlay_box_inline").colorbox({ 
     opacity: 0.40, 
     transition: 'none', 
     speed: 200, 
     height: 480, 
     width: 700, 
     scrolling: true, 
     title: ' ', 
     overlayClose: true, 
     onComplete: function() { 
      // $(this).initFunctions(); // if you want to reinit another colorbox, you should pass the element as an argument to initFunctions rather than calling this as a blanket initializer for all colorboxes. 
     } 
    }); 
} 

Answer 3

彩盒的設置對象是可公開訪問的，所以可以隨意更改默認值（不僅僅是特定的實例值）。例如：

$.colorbox.settings.opacity = 0.4; 
$.colorbox.settings.speed = 200; 

或延長像Betamos對象建議：

$.extend($.colorbox.settings, {opacity:0.4, speed:200}); 

此外，您還可以通過重新分配顏色框它更新一個元素上的設置。例如：

$(".overlay_box, .overlay_box_inline").colorbox({ 
      opacity: 0.40, 
      transition: 'none', 
      speed: 200, 
      height: 480, 
      width: 700, 
      scrolling: true, 
      title: ' ', 
      overlayClose: true, 
      onComplete: function() { 
       $(this).initFunctions(); 
      } 
     }); 

$(".overlay_box_inline").colorbox({inline:true}); 

Answer 4

好了，問題是，當你的東西AJAX它是不是在DOM，當你要求什麼都選擇了顏色框方法。試試這個：

$("body").delegate(".overlay_box, .overlay_box_inline", "click", function (event) { 
        event.preventDefault(); 
        $.colorbox({href: $(this).attr("href"), 
          opacity: 0.40, 
          transition: 'none', 
          speed: 200, 
          height: 480, 
          width: 700, 
          scrolling: true, 
          title: 'TheTitle', 
          overlayClose: true}); 
      }); 

由於$('selector').delegate();手錶的一些'selector'的DOM，所以即使新元件通過AJAX調用或任何其他方法添加到DOM，這將知道他們已經被添加並綁定點擊事件給他們。

也不是初始化colorbox並等待，而是等待點擊，初始化盒子，然後立即完成工作。這對你的加載時間也有幫助，如果這對你很重要。