首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >zeroClipboard复杂css问题

zeroClipboard复杂css问题
EN

Stack Overflow用户
提问于 2009-10-22 09:18:48
回答 4查看 2.5K关注 0票数 0

我有一个图像列表,在鼠标上有一个选项框在它下面显示,其中有嵌入的代码输入框来复制。现在我在它上面实现了zeroclipboard,为了让复制功能在点击时起作用,所以当我把鼠标放在图像上时,它会正确地显示选项框,但当我用鼠标点击输入框来复制代码时,选项会关闭,认为它不再在选项div中,因为zeroclipboard在它上面有div,所以鼠标在它上面,它被关闭了。

所以解决方案是在选项div中创建div,它一直在处理,但现在zeroclipboard div样式显示错误,我不知道如何修复它。

下面是zeroclipboar的样式,我不知道要设置什么样式,所以它在输入框的上方,所以我可以点击它,所以它像平常一样工作得很好。

代码语言:javascript
运行
复制
    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;
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2009-10-22 13:08:08

代码语言:javascript
运行
复制
$("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
EN

Stack Overflow用户

发布于 2009-10-22 12:42:24

我不知道你的代码是什么样子的,但是当你使用hover或者mouseover/mouseout显示你的选项框时,只需要包括零剪贴板div...如下所示(我相信这是要使用的正确对象ID ):

代码语言:javascript
运行
复制
$('img.someimage, .optiondiv, #ZeroClipboardMovie_1').hover(function(){
  $('.optiondiv')
  // positioning stuff here
  .show()
})
票数 0
EN

Stack Overflow用户

发布于 2009-10-25 05:18:38

当我使用zero剪贴板时,我注意到当我不需要它的时候,最好将它移到负的左侧位置。例如:

代码语言:javascript
运行
复制
#clipboardContainer {position:absolute; top:0; left:-1000px;}

我不太理解你的问题,但动态地将它从它造成问题的地方移走可能是解决你问题的一种方法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1604534

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档