zeroClipboard problema css complexo
-
05-07-2019 - |
Pergunta
eu tenho lista de imagens e sobre mouse sobre há caixa de opção mostra sob ela, que a caixa de entrada de código para copiar tem embeded. Agora eu implementado zeroclipboard sobre ele, para tornar o trabalho função de cópia no clique, então quando eu faço mouse sobre a imagem, ele mostra a caixa de opção corretamente, mas quando eu tomar mouse para clicar sobre a caixa de entrada para copiar o código, a opção fica fechado, pensando que não é na opção div mais, porque zeroclipboard tem div em cima dele para rato passa sobre ele e ele fica fechado.
para solução foi criar que div dentro da div opção, que tem vindo a tomar cuidado, mas agora estilo div zeroclipboard está mostrando errado e eu não sei como corrigi-lo.
Seguem-se o estilo para zeroclipboar, eu não sei o que o estilo de conjunto sobre ele, pelo que a sua acima da caixa de entrada, para que eu possa clicar sobre ele e por isso bem funciona como usally faz.
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;
Solução
$("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
});
Outras dicas
Eu não sei o que sua aparência código gosta, mas quando você exibir as opções de caixa usando pairar ou mouseover / mouseout, basta incluir o div de zero prancheta ... algo assim (eu acredito que é o ID do objeto correto uso):
$('img.someimage, .optiondiv, #ZeroClipboardMovie_1').hover(function(){
$('.optiondiv')
// positioning stuff here
.show()
})
Quando eu usei zero, prancheta, notei que era melhor para movê-lo para um valor negativo posição à esquerda quando eu não precisar dele. Tais como:
#clipboardContainer {position:absolute; top:0; left:-1000px;}
Eu não entendo muito bem a sua pergunta, mas movê-lo dinamicamente longe de onde ele está causando problemas pode ser uma maneira de resolver o seu problema.
Apenas pelo seu interesse:
Meus dados abordagem utiliza atributos para ativar a funcionalidade de cópia. Além de que ele define pairar & classes ativas na raiz elemento.
Uso:
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");
}
});