Копиране в буфера

"Копиране в буферната памет" - функционалност, която всички ние използваме няколко пъти на ден, но клиент API на имат своите недостатъци; някои от тях са дразни изход прозорец с въпроса: "Сигурен ли си?" всеки път, когато се опитате да копирате нещо, но това не е много добре отразени в използваемостта и цялостната картина на приложението или сайта.

Преди няколко години, аз говорих за ZeroClipboard - скрипт ви позволява да копирате в клипборда, използвайки Flash. Знам, че всички ние мразим Flash, но функционалността над всичко друго, и трябва да призная - това е приличен решение. Сега, ние имаме нещо по-добро от една библиотека clipboard.js. То не изисква Flash, JQuery наличие на тип рамка и да работят във всички съвременни браузъри:

Инсталиране clipboard.js

Можете да го инсталирате с помощта на националните ръководители или беседка:

Ако не сте инсталирали пакетни мениджъри, изтеглете ZIP-файл с нас, или от официалния сайт.

Свързване clipboard.js

Първо, свържете папката дист г скрипт намира или да го изтеглите от CDN преди затварянето на тялото:

Сега трябва да се създаде инстанция, минавайки DOM-селектор, HTML елемент, или списък с HTML-елементи.

Вътре, ние трябва да се съберат всички елементи, които съответстват на селектора и да се свързват нашите приемници събития всеки. Но знаете ли какво? Ако имате, например, сто съвпадение на елементи, операцията може да консумират много памет. Ето защо, ние ще използваме предаване на събитие, което замества този на събитието множество приемници. В крайна сметка, #perfmatters.

Примери копиране в клипборда

Кажете хубаво: ние живеем в ерата на ренесанс декларативно, така че решихме да се възползваме от данни на HTML5 атрибути за по-добра използваемост.

Доста често, който искате да копирате съдържанието от друга клетка. Можете да направите това чрез добавяне на данни клипборда-мишена атрибут за задействането си елемент. Стойността, която се превърне в този атрибут трябва да съвпада с другия член селектор.

Нарежете на текст от друг елемент

Копиране в клипборда и нарязани

