Colocando um botão Copiar para a área de transferência em uma página da web: 5 etapas (com imagens)
Colocando um botão Copiar para a área de transferência em uma página da web: 5 etapas (com imagens)

Índice:

Anonim
Colocando um botão Copiar para a área de transferência em uma página da web
Colocando um botão Copiar para a área de transferência em uma página da web

Isso pode parecer simples, e eu posso parecer bobo por colocá-lo no Instructables, mas na realidade, não é tão fácil. Há CSS, Jquery, HTML, alguns javascript sofisticados e, tudo bem, você sabe.

Etapa 1: crie uma caneta

Crie uma caneta
Crie uma caneta

Existe um site legal chamado Codepen. No passado, apenas para codificar em HTML, eu costumava ter que

  1. Abra o File Explorer.
  2. Vá para Meus Documentos.
  3. Crie um arquivo txt.
  4. Renomeie esse arquivo para "MyHTMLDoc.html".
  5. Clique em OK para a caixa de diálogo de aviso.
  6. Feche o Explorador de Arquivos.
  7. Abra o Visual Studio, que leva cinco minutos.
  8. Abra o arquivo no Visual Studio, o que leva mais cinco minutos. O VS é muito lento.
  9. Começar.
  10. Quando terminar, devo abrir o arquivo no Edge para ver meu trabalho.

Agora, tudo que você precisa fazer é

  1. Launch Edge.
  2. Acesse
  3. No canto superior direito, clique em nova caneta.
  4. Comece a codificação.

Vê como é mais fácil? Basta inserir seu JS, CSS e HTML em suas respectivas caixas. Os resultados aparecem automaticamente à direita.

Na verdade, Codepen é muuuuito melhor, que recomendo que você crie sua conta agora mesmo. Sim, odeio ser o único a anunciar, mas não consigo evitar. É muito melhor. Não há nada que eu possa fazer a respeito.

Ou, se você não quiser criar uma conta, você pode criar uma caneta sem uma conta. Você pode salvar sua caneta com o nome de usuário "Capitão Anônimo".

Etapa 2: adicionar referências

Adicionar Referências
Adicionar Referências

Como usaremos o Jquery e esse (realmente) legal, oajammy chamado "Balloon.css", devemos adicionar referências primeiro. Se você é novo, vou te dizer como fazer isso no Codepen.

  1. Clique em Configurações.
  2. Dependendo se a referência é uma folha de estilo ou um script, clique em CSS ou Javascript.
  3. Em Adicionar externo (Javascript ou CSS), adicione as referências.

Adicionar:

bla bla bla: BLAAAAAAA !!!!

Agora remova isso e coloque a tag HTML com um link para seu CDN favorito para Jquery e Balloon.css.

Etapa 3: Código

Código
Código

Abaixo disso, adicione este código.

codepen.io/slate-coding/pen/oepQpX

Copie / cole o código em sua caneta.

Etapa 4: Mudar esse código para atender às suas necessidades

Mudando esse código para atender às suas necessidades
Mudando esse código para atender às suas necessidades

Você pode mexer o quanto quiser com a caneta para atender às suas necessidades e, em seguida, copiar e colar o código onde quiser.

Etapa 5: demonstração

Demo
Demo

codepen.io/alexvgs/pen/oepQpX