Диалог пользовательского интерфейса jQuery и Flash в IE

Я пытался получить нулевой буфер обмена и jQuery UI Dialog хорошо сочетаются друг с другом, и это оказывается довольно сложным.

Zero Clipboard позволяет копировать в буфер обмена из Javascript, помещая прозрачный Flash-ролик поверх кнопки, чтобы пользователь нажимал на Flash, когда он пытался нажать кнопку. Это прекрасно работает и работает в разных браузерах, как вы можете видеть на демонстрационной странице.

Однако при попытке использовать это в диалоговом окне jQuery UI что-то пошло не так.

Во-первых, я обнаружил, что элемент flash должен быть помещен внутри элемента диалога, иначе Chrome и IE отказываются реагировать на события кликов. Это означает, что я не могу использовать метод удобства glue, но это нормально.

Однако теперь IE по какой-то причине не принимает метод setText для элемента 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-индекса значение 9999, просто на всякий случай. Затем я устанавливаю положение и размер, чтобы покрыть «кнопку», и добавляю HTML для элемента Flash с помощью clip.getHTML().

Я работаю над этим уже несколько часов, поэтому любая помощь будет принята с благодарностью.

Чуть не забыл: моя проблема в том, что IE7 говорит "Объект не поддерживает это свойство или метод" внутри кода нулевого буфера обмена.

ОБНОВИТЬ

комментарий powtac указывает на то, что выглядит действительно многообещающе:

Я забыл собственное золотое правило: чтобы Flash ExternalInterface работал в IE 7, вы должны вставить HTML-код EMBED/OBJECT в элемент DIV ПОСЛЕ, после чего он будет присоединен к DOM. Глупый ИИ.

Однако переключение строк .html(clip.getHTML(btn.width(), btn.height())) и .appendTo("#showme") не помогло. Даже выполнение setTimeout для добавления Flash HTML позже не помогло. Я чувствую, что я действительно близок, хотя...


javascript jquery-ui flash clipboard zeroclipboard
person itsadok    schedule 08.10.2009    source источник
comment
code.google.com/p/zeroclipboard/issues/detail? идентификатор=7#c4   -  person powtac    schedule 08.10.2009
comment
Почему бы вам не указать это в ответе, чтобы я мог хотя бы проголосовать за вас?   -  person itsadok    schedule 08.10.2009

Ответы (2)


arrow_upward
3
arrow_downward

Итак, powtac указал мне правильное направление, но не хватало одного элемента: использование функции jQuery html() не имело такого же эффекта, как просто установка 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 неверны. Виноват.

person itsadok    schedule 08.10.2009

arrow_upward
1
arrow_downward

Я адаптировал ваш ответ к методу многократного использования и исправил несколько проблем с позициями (мне пришлось добавить position:absolute и использовать 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});
});
person ripper234    schedule 15.01.2012