-1

单击输入时，我正在使用一些 JavaScript 来复制值。这很好用。通常我会做一个 JavaScript 警报，但现在我想使用一个查询淡化 div。

如果我在单独的脚本中运行 jquery 或 javascript，那么它们工作正常，只要我加入它们就会失败。

我认为这是因为我使用 onMouseOver 进行复制，但使用输入单击事件进行淡化警报。

知道如何合并这些吗？

<script language="JavaScript">
        function toClip(me,vals) {
                var clip = new ZeroClipboard.Client();
                clip.setHandCursor( true );
                clip.setText(vals);
                clip.glue(me);
        }
</script>

<script  type="text/javascript">
    $(document).ready(function() {
$('input').click(function() {
    $messageCont = $('<div class="message_cont">');
    $message = $('<div>DONE</div>').hide();
    $messageCont.append($message);
    $('body').prepend($messageCont);
    $messageCont.css({
    "left" : $(this).offset().left,
    "top" : $(this).offset().top
    });
    $message.fadeIn(200, function() {
        setTimeout(function(){
            $messageCont.fadeOut();
            //code to clean up container
        }, 1500)
    })
 })
});
$messageCont.css({
    "left" : $(this).offset().left,
    "top" : $(this).offset().top
});
</script>

这通过以下方式调用：

<div class='copy' onmouseOver="toClip(this,'$val')"><input type="button" value="Copy"/></div>

谢谢 ：）

4月15日更新：

有点使用 jquery 而不是 Javascript 来完成这项工作。

<input type="button" id="copy_button" data-clipboard-text="Copy Me!" Value="Click ME">
<script src="js/ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById("copy_button"), {
  moviePath: "js/ZeroClipboard.swf"
} );

clip.on( 'complete', function(client, args) {
var $message = $('<div class="message">DONE</div>').hide();
var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
$messageCont.css({
   "left" : $(this).offset().left,
   "top" : $(this).offset().top
}).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
        });
   } );
</script>

我唯一的问题是它只适用于按钮。我有很多我想和它一起工作的东西。有谁知道如何解决这个问题？

谢谢 ：）

4

1 回答 1

2

几点：

  • $messageCont/$message每次单击输入时可能不需要创建新的？其余代码建议重用。

  • 表达式的$messageCont = ...HTML 不完整。您必须确保 div 标签是关闭的，无论是 with<div>...</div>还是 with <div />。

  • 脚本淡入$message淡出$messageCont。这在第一次使用时是可以的，但随后你会看到精确的 nada；没有任何表情可以淡出$messageCont。

  • 可以使用 来实现动画队列中的延迟.delay()，这比使用 更干净setTimeout()。

  • 很难看出第二个表达式在其内容显示之前定位$messageCont.css(...)时应该实现什么。$messageCont如果最初需要定位$messageCont，那么最好使用样式表指令或在 $(document).ready(function() {...}) 结构内的 jQuery 中进行定位。

在字里行间阅读，我想你可能想要更像这样的东西：

$(document).ready(function() {
    var $message = $('<div class="message">DONE</div>').hide();
    var $messageCont = $('<div class="message_cont" />').append($message).prependTo('body');
    $('input').on('click', function() {
        $messageCont.css({
            "left" : $(this).offset().left,
            "top" : $(this).offset().top
        }).find("div.message").fadeIn(200).delay(1500).fadeOut(function() {
            //code to clean up container
        });
    });
});
于 2013-04-11T20:39:41.987 回答