6

私はZeroClipboardとjQueryUIDialogを一緒にうまく機能させることを試みてきましたが、それはかなり難しいことが証明されています。

ゼロクリップボードを使用すると、ボタンの上に透明なFlashムービーを配置することで、Javascriptからクリップボードにコピーできるため、ユーザーがボタンをクリックしようとしたときにFlashをクリックします。デモページでわかるように、これはうまく機能し、クロスブラウザです。

ただし、これをjQuery UIダイアログボックスで使用しようとすると、問題が発生するようです。

最初に、flash要素をdialog要素内に配置する必要があることを発見しました。そうしないと、ChromeとIEはクリックイベントへの応答を拒否します。これは、glue便利な方法を使用できないことを意味しますが、それは問題ありません。

setTextただし、IEは何らかの理由でFlash要素のメソッドを受け入れないようになりました。

私がしたことの例はここにあります。私のコードは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のコメントは、本当に有望に見えるものを示しています。

独自の黄金律を忘れました。FlashExternalInterfaceをIE7で機能 させるには、DOMに追加された後にEMBED / OBJECTHTMLをDIV要素に詰め込む必要があります。愚かなIE。

しかし、回線.html(clip.getHTML(btn.width(), btn.height()))を切り替えて.appendTo("#showme")も役に立ちませんでした。後でフラッシュHTMLを追加するためにを実行しても、setTimeout役に立ちませんでした。でも、本当に近くにいるような気がします...

4

2 に答える 2

3

わかりました、powtac は正しい方向を示してくれましたが、1 つの要素が欠けていました。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

私はあなたの答えを再利用可能な方法に適応させ、いくつかの位置の問題を修正しました（私は position:absolute を追加し、 and を使用する必要がouterWidth()あり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 に答える