zeroClipboard复杂css问题 [英] zeroClipboard complex css problem

问题描述

我有图像列表，鼠标上有一个选项框显示在它下面，它已嵌入代码输入框从中进行复制。现在我实现了zeroclipboard上，使复制功能工作点击，所以当我做鼠标在图像上，它正确显示选项框，但当我用鼠标点击输入框复制代码，选项获取关闭，认为它不在选项div了，因为zeroclipboard有它的顶部的div，所以鼠标去它，它被关闭。

i have list of images and on mouse over there is option box shows under it, which has embeded code input box to copy from. now i implemented zeroclipboard on it, for making copy function work on click, so when i do mouse over on image, it shows the option box properly, but when i take mouse to click on the input box to copy the code, the option gets closed, thinking its not in option div anymore, because zeroclipboard has div on top of it so mouse goes on it and it gets closed.

所以解决方案是创建该div里面的选项div，它已经照顾，但现在zeroclipboard div样式显示错误，我不知道如何解决它。

so solution was to create that div inside the option div, which has been taking care of, but now zeroclipboard div style is showing wrong and i dont know how to fix it.

以下是zeroclipboar的样式，我不知道什么样式设置它，因此它的上面的输入框，所以我可以点击它，所以它工作正常，因为它通常是。

following are the style for zeroclipboar, i dont know what style to set on it, so its above the input box, so i can click on it and so it works fine like it usally does.

    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;

推荐答案

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

这篇关于zeroClipboard复杂css问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！