位于次级/非默认jQuery的选项卡内时zeroclipboard元件不工作(zeroclipboa

我有一个网页使用jQuery的标签，并且我想一个div元素的辅助选项卡里面有zeroclipboard链接。 不幸的是，它不工作，因为我怀疑是加载页面时的辅助翼片最初是隐藏的。

在HTML如下：

<span id="form" class="tabs tabs-normal grid100">

   <!-- HEADER BUTTONS -->
   <div class="row_btns_header">
      <button class="btn_neutral">Cancel</button>
      <button class="btn_primary last save">Save</button>     
   </div>

   <!-- TABS -->
   <div class="row">
      <ul id="tabs-list">
        <li><a href="#blog">Blog</a></li>
        <li><a href="#links">Links</a></li>
        <li><a href="#images">Images</a></li>
        <li><a href="#more">More..</a></li>
      </ul>
   </div>

   <!-- DEFAULT TAB -->
   <div id="blog" class="container">

   </div>

   <!-- LINKS TAB -->
   <div id="links" class="container">
        <div id="embed" style="position: relative">
           <a href="#">Copy into the clipboard</a>
        </div>
   </div>

   <!-- etc. -->

JavaScript的是：

$(".tabs").tabs();

$("#embed").zclip({
        path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
        copy: "aaaaaaaaaaaa"
    });

zeroclipboard正常工作，如果我移动#embed DIV的#blog网格内。 我怀疑这是因为#blog网默认为可见。

任何想法，我需要为了得到zeroclipboard元素时，它位于一个二次非默认选项卡里面的工作呢？

非常感谢。

巴尔迪

Answer 1:

我意识到这是一个古老的线程，但希望这可以帮助别人那里。

我只是有同样的问题，我想出了一个解决办法是在zclip对象的创建结合绑所需的触发按钮/链接鼠标悬停事件。 另外，为了防止脚本从每个鼠标悬停事件发生时重新初始化zclip对象，只是把它关掉当它第一次调用。 下面是一个例子：

该HTML：

<input type='text' value='Text being copied.'/> <input type='button' class='clipcopy' value='Copy'/>

JavaScript的：

$(document).ready(function(){


    $(".clipcopy").on('mouseover', function(){

        //turn off this listening event for the element that triggered this
        $(this).off('mouseover');

         //initialize zclip
        $(this).zclip({
            path: "js/zclip/ZeroClipboard.swf",
            copy: function(){return $(this).prev().prop('value');}
         });

     });
 });

希望能帮助到你！

Answer 2:

该标签插件设置选项卡面板display: none ，这意味着Flash不会马上开始。 您可以尝试使用CSS黑客吧：

.container.ui-helper-hidden {
    display: block !important;
    position: absolute;
    left: -99999px;
}

这将覆盖display: none ，而是定位在面板关闭屏幕-这样的内容被加载和面板被测量，但不会是对用户可见。 （这是相同的方式.ui-helper-hidden-accessible用于工作）

Answer 3:

问题的关键是初始化一个鼠标悬停事件，我用jquery.clipboard这也行

$("a.button-copy-shortcode").on('mouseover', function(event){
    event.preventDefault();

    //initialize clipboard
    $(this).clipboard({
        path: pluginDir+'/tonjoo-tom/assets/js/jquery.clipboard.swf',
        copy: function() {

            var shortcode = $(this).find('.shortcodeValue').text();

            return shortcode;
        }
    });
});

文章来源: zeroclipboard element not working when located inside secondary/non-default jQuery tab