jQuery UI Диалог и Flash в IE - PullRequest
Новая
       31

jQuery UI Диалог и Flash в IE

6 голосов
/ 08 октября 2009

Я пытался заставить Zero Clipboard и 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 говорит "Объект не поддерживает это свойство или метод" внутри кода Zero Clipboard.

UPDATE

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

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

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

Ответы [ 2 ]

3 голосов
/ 08 октября 2009

ОК, поэтому 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 неправильные смещения. Мой плохой.

1 голос
/ 15 января 2012

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