zeroClipboard複雜的CSS問題

我有圖像的列表，並在其上的鼠標在它下面的選項框顯示，其中嵌入代碼輸入框複製。現在我在它上面實現了zeroclipboard，爲了使複製功能在點擊時工作，所以當我將鼠標移到圖像上時，它正確地顯示了選項框，但是當我用鼠標單擊輸入框來複制代碼時，關閉了，認爲它不在選項div中，因爲zeroclipboard在它上面有div，所以鼠標在它上面並關閉。zeroClipboard複雜的CSS問題

所以解決的辦法是在選項div內創建div，一直在照顧，但現在zeroclipboard div樣式顯示錯誤，我不知道如何解決它。

以下是zeroclipboar的風格，我不知道在它上面設置了什麼風格，所以它在輸入框上方，所以我可以點擊它，所以它可以像它通常那樣工作。

on line 107 in zeroclipboard.js 
var style = this.div.style; 
    style.position = 'absolute'; 
    style.left = '' + box.left + 'px'; 
    style.top = '' + box.top + 'px'; 
    style.width = '' + box.width + 'px'; 
    style.height = '' + box.height + 'px'; 
    style.zIndex = zIndex;

來源

2009-10-22 Basit

'zeroclipboard格樣式顯示錯誤，我不知道如何解決it.' - 這是一個視覺問題。通常有助於鏈接到演示，以便我們可以直觀地看到問題。 – 2009-10-22 01:24:00

確定添加鏈接，所以你可以查看:) – Basit 2009-10-22 01:40:41

$("input[name='htmlcode'], input[name='directlink'], input[name='emaillink'], input[name='imgcode']").live('mouseover', function() { 

     clip = new ZeroClipboard.Client(); 
     clip.setHandCursor(true); 
     clip.setText($(this).val()); 

     var width = $(this).width(); 
     var height = $(this).height()+10; 
     var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>'; 
     // make your own div with your own css property and not use clip.glue() 
     flash_movie = $(flash_movie).css({ 
      position: 'relative', 
      marginBottom: -height, 
      width: width, 
      height: height, 
      zIndex: 101 
      }) 
     .click(function() { // this puts copied indicator for showing its been copied! 
      $(this).next('input').indicator({className: 'copied', wrapTag: 'div', text: 'Copied!', fadeOut: 'slow', display: 'after'}); 
     }); 

     $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop 
    });

來源

2009-10-22 05:08:07 Basit

順便說一句，這是正確的答案:) – Basit 2009-10-22 05:10:19

我不知道你的代碼是什麼樣子，但是當你使用顯示懸停或鼠標懸停/鼠標移開你的選擇中，僅僅只包含零剪貼板格......這樣的事情（我認爲是正確的對象ID使用）：

$('img.someimage, .optiondiv, #ZeroClipboardMovie_1').hover(function(){ 
    $('.optiondiv') 
    // positioning stuff here 
    .show() 
})

來源

2009-10-22 04:42:24 Mottie

當我使用零剪貼板中，我注意到，這是最好將它移到一個負左側位置時，我並不需要它。如：

#clipboardContainer {position:absolute; top:0; left:-1000px;}

我不太明白你的問題，而是動態地從它導致您的問題可能會解決你的問題的方式移動它了。

來源

2009-10-24 21:18:38 Matrym

謝謝，但不是，在最新的Flash版本（10），它必須在元素的頂部，否則它不會工作，導致閃光元素必須點擊，這是透明的，不能被看到。無論如何下面是正確的答案，我寫了，今天只能接受它，因爲你必須等待3天才能接受你自己的答案。 – Basit 2009-10-24 23:05:59

只是爲了你的興趣：

我的方法是使用數據屬性激活複製功能。除此之外，它還設置在根元素上懸停&活動類。

用法：

HTML：

<button data-zc-copy-value="this is the text to copy">some text<button>

的Javascript：

$(document).on('mouseover', '*[data-zc-copy-value]', function() { 
     var that = $(this), 
      width = that.outerWidth(), 
      height = that.outerHeight(); 

     if(that.data("zc-activated") !== "true"){ 
     // init new ZeroClipboard client 
     clip = new ZeroClipboard.Client(); 
     clip.setHandCursor(true); 
     clip.setText(that.data('zc-copy-value')); 

     var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>'; 
     // make your own div with your own css property and not use clip.glue() 
     flash_movie = $(flash_movie).css({ 
      position: 'relative', 
      marginBottom: -height, 
      width: width, 
      height: height, 
      zIndex: 101 
     }); 

     // delegate mouse events 
     flash_movie.hover(function(){ 
      that.addClass('hover'); 
     },function(){ 
      that.removeClass('hover'); 
     }); 
     flash_movie.mousedown(function(){ 
      that.addClass('active'); 
     }); 
     flash_movie.mouseup(function(){ 
      that.removeClass('active'); 
     }); 

     // add flash overlay 
     $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop 

     that.data("zc-activated", "true"); 
     } 
    });

來源

2012-11-08 11:31:19 HaNdTriX

zeroClipboard複雜的CSS問題

回答

相關問題