zeroClipboard 复杂的 CSS 问题答案

【问题标题】：zeroClipboard complex css problemzeroClipboard 复杂的 CSS 问题
【发布时间】：2009-10-22 01:18:47
【问题描述】：

我有图像列表，鼠标悬停在其下方显示选项框，其中嵌入了可供复制的代码输入框。现在我在其上实现了 zeroclipboard，用于使复制功能在单击时起作用，因此当我将鼠标悬停在图像上时，它会正确显示选项框，但是当我用鼠标单击输入框以复制代码时，选项会得到关闭，认为它不再在选项 div 中，因为 zeroclipboard 上面有 div，所以鼠标继续它并关闭。

所以解决方案是在选项 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;

【问题讨论】：

zeroclipboard div style is showing wrong and i dont know how to fix it. - 这是一个视觉问题。有一个演示链接通常会有所帮助，这样我们就可以直观地看到问题。
ok 添加了链接，你可以查看:)

标签： jquery css xhtml zeroclipboard

【解决方案1】：

$("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
    });

【讨论】：

【解决方案2】：

我不知道您的代码是什么样的，但是当您使用悬停或鼠标悬停/鼠标悬停显示选项框时，只需包含零剪贴板 div ......类似这样的东西（我相信这是正确的对象 ID使用）：

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

【讨论】：

【解决方案3】：

当我使用零剪贴板时，我注意到最好在不需要时将其移动到负左位置。如：

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

我不太了解您的问题，但动态地将其从引起问题的地方移开可能是解决问题的一种方法。

【讨论】：

谢谢，但是不，在最新的flash版本（10）上，它必须在元素的顶部，否则它不会起作用，因为flash元素必须被点击，它是透明的，看不到.不管怎样，下面是正确的答案，我写的，今天只能接受，因为你必须等待 3 天才能接受自己的答案。

【解决方案4】：

只是为了您的兴趣：

我的方法使用数据属性来激活复制功能。除此之外，它还在根元素上设置悬停和活动类。

用法：

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");
      }
    });

【讨论】：