Както можете да очаквате, нарязани на действие работи само на елементи или .</p> <p>В действителност, ние не се нуждаем друг елемент, за да копирате съдържанието от него. Можете просто да включва данни клипборда текст атрибут на спусъка елемент.</p><p>Копиране в буфера</p> <p>Има моменти, когато трябва да се прилагат за обратна връзка от потребител или да се запази това, което е бил избран след копие / нарязани на работа. Ето защо първите обработени потребителски събития, като успехът и грешката. така че да могат да четат и прилагат своя собствена логика.</p> <p>За да се демонстрира, отворите конзолата :)</p> <h6>допълнителни функции</h6> <p>Ако не искате да променяте HTML-код - за вас има много удобен API. Всичко, което трябва да се направи - е да се декларира функция да си свърши работата, и връща стойност. Например, ако искате да зададете динамично мишена. което трябва да върнете устройството:</p> <p>Ако искате да зададете динамично текста. трябва да се върне низа:</p> <p>Освен това, ако сте работили с прилагане на една страница (SPA), можете да управлявате жизнения цикъл на DOM по-точно. Ето как да се почисти събития и предмети, които ние създаваме:</p> <p>No Flash, просто API, и работи във всички основни браузъри! Всичко това прави clipboard.js привлекателни за уеб разработчици. Флаш забавящи дни са преброени - да живее уеб технология!</p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Копиране в буферната памет (буфер)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> 2D игра на Unity. Подробни насоки. част 1 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_qvm8sbojsv0kmq5b58md.webp" width="250" height="140" title="Копиране в буферната памет (буфер)" alt="Копиране в буфера" ></div></p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_hgpdw1sj6iwh8ya00rue.webp" width="250" height="140" title="Копиране в клипборда (обмен)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> Работа с Unity в 2D <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Копиране в буферната памет (буфер)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> 2D игра на Unity. Подробни насоки. част 3 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Копиране в клипборда (единство игра ПОДРОБНА Unity)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> 2D игра на Unity. Подробни насоки. част 4 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Копиране в буферната памет (буфер)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> 2D игра на Unity. Подробни насоки. част 5 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Копиране в клипборда (единство Unity игра)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> 2D игра на Unity. Подробни насоки. част 6 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_pkcfqsgik8f4jtjtnkdq.webp" width="250" height="140" title="Копиране в буферната памет (буфер)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> новата GUI начинаещи единство. Част 2. <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_pkcfqsgik8f4jtjtnkdq.webp" width="250" height="140" title="Копиране в клипборда (обмен)" alt="Копиране в буфера" ></div></p> <ul> <li>единство</li> </ul> новата GUI начинаещи единство. Част 1. </div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/tatuirovka-napravil-ili-ne.html">Татуировка направил или не</a></li> <li><a href="/articles/biologichni-osobenosti-na-zele-kato-skladovo.html">Биологични особености на зеле като складово помещение - Анализ на селскостопанските дейности</a></li> <li><a href="/articles/rjapa-gorchiv-kak-da-premahnete-gorchivinata.html">Ряпа горчив как да премахнете горчивината</a></li> <li><a href="/articles/mladite-momchetata-na-chertezhite-na-fabo-na.html">Младите момчетата на чертежите на Fabo на изпълнителя</a></li> <li><a href="/articles/gipsovi-ukrasi.html">гипсови украси</a></li> <li><a href="/articles/estel-profesionalen-anti-zhlt-efekt-krem-60-ml.html">Естел професионален анти-жълт ефект крем 60 мл</a></li> <li><a href="/articles/kakvo-belo-izberete-kamerier-vrha.html">Какво бельо изберете - Камериер върха</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/tjaloto-kato-mestoobitanie.html">Тялото като местообитание</a></li> <li><a href="/articles/feerija-na-proekta-na-svatba-v-kuban-muzikalno.html">феерия на проекта - на сватба в Кубан - музикално образование</a></li> <li><a href="/articles/podemnici-elektrotelferi-proizvodstvo-blgarija.html">Подемници (електротелфери) - производство България, цена, опаковане</a></li> <li><a href="/articles/fokust-do-bezkrajnost-v-tsifrozerkalnogo-kanon-s.html">Фокусът до безкрайност в tsifrozerkalnogo канон с кита - общата астрономическа конференция</a></li> <li><a href="/articles/pozharni-na-balkona-kojto-da-pozvoli-da-se-namali.html">Пожарни на балкона, който да позволи да се намали, кокетни тераси, чиста, дизайн, фотография,</a></li> <li><a href="/articles/ot-kakvo-da-obleka-shifon-riza-riza-na-zhenite-s.html">От какво да облека шифон риза риза на жените с лъкове (37 снимки) дамска мода</a></li> <li><a href="/articles/lekarstva-za-lechenie-holecistit.html">лекарства за лечение - Холецистит</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2024</p> <ul> <li><a href="/articles/demontazh-i-montazh-na-generatora-mitsubishi.html">Демонтаж и монтаж на генератора - Mitsubishi Lancer 9 (Мицубиши Лансер)</a></li> <li><a href="/articles/kulinarna-vie-marokanski-pile-ss-zeleni-maslini-i.html">Кулинарна Вие марокански пиле със зелени маслини и лимон - РИА Новости</a></li> <li><a href="/articles/advent-kalendar-ss-sobstvenite-si-rce-izraboteni.html">Адвент календар със собствените си ръце, изработени от хартия и картон</a></li> <li><a href="/articles/recepti-za-salati-s-rjapa-37-varianta-ss-snimki.html">Рецепти за салати с ряпа, 37 варианта със снимки</a></li> <li><a href="/articles/pechat-njg-stranicata-na-den.html">Печат NJG страницата на ден</a></li> <li><a href="/articles/prvichna-sila-za-wwe-statii-directory-sajt-na.html">Първична сила за - WWE - Статии Directory - сайт на борба</a></li> <li><a href="/articles/fokus-dumata-fokusa.html">Фокус - думата фокуса</a></li> </ul> </div> </footer></div> </body> </html>