Копировать jQuery zClip в буфер обмена для нескольких ссылок в раскрывающемся списке начальной загрузки?

Если это невозможно сделать для кросс-браузерной версии, будем очень признательны за любые комментарии.

Чего я пытаюсь добиться, так это нескольких ссылок «копировать в буфер обмена» на моей странице, например, как это...

<a href="#" data-copy="<?php echo $original[0]; ?>" class="copy">Copy Original Link</a>
<a href="#" data-copy="<?php echo $medium[0]; ?>" class="copy">Copy Medium Link</a>
<a href="#" data-copy="<?php echo $web[0]; ?>" class="copy">Copy Web Link</a>


Просто не очень повезло заставить что-то работать.


Я использую zClip и пытаюсь запустить с помощью jQuery onClick и атрибута данных, как показано ниже.

Но просто не могу заставить его работать. См. скрипку.

var copyText = 0;

$("a.copy").on('click', function () {

  var copyText = $(this).attr('data-copy');
  return false;

}).each(function () {

  $(this).zclip({

    path: 'http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf',
    copy: copyText,
    beforeCopy: function () {

    },
    afterCopy: function () {

      alert(copyText + " has been copied!");

    }

  });

});


Пожалуйста, посмотрите мою новую скрипту здесь с zClip плагином jquery.

http://jsfiddle.net/Vr4Ky/5/


Заранее благодарим за любые предложения.


javascript jquery jsfiddle clipboard-interaction
person Joshc    schedule 09.01.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вот обновленная демонстрация, которая делает то, что вы пытаетесь сделать:

Используя этот (тот же) HTML:

<a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a>
<br />
<a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a>
<br />
<a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a>

Этот скрипт должен работать:

$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});

Вот что я сделал. Во-первых, alert, который вы добавляли через afterCopy, на самом деле является значением по умолчанию, поэтому вам не нужно добавлять для этого дополнительный код. Также к атрибутам data-copy следует обращаться через data функцию jQuery. Наконец, я помещаю ссылку SWF на тот же хост, что и JavaScript (в этом может не быть необходимости, в зависимости от кода безопасности в SWF, но это кажется необходимым, чтобы jsfiddle работал.

person Jason Sperske    schedule 09.01.2013
comment
Джейсон, большое спасибо за вашу интуитивную помощь. Наконец-то у меня есть простые ссылки для работы над моим приложением. Благодарю вас! Однако я столкнулся с небольшим конфликтом с bootstrap, который мог быть причиной моего много предыдущих попыток и не имеющих никаких результатов. Все мои копии ссылок на буфер обмена находятся в раскрывающемся списке начальной загрузки. Я сделал скрипку, чтобы вы могли увидеть проблему. jsfiddle.net/Vr4Ky/7 Как вы думаете, вы могли бы помочь мне с этим, пожалуйста? Кажется, я не могу переопределить проблему. - person Joshc; 10.01.2013
comment
Эта демонстрация больше недоступна. Любая идея, где я могу увидеть, что демо работает полностью? - person Eric Bishard; 17.12.2013
comment
@EricB Я обновил JSFiddle и увеличил версию jQuery (также я внедрил HTML, чтобы вы могли создать этот ответ с нуля без доступа к демонстрации) - person Jason Sperske; 17.12.2013
comment
На самом деле это был тот, который я добавил: jsfiddle.net/Vr4Ky/180, но вот обновленный версия вашей ссылки: jsfiddle.net/Vr4Ky/181 (с Bootstrap 2.3.2 и обновленным jQuery ) - person Jason Sperske; 17.12.2013
comment
Это помогло мне и сэкономило мне много времени. Спасибо. - person Asbar; 24.03.2015
comment
Я не уверен, почему, но это не работает в моем браузере. Я использую хром, и когда я нажимаю на элементы, ничего не происходит. Я пробовал использовать скрипт в своем приложении и не работает ни в скрипке. так странно. - person gepex; 16.06.2015
comment
@gapex Кажется, я не могу заставить это работать в вашей копии Firefox в Windows 7, я должен стряхнуть пыль с этого ответа и посмотреть, есть ли новый способ сделать это - person Jason Sperske; 16.06.2015

arrow_upward
1
arrow_downward

Используя решение Jason Sperske, я нашел способ решить проблему при использовании внутри начальной загрузки.

Вот как заставить функцию работать с раскрывающимися списками начальной загрузки.

$('.btn-group').addClass('open');
$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});
$('.btn-group').removeClass('open');

Затем этот css также необходимо добавить, чтобы остановить абсолютное позиционирование div флэш-файла за пределами элемента списка.

.dropdown-menu li {
    position: relative;
}

См. рабочую скрипку. http://jsfiddle.net/Vr4Ky/27/

person Joshc    schedule 12.01.2013