6

我一直试图让零剪贴板和jQuery UI 对话框一起玩得很好，事实证明这相当困难。

零剪贴板允许通过在按钮上放置透明的 Flash 影片从 Javascript 复制到剪贴板，以便用户在尝试单击按钮时单击 Flash。正如您在演示页面中看到的那样，这可以很好地跨浏览器工作。

但是，当尝试在 jQuery UI 对话框中使用它时，似乎出现了问题。

首先，我发现 Flash 元素必须放在对话框元素中，否则 Chrome 和 IE 拒绝响应点击事件。这意味着我不能使用glue便捷方法，但没关系。

但是，现在 IE 出于某种原因将不接受setTextFlash 元素上的方法。

我所做的一个例子是here。我的代码从第 300 行开始，最相关的行是：

$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
    if($("#clipflash").length == 0) {
        var btn = $("#d_clip_button");
        $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
            .css(btn.position())
            .width(btn.width())
            .height(btn.height())
            .html(clip.getHTML(btn.width(), btn.height()))
            .appendTo("#showme");
    }
});

为了安全起见，我将 div 着色为红色，以便更容易发现并将其 z-index 设置为 9999。然后我设置位置和大小以覆盖“按钮”，并为 Flash 元素添加 HTML clip.getHTML()。

我已经为此工作了几个小时，所以任何帮助将不胜感激。

差点忘了：我的问题是 IE7 在零剪贴板代码中说“对象不支持此属性或方法”。

更新

powtac 的评论指出了一些看起来很有希望的东西：

我忘记了自己的黄金法则：为了让 Flash ExternalInterface 在 IE 7 中工作，您必须在将 EMBED/OBJECT HTML 附加到 DOM之后将其填充到 DIV 元素中。愚蠢的IE。

但是，切换线路.html(clip.getHTML(btn.width(), btn.height()))并.appendTo("#showme")没有帮助。即使setTimeout稍后添加 Flash HTML 也无济于事。我觉得我真的很接近，虽然......

4

2 回答 2

3

好的，所以 powtac 确实为我指明了正确的方向，但是缺少一个元素：使用 jQueryhtml()函数与简单地设置innerHTML. 如果有人能解释为什么会很好。

因此，固定代码如下所示：

$("#showme").bind("dialogopen", function() {
    if($("#clipflash").length == 0) {
        var btn = $("#d_clip_button");
        $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
            .css(btn.position())
            .width(btn.width())
            .height(btn.height())
            .appendTo("#showme")
            [0].innerHTML = clip.getHTML(btn.width(), btn.height());
    }
});

另外，我忘记将 DOCTYPE 放在示例页面中，所以 IE 中的偏移量是错误的。我的错。

于 2009-10-08T13:28:59.713 回答
1

我将您的答案改编为可重复使用的方法，并修复了一些位置问题（我必须添加位置：绝对，并使用outerWidth()and outerHeight().

演示。

function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){
  var copiedText = $(selector).text();
  ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
  var clip = new ZeroClipboard.Client();
  clip.setText(copiedText);
  clip.addEventListener('complete', callback);

  $(buttonSelector).each(function(){
    clip.glue(this);
  });

  // Make sure Zero Clipboard is on top
  $("#ZeroClipboardMovie_1").
    parent().
    css("z-index", 2000);

  if (opt_dialogSelector) {
    $(opt_dialogSelector).bind("dialogopen", function() {
      if($("#clipflash").length === 0) {
        var btn = $(opt_dialogSelector).find(buttonSelector);
        $("<div id='clipflash' style='position:absolute; z-index: 9999' />")
          .css(btn.position())
          .width(btn.outerWidth())
          .height(btn.outerHeight())
          .appendTo(opt_dialogSelector)
          [0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight());
      }
    });
  }
}

$(function(){
  setupCopier('#copy-div', '.copy-button', function(){
    alert("Copied");
  }, '#dialog');

  $("#open-dialog-button").click(function(){
    $("#dialog").dialog("open");
  });

  $("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false,
        title: "Create your Free Personal Bar now", height:200, width:300});
});
于 2012-01-15T14:08:59.760 回答