zClip - 如何在单击按钮时添加、触发和删除 zClip？答案

【问题标题】：zClip - How to add, fire, then remove zClip on one click of a button?zClip - 如何在单击按钮时添加、触发和删除 zClip？
【发布时间】：2012-10-05 02:01:04
【问题描述】：

将.zclip() 附加到按钮，然后触发它，然后删除.zclip() 的最佳方法是什么？这听起来很简单，但我不能让它合作。我有一个包含许多按钮的页面，有些可以直接访问，有些按钮可以通过各种手风琴和选项卡访问。许多复制目标包含动态数据，其中一些是通过 ajax 插入的。许多部分也是可折叠的。如果在该部分关闭时存在.zclip() 附加到按钮的 Flash 覆盖，那么它会导致动画出现故障。

我尝试从几种不同的方式来解决这个问题：

附加.zclip()所有按钮元素，然后按设定的时间间隔刷新页面。虽然它确实捕获了动态数据，但它的性能很糟糕。

基于mouseenter 和mouseleave 事件以及mouseover 和mouseout 附加和删除.zclip()。以这种方式附加时，所有事件每秒都会触发多次，导致多个 Flash 覆盖绑定到一个按钮。

基于.hover() 和.hoverIntent() 附加和删除.zclip()。虽然这比上述尝试表现得更好并捕获了动态数据，但事件的触发方式仍然很稳定。我尝试在父部分上执行.hover() 并将.zclip() 附加到该部分中的所有按钮。这行得通，但它的性能很糟糕。

我相信有一个简单的解决方案，但我就是想不通。我可以通过.click() 绑定.zclip()，它会附加到一个按钮上。我可以通过afterFunction 参数删除.zclip()。我不知道如何将额外的click 事件传递给按钮并在连接后触发.zclip()。它会起作用，但必须单击该按钮两次。一旦激活它，就会触发并移除它。我在想可能需要将额外的click 事件发送到 Flash 覆盖层，而不是再次发送到按钮。也许有人可以指出我正确的方向？

zClip Homepage

jsFiddle of this code:

<div id='copy'>Test</div>
<button>Click Here To Copy The Div Above!</button>
<span id='success'>Success!</span>

#copy{
    height: 100px;
    width: 200px;
    padding: 3px;
    margin-bottom: 5px;
    border: 1px solid black;
    border-radius: 6px;
}
#success{
    color: rgba(84,240,84,1);
}

$(document).ready(function() {
    var copySuccessHide = function(){
        $( "#success" ).css({opacity: 0.0, visibility: "visible"});
    };
    copySuccessHide();/*hide the success indicator*/
    var copyData = $("#copy").text();/*get data from copy target*/
    var afterCopyFunction = function(){
        $("#copy").effect( "highlight" , {color : "rgba(230,255,230,1)" }, 1000 )
        $("#success").effect( "pulsate", "fast", copySuccessHide );
        $("button").zclip('remove');/*remove zclip*/
        };

    $("button").click(function () {/*bind zclip to the button on click*/
        $("button").zclip({
                path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
                copy: copyData,
                afterCopy: afterCopyFunction,
                clickAfter: false
            });
    });
});

【问题讨论】：

性能方面，我认为将实例保留在那里而不是不断添加和删除它们可能会更好（除非您有成百上千个实例会占用所有 RAM），如果您可以重现小提琴中的动画故障可能更容易找到另一种方法。
@FabrícioMatté 目前第一个选项卡中有大约 70 个按钮。仅此一项就导致页面负载显着增加。此外，其他选项卡是通过 ajax 加载的，因此必须在加载后附加。并非所有按钮都将被持续使用，但如果用户想要使用它，则必须可供用户使用。这就是为什么我想根据需要附加.zclip()，然后在完成后将其删除，而不是全部加载。我很快就会发布一个 jsFiddle 来演示动画故障。
我明白了。一次附加 70 个闪存对象仍然会导致速度变慢。我敢打赌，要么使用hover 处理程序来附加和删除zclips（正如你已经说过的性能不佳），或者只是在折叠选项卡并在显示它们时再次显示它们之前执行$('#tabToCollapse').find('.snippet-clipboard').hide() 之类的操作。这 2 个是我认为 atm 的最佳选择。

标签： jquery html css zclip

【解决方案1】：

我同意以上所有的 cmets，但你可以尝试一件事....

 $("button").click(function () {/*bind zclip to the button on click*/
        $(this).zclip({
                path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
                copy: copyData,
                afterCopy: afterCopyFunction,
                clickAfter: false
            });
    });

通过使用 $(this)....您只是将当前单击的按钮绑定到 zclip 构造函数。当您使用 $("button")....时，每次单击单个按钮时，您都会在页面上的每个按钮上调用 zclip 构造函数。

【讨论】：