2012-07-06 32 views
0

我正在使用zclip复制到剪贴板功能,直到我开始使用twitter bootstrap css框架。 现在我似乎无法再使用zclip了,有没有人有解决方案?zclip&twitter bootstrap:不兼容?

一些测试结果:

这是我如何使用zclip:

$('.test').zclip({ 
     path:"{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}", 
     copy: 'test', 
     afterCopy:function(){ 
      alert('The poem has been copied to the clipboard.'); 
     }, 
    }); 

这正常工作与下面的HTML:

<div class='test'>test</div> 

但每当我尝试使用的图像,它不再工作,闪光的东西不会出现:

<div class='test'><img src="{{ asset('bundles/yopyourownpoet/images/Star.png') }}" alt="Star" height="100" width="100" /></div> 

在我开始使用引导程序之前,这工作得很好... 使用zclip的任何提示& bootstrap,并在图像上有闪光的东西? 非常感谢。

回答

2

那么,经过很多尝试,我终于有它的工作。我不得不恢复到zeroclipboard,不再使用zclip。 下面是的工作代码:

<div id="d_clip_container" style="position:relative; bottom: 25px; display: inline;"> 
     <img id='d_clip_button' style="position:relative; top: 25px;" src="{{ asset('bundles/yopyourownpoet/images/CopyPoemPage8.png') }}" alt="Copy Poem" height="71" width="300" /> 
    </div> 

-

ZeroClipboard.setMoviePath("{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}"); 
    var clip = new ZeroClipboard.Client(); 
    clip.setText('text to copy'); 
    clip.glue('d_clip_button', 'd_clip_container'); 
    clip.setHandCursor(true); 

注意,我不得不用了一招,底部25px的容器和顶部25px的图像上,使闪光的是与图像叠加。

这是行之有效的,只是光标并不总是在鼠标悬停图像时更改为指针。

虽然我觉得这个解决方案有点不好意思,所以如果有人有更好的解决方案,请分享。