Съдържание:

Поставяне на бутон за копиране в клипборда на уеб страница: 5 стъпки (със снимки)
Поставяне на бутон за копиране в клипборда на уеб страница: 5 стъпки (със снимки)

Видео: Поставяне на бутон за копиране в клипборда на уеб страница: 5 стъпки (със снимки)

Видео: Поставяне на бутон за копиране в клипборда на уеб страница: 5 стъпки (със снимки)
Видео: 5 Яки Трика за iPhone, които НЕ ЗНАЕТЕ! 2024, Ноември
Anonim
Поставяне на бутон за копиране в клипборда на уеб страница
Поставяне на бутон за копиране в клипборда на уеб страница

Това може да звучи просто и може да изглеждам глупаво, за да го поставя на Instructables, но в действителност не е толкова лесно. Има CSS, Jquery, HTML, някакъв фантастичен javascript и, о, добре, знаете.

Стъпка 1: Създайте химикалка

Създайте писалка
Създайте писалка

Има един страхотен сайт, наречен Codepen. В миналото, просто за да кодирам в HTML, трябваше

  1. Стартирайте File Explorer.
  2. Отидете в Моите документи.
  3. Създайте txt файл.
  4. Преименувайте този файл на „MyHTMLDoc.html“.
  5. Натиснете OK към диалоговия прозорец за предупреждение.
  6. Затворете File Explorer.
  7. Отворете Visual Studio, което отнема пет минути.
  8. Отворете файла във Visual Studio, което отнема още пет минути. VS е много бавен.
  9. Старт.
  10. Когато приключа, трябва да отворя файла в Edge, за да видя работата си.

Сега всичко, което трябва да направите, е

  1. Стартирайте Edge.
  2. Отидете на
  3. В горния десен ъгъл натиснете нова писалка.
  4. Стартирайте кодирането.

Вижте колко по -лесно е? Просто въведете вашите JS, CSS и HTML в съответните им полета. Резултатите се показват автоматично вдясно.

Всъщност Codepen е много по -добър, затова ви препоръчвам да започнете да създавате акаунта си точно сега. Да, мразя да бъда единствената реклама, но не мога да се сдържа. Много по -добре е. Не мога да направя нищо по въпроса.

Или, ако не искате да създадете акаунт, можете да създадете химикалка без акаунт. Можете да запишете писалката си под потребителското име „Анонимен капитан“.

Стъпка 2: Добавете препратки

Добавяне на препратки
Добавяне на препратки

Тъй като ще използваме Jquery и това (наистина) страхотно нещо, наречено "Balloon.css", първо трябва да добавим препратки. Ако сте нов, ще ви кажа как да направите това в Codepen.

  1. Щракнете върху Настройки.
  2. В зависимост от това дали препратката е таблица със стилове или скрипт, щракнете върху CSS или Javascript.
  3. Под Добавяне на външни (Javascript или CSS) добавете препратките.

Добавете:

бла бла бла: БЛААААААА !!!!

Сега премахнете това и поставете HTML маркера, свързващ към любимия ви CDN за Jquery и Balloon.css.

Стъпка 3: Код

Код
Код

Под това добавете този код.

codepen.io/slate-coding/pen/oepQpX

Копирайте/поставете кода във вашата химикалка.

Стъпка 4: Промяна на този код според вашите нужди

Промяна на този код според вашите нужди
Промяна на този код според вашите нужди

Можете да играете с писалката, колкото искате, за да отговаря на вашите нужди, след което да копирате и поставите кода, където искате.

Стъпка 5: Демо

Демонстрация
Демонстрация

codepen.io/alexvgs/pen/oepQpX

Препоръчано: