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 em JavaScript. A idéia
é percorrer uma tr e copiar o código dentro dela. (Referência Code.1.5)
|
<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.
Mauricio Junior
www.aspneti.com
www.ascompras.com