zeroClipboard مشكلة معقدة المغلق

Question

ولدي قائمة من الصور وعلى الماوس فوق هناك مربع الخيار يظهر تحته، الذي مطعم ب مربع إدخال رمز لنسخ منه. أنا الآن تنفيذ zeroclipboard على ذلك، لجعل وظيفة عمل نسخة على نقرة، حتى عندما أفعل الماوس فوق على الصورة، فإنه يظهر مربع الخيار بشكل صحيح، ولكن عندما تأخذ الماوس للنقر على مربع الإدخال لنسخ الرمز، يحصل على خيار مغلقة، والتفكير وليس في خيار شعبة بعد الآن، لأن zeroclipboard ديه شعبة على أعلى من ذلك حتى يذهب الماوس على ذلك ويحصل على اغلاقه.

وهكذا كان لإيجاد حل أن شعبة داخل شعبة الخيار، الذي تم رعاية، ولكن الآن zeroclipboard شعبة أسلوب يظهر خطأ، وأنا لا أعرف كيفية اصلاحها.

وفيما يلي نمط 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

وأنا لا أعرف ما يبدو التعليمات البرمجية الخاصة بك مثل، ولكن عند عرض مربع الخيارات باستخدام تحوم أو تمرير الماوس / mouseout، فقط تشمل شعبة الصفر الحافظة ... شيء من هذا القبيل (وأعتقد هذا هو معرف الكائن الصحيح ل الاستخدام):

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

Answer 3

عند اعتدت الصفر الحافظة، لاحظت أنه من الأفضل لنقله إلى الموضع الأيسر سلبي عندما لم أكن في حاجة إليها. مثل:

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

وأنا لا أفهم تماما سؤالك، ولكن بشكل ديناميكي يتحرك بعيدا من حيث أنها تسبب لك مشاكل قد يكون وسيلة لحل مشكلتك.

Answer 4

وفقط على اهتمامك:

وتوجهي يستخدم سمات البيانات لتنشيط وظيفة نسخة. بالإضافة إلى أنه يحدد تحوم والطبقات النشطة على العنصر الجذر.

والاستعمال:

وHTML:

 <button data-zc-copy-value="this is the text to copy">some text<button>

وجافا سكريبت:

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