零剪贴板元素在位于辅助/非默认 jQuery 选项卡中时不起作用

Question

>我有一个带有jQuery选项卡的页面，我正在尝试使用零剪贴板链接辅助选项卡中的div元素。不幸的是，它不起作用，因为我怀疑在加载页面时辅助选项卡最初是隐藏的。

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

如果我将 #embeddiv 移动到 #blogdiv 内，则零剪贴板工作正常。我怀疑这是因为默认情况下 #blog 可见的。

任何想法我需要做什么才能让零剪贴板元素在位于辅助非默认选项卡中工作？

非常感谢。

巴迪

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