2011-08-19 160 views
0

我想加入花哨的關閉按鈕動態HTML元素jQuery的添加動態的元素

代碼關閉按鈕是:

function add_close_box(element,img_close_box,base_url_close_box){ 

    var i; 
    $.each($('.'+element),function(i){ 

    $(this).addClass('close_box'+i); 
    var x = $('.close_box'+i).offset().left; 
    var y = $('.close_box'+i).offset().top; 

    $('body').append('<a href="javascript:void(0)" class="img_close_box_'+i+'"><img src="'+base_url_close_box+img_close_box+'"></a>'); 
    $('.img_close_box_'+i).css({'position':'absolute','top':y-10,'left':x+$('.close_box'+i).width()-20}); 
    $('.img_close_box_'+i).live('click',function(){ 

    var hei = $('.'+element).height(); 
    $('.img_close_box_'+i+','+'.close_box'+i).hide(); 
    $.each('.'+element,function(e){ 
     $('.img_close_box_'+(e)).animate({ 
      'top':'-='+hei 
     },0); 
    }); 



    }); 
    }); 


} 

它的作品不錯,但在點擊按鈕元素是淡出()其他關閉按鈕不遵循他們自己的相關元素絕對位置的原因他們保持在相同的位置,而元素向上滾動(第一個元素fadeOut下一個元素向上滾動和關閉按鈕保持在同一位置)

我想關閉按鈕可以遵循其相關要素。

也導致我懶惰的頭腦我想知道是否有人知道一些很好的jQuery插件來做我想要的代碼,還有ajax回調後的closebox按鈕點擊(請不要回復觀看jQuery UI: ))

謝謝;)

+0

您的「關閉」框有「位置:相對」設置? –

+0

你的意思是關閉元素的元素或按鈕? – sbaaaang

+0

無論如何,我只是推出位置:絕對關閉按鈕,因爲你可以看到 – sbaaaang

回答

0

我必須做出一些假設,因爲你還沒有發佈你的標記。我認爲Diodeus是正確的。您正在爲新的關閉按鈕使用絕對定位。絕對定位將在DOM中查找,直到找到相對定位的元素來定位座標。如果您通過的element沒有屬性position:relative,那麼該按鈕可以放置在任何地方。

兩個可能的解決方法:

相對定位添加到一切你添加關閉按鈕:

element.css({'position':'relative'}); 

顯然,這將取代任何其他預先設定的定位。如果您在整個地方添加關閉按鈕,就有可能炸燬您的佈局。

第二個選項是確保只有相對定位的元素在DOM中很高,因此所有關閉按鈕都基於相同的事物定位。這是一個小黑客,但然後你可以根據元素的x和y來定位它們:

var x = element.position().x; 
var y = element.position().y;  
// you can add the necessary offsets like element width or height 
+0

看完你的問題後一點點更仔細,我很確定你想要第一個選項。你必須確保你的佈局可以支持它。 – RSG