jQuery копируем текст в буфер обмена

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

jQuery zClip - копируем текст в буфер обмена

Для решения нашей задачи: скопировать текст в буфер обмена, я остановился на jQuery плагине - zClip.
Основная причина выбора - маленький размер и достаточный функционал.

Подключаем jQuery zClip к себе в проект

1. Для начала необходимо скачать сам файл плагина:

Жмем на кнопку указанную на картинке, чтобы скачать минимизированную версию плагина.
 

 
2. Для работы плагина нам нужен файл ZeroClipboard.swf, т.к. плагин работает с использованием Flash. Скачать этот файл на странице плагина у меня не получилось, но на гит-хабе он есть:

 

 
3. После того как все скачано, добавляем файлы к себе в проект

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Вот такая структура получилась у меня:

 

Используем jQuery zClip для копирования текста в буфер обмена

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

jQuery(selector).zclip({options});

 
Табличку с основными настройками плагина я скопировал с хит-хаба, не переводил, там все довольно понятно:

Option	Default value	Description
path	'ZeroClipboard.swf'	The path to ZeroClipboard.swf
copy	null	String to copy or function that returns a string to copy
afterCopy	null	Function to execute after copying
beforeCopy	null	Function to execute before copying
clickAfter	true	Relay a click event to the element bound to after copying
setHandCursor	true	Set the cursor to pointer
setCSSEffects	true	Add hover and active classes to the element bound to

 

ВАЖНО!!! У плагина два обязательных свойства: path и copy

 

Работа с плагином jQuery zClip для копирования текста в буфер обмена

Для тестирования работы плагина я сделал три примера:
Первый - Использование плагина только с двумя обязательными опциями

    $(".default").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('.default').text()
    });

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

Второй - Использование плагина с пустыми функциями обратного отклика

    $(".no-feedback").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('.no-feedback').text(),
        beforeCopy:function(){},
        afterCopy:function(){}
    });

Текст копируется и нет никакого уведомления об этом!
 

Третий - Использование плагина с функциями обратного отклика

    $(".feedback").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('.feedback').text(),
        beforeCopy:function(){
            $(this).css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            alert("Текст скопирован в буфер обмена!");
            alert("И мы изменим цвет фона и текста :)");
            $(this).css('background','green');
            $(this).css('color','white');
        }
    });

В этом примере мы настроили свои уведомления и сделали некоторые изменения стиля для скопированного текста.
 

Что можно сказать об этом плагине, по копированию текста в буфер обмена - то что он вполне справляется с возложенными на него задачами и имеет хороший функционал для самых изящных его применениях 🙂
 

Рубрика: jQuery