当位于辅助/非默认jQuery选项卡中时，zeroclipboard元素不起作用 [英] zeroclipboard element not working when located inside secondary/non-default jQuery tab

问题描述

我有一个带有jQuery选项卡的页面，并且我正在尝试使用zeroclipboard链接辅助选项卡中的div元素.不幸的是，它无法正常工作，因为我怀疑在加载页面时，第二个选项卡最初是隐藏的.

I've got a page with jQuery tabs, and I'm trying to link a div element inside a secondary tab with zeroclipboard. Unfortunately, it's not working because I suspect the secondary tab is initially hidden when the page is loaded.

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是:

The javascript is:

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

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

如果将#embed div移至#blog div中，则

zeroclipboard可以正常工作.我怀疑这是因为默认情况下#blog是可见的.

zeroclipboard works correctly, if I move the #embed div inside the #blog div. I suspect this is because #blog is visible by default.

有什么想法要使zeroclipboard元素位于辅助非默认选项卡中才能正常工作?

Any ideas what I need to do in order to get the zeroclipboard element to work when it's located inside a secondary non-default tab?

非常感谢.

Bardi

推荐答案

我意识到这是一个旧线程，但是希望这可以帮助某个人.

I realize this is an old thread, but hopefully this helps someone out there.

我只是遇到了同样的问题，我想出的解决方案是将zclip对象的创建绑定到与所需的触发按钮/链接相关的mouseover事件.另外，为防止脚本在每次发生鼠标悬停事件时重新初始化zclip对象，只需在首次调用该脚本时将其关闭即可.这是一个示例:

I just had the same problem and the solution I came up with was to bind the creation of the zclip object to a mouseover event tied to the desired trigger button/link. Also, to prevent the script from reinitializing the zclip object each time a mouseover event occurs, just turn it off when it is first called. Here's an example:

HTML:

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

JavaScript:

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

     });
 });

希望有帮助！

这篇关于当位于辅助/非默认jQuery选项卡中时，zeroclipboard元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！