Сложная CSS-задача ZeroClipboard

Question

у меня есть список изображений, и при наведении курсора мыши под ним отображается поле опций, в которое встроено поле ввода кода для копирования.теперь я реализовал zeroclipboard на нем, чтобы заставить функцию копирования работать по щелчку мыши, поэтому, когда я наводлю курсор мыши на изображение, оно правильно отображает поле выбора, но когда я беру мышь, чтобы щелкнуть по полю ввода, чтобы скопировать код, опция закрывается, думая, что ее больше нет в option 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;

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

Answer 2

Я не знаю, как выглядит ваш код, но когда вы отображаете окно опций, используя hover или mouseover / mouseout, просто включите div нулевого буфера обмена ... что-то вроде этого (я считаю, что это правильный идентификатор объекта для использование):

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

Answer 3

Когда я использовал нулевой буфер обмена, я заметил, что лучше всего перемещать его в отрицательное левое положение, когда оно мне не нужно. Например:

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

Я не совсем понимаю ваш вопрос, но динамическое удаление его от того места, где оно вызывает ваши проблемы, может стать способом решения вашей проблемы.

Answer 4

Просто ради вашего интереса:

Мой подход использует атрибуты данных для активации функции копирования.В дополнение к этому он устанавливает классы hover & active для корневого элемента.

Использование:

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