Bom pessoal resolvi
mostrar a todos o quanto é fácil e rápido usar apenas javascript e html para
copiar um código apenas com um clique. Usarei apenas o editor Visual Studio .NET
2005, Javascript e HTML.
Geralmente vemos
na internet ou aplicação local, que com um clique o Windows executa e copia
todo código mostrado na aplicação e assim podemos colar em qualquer parte de
qualquer outro documento. Esse é o objetivo do Copiando Script.
HTML Code
O primeiro de
tudo, criei um HTML com table, tr e td. Dentro da td foi colado um código
normal com a tag <pre> onde fica o código c# do programa pronto para ser
copiado. (Referência Code.1.1)
|
<fieldset style="width:50%"> <table width="100%"
cellspacing="0"
cellpadding="5"> <tr style="background-color:#f1f1f1; font-family:Verdana;
font-size:11px;"> <td align="left">Código C# </td> <td align="right"> <span onclick="CopyCode(this)" style="cursor:hand"><b>[ Copiar
Código ]</b></span> </td> </tr> <tr> <td style="background-color:#dedede;" colspan="2"> <pre><br />if(i==0){
i+=1; } <br
/>Response.Write(i.ToString());</pre> </td> </tr> </table> </fieldset> |
Referência:
Code.1.1
Note que o HTML é
simples com algumas tags que talvez você nunca tenha prestado atenção. Dentro
da segunda td, possui uma tag <span>. (Referência Code.1.2)
|
<span onclick="
CopyCode(this)" style="cursor:hand"><b>[ Copiar Código
]</b></span> |
Referência: Code.1.2
Essa tag
<span> possui o atributo onclick para chamar um link ou uma função
JavaScript. O segundo código que talvez não tenha prestado atenção é o
<pre> que tem a finalidade de mostrar o código descrito da mesma forma
que está no código HTML. (Referência Code.1.3)
|
<pre><br />if(i==0){
i+=1; } <br
/>Response.Write(i.ToString());</pre> |
Referência: Code.1.3
O resultado final
da tela HTML criada anteriormente é a seguinte. (Referência Code.1.4)
Referência: Code.1.4
Depois de ter
todo código HTML construído, basta fazer a parte
|
<script type="text/javascript"> function
CopyCode(key) { var
trElements = document.all.tags("tr"); var i; for(i =
0; i < trElements.length; ++i) { if(key.parentElement.parentElement.parentElement
== trElements[i].parentElement) { window.clipboardData.setData("Text", trElements[i].innerText); } } } </script> |
Referência:
Code.1.5
A function
chama-se CopyCode(key) que espera um
parâmetro de entrada chamado key. Percorro
todas as tags do tipo tr e se a chave
for igual ao elemento, executo o comando responsável para copiar um Text dentro da tr.
O código
responsável para copiar o texto é o:
|
window.clipboardData.setData("Text", trElements[i].innerText); |
Referência: Code.1.6
Para não ficar
totalmente perdido, segue todo código da página para melhor entendimento.
(Referência Code.1.7)
|
<script type="text/javascript"> function CopyCode(key) { var
trElements = document.all.tags("tr"); var i; for(i =
0; i < trElements.length; ++i) { if(key.parentElement.parentElement.parentElement
== trElements[i].parentElement) { window.clipboardData.setData("Text", trElements[i].innerText); } } } </script> <fieldset style="width:50%"> <table width="100%"
cellspacing="0"
cellpadding="5"> <tr style="background-color:#f1f1f1; font-family:Verdana;
font-size:11px;"> <td align="left">Código C# </td> <td align="right"> <span onclick="CopyCode(this)" style="cursor:hand"><b>[ Copiar
Código ]</b></span> </td> </tr> <tr> <td style="background-color:#dedede;" colspan="2"> <pre><br />if(i==0){
i+=1; } <br
/>Response.Write(i.ToString());</pre> </td> </tr> </table> </fieldset> |
Referência:
Code.1.7
Mostrado todo
código, mostrarei o resultado final através do layout.
Referência:
Code.1.8
Cliquei em cima
do [ Copiar Código ]. Abri o notepad e fui ao menu Editar > Colar. (Referência Code.1.9)
Referência:
Code.1.9
Por fim, escolhi
a opção Colar. Veja o resultado final
dentro do programa notepad. (Referência Code.1.10)
Referência:
Code.1.10
Note que na
referência Code.1.10 foi colado exatamente o código C#.NET descrito
anteriormente. Bom, esse foi o meu objetivo, espero que tenham gostado.
Qualquer dúvida, favor entrar em contato através do e-mail mauricio@aspneti.com.
