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问题

回答

相关问题