1

我有一个带有 jQ​​uery 选项卡的页面，我正在尝试使用 zeroclipboard 链接辅助选项卡内的 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"
    });

zeroclipboard 工作正常，如果我将#embed div 移动到#blog div 中。我怀疑这是因为默认情况下 #blog 是可见的。

当 zeroclipboard 元素位于辅助非默认选项卡内时，我需要做什么才能使它工作？

非常感谢。

巴迪

4

3 回答 3

5

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

我只是遇到了同样的问题，我想出的解决方案是将 zclip 对象的创建绑定到与所需触发按钮/链接相关的 mouseover 事件。此外，为了防止脚本在每次发生 mouseover 事件时重新初始化 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');}
         });

     });
 });

希望能帮助到你！

于 2013-06-20T09:49:57.027 回答
0

关键是在鼠标悬停事件上对其进行初始化，我使用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;
        }
    });
});
于 2014-06-20T07:11:17.013 回答
0

选项卡插件将选项卡面板设置为display: none，这意味着 Flash 不会立即启动。你可以尝试用 CSS 破解它：

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

这将覆盖display: none并将面板放置在屏幕之外 - 这样会加载内容并测量面板，但不会对用户可见。（这与.ui-helper-hidden-accessible过去的工作方式相同）

于 2012-05-11T22:01:27.273 回答