Javascript - копиране в клипборда, използвайки ИТ шеф
В тази статия ще разгледаме сценария clipboard.js. който може да се използва за организиране на копирането на уеб съдържание в клипборда.
clipboard.js - JS скрипт, за да копирате текст в клипборда
Clipboard.js - модерна скрипт, който се използва, за да се даде възможност на потребителя по-лесно да копирате (например, чрез натискане на бутон), част от информацията, предоставена на уеб страницата в клипборда. Работата на този скрипт се основава на API Подбор и ExecCommand.
Сценарият работи в браузърите Chrome 42+, Firefox 41+, IE 9+ Opera 29 +, Safari 8.
Ползи clipboard.js скрипт:
- То не изисква Flash (като ZeroClipboard) за тяхната работа.
- Все още няма зависимости, а именно, То не изисква присъствието на произведенията му, включително библиотеката JQuery.
- Тя е с много малки размери.
Основи clipboard.js
Изтегли ZIP-файл, го разархивирайте и копирайте файла в подходяща сайта clipboard.min.js директория.
Свържете clipboard.min.js файл с желаната страница на сайта.
Инициализиране на клипборда за необходимите елементи на страницата, като го изпратите DOM-селектор, HTML-елемент или списък, състоящ се от HTML-елементи. Т.е. необходими конструктор функция за прехвърляне на клипборда елементи, които кликват по които ще бъдат копирани в клипборда.
Така например, се инициализира в клипборда за всички елементи на страницата с клас .btn-клипборда.
Добави data- * атрибути инициализират HTML елементи.
Обмислете следните опции:
2. Нарежете на текст от друг елемент
Пример за създаване на бутон за копиране на данни в клипборда
Помислете за един пример, в който ще се създаде бутон за предварително елемент. когато се натисне, съдържанието на този елемент (предварително), ще се копира в клипборда.
Допълнителните функции clipboard.js
Помислете за основните функции, предлагани JS-скрипт clipboard.js.
Събития clipboard.js
Действия при копиране на информация в клипборда може да се следи чрез clipboard.js събития. Общо налични 2 събитие. Първото събитие (по успех) се появява след успешното копие, а вторият (грешката) се появява в случай на грешка (недостатъчност).
Забележка източник копие с функцията
Clipboard.js ви позволява да определите целта (т, чието съдържание искате да копирате или текст) не само чрез данни-атрибути, но и динамично използване функции. Това ви позволява да не се правят никакви промени в кода на HTML, т.е. Това елиминира необходимостта да се добави по отношение на данните и атрибутите.
Нека разгледаме следните примери:
1. настройка Dynamic цел (цел).
2. Динамична настройка на текста.
Примери, използващи допълнителни възможности clipboard.js
Помислете за няколко примера, които ще ползвате допълнителни възможности, предлагани от clipboard.js сценария.
1. Пример за динамичното създаване на бутони за копиране за всички предварителни елементи на страницата.
2. Един пример, в който ние използваме събитията clipboard.js да създаде интерактивен процес на копиране в клипборда.