Mettre un bouton Copier dans le presse-papiers sur une page Web : 5 étapes (avec des images)
Mettre un bouton Copier dans le presse-papiers sur une page Web : 5 étapes (avec des images)

Table des matières:

Anonim
Mettre un bouton Copier dans le presse-papiers sur une page Web
Mettre un bouton Copier dans le presse-papiers sur une page Web

Cela peut sembler simple, et je pourrais sembler idiot pour le mettre sur Instructables, mais en réalité, ce n'est pas si facile. Il y a CSS, Jquery, HTML, du javascript sophistiqué et, eh bien, vous savez.

Étape 1: créer un stylo

Créer un stylo
Créer un stylo

Il y a ce site sympa appelé Codepen. Dans le passé, juste pour coder en HTML, je devais

  1. Lancez l'explorateur de fichiers.
  2. Allez dans Mes documents.
  3. Créez un fichier txt.
  4. Renommez ce fichier en "MyHTMLDoc.html".
  5. Appuyez sur OK dans la boîte de dialogue d'avertissement.
  6. Fermez l'explorateur de fichiers.
  7. Ouvrez Visual Studio, ce qui prend cinq minutes.
  8. Ouvrez le fichier dans Visual Studio, ce qui prend encore cinq minutes. VS est très lent.
  9. Début.
  10. Lorsque j'ai terminé, je dois ouvrir le fichier dans Edge pour voir mon travail.

Maintenant, tout ce que vous avez à faire est

  1. Lancez Edge.
  2. Allez sur
  3. Dans le coin supérieur droit, appuyez sur nouveau Stylo.
  4. Commencez à coder.

Vous voyez à quel point c'est plus simple ? Entrez simplement votre JS, CSS et HTML dans leurs cases respectives. Les résultats s'affichent automatiquement sur la droite.

En fait, Codepen est tellement mieux, que je vous recommande d'aller créer votre compte dès maintenant. Oui, je déteste être celui qui fait de la publicité, mais je n'y peux rien. C'est beaucoup mieux. Je n'y peux rien.

Ou, si vous ne voulez pas créer de compte, vous pouvez créer un stylo sans compte. Vous pouvez enregistrer votre stylo sous le nom d'utilisateur "Capitaine Anonyme".

Étape 2: ajouter des références

Ajouter des références
Ajouter des références

Puisque nous allons utiliser Jquery et ce truc (vraiment) cool appelé "Balloon.css", nous devons d'abord ajouter des références. Si vous êtes nouveau, je vais vous expliquer comment faire cela dans Codepen.

  1. Cliquez sur Paramètres.
  2. Selon que la référence est une feuille de style ou un script, cliquez sur CSS ou Javascript.
  3. Sous Ajouter un externe (Javascript ou CSS), ajoutez les références.

Ajouter:

bla bla bla: BLAAAAAAA !!!!

Maintenant, supprimez cela et insérez la balise HTML reliant votre CDN préféré pour Jquery et Balloon.css.

Étape 3: Coder

Code
Code

En dessous, ajoutez ce code.

codepen.io/slate-coding/pen/oepQpX

Copiez/collez le code dans votre stylo.

Étape 4: Modifier ce code en fonction de vos besoins

Changer ce code pour répondre à vos besoins
Changer ce code pour répondre à vos besoins

Vous pouvez manipuler autant que vous le souhaitez avec le stylet pour répondre à vos besoins, puis copier-coller le code où vous le souhaitez.

Étape 5: Démo

Démo
Démo

codepen.io/alexvgs/pen/oepQpX