Para quem não sabe jQuery é uma biblioteca JavaScript open source leve (apenas 15kb de tamanho) que, em um tempo relativamente curto espaço de tempo se tornou uma das mais populares bibliotecas na web. Você pode estar se perguntando o que a JQuery tem a ver com a Microsoft, pois bem eu explico, desde de setembro de 2008 a Microsoft anunciou a parceria com a JQuery como biblioteca de JavaScript que será distribuída juntamente com o Visual Studio, o intuito da Microsoft não e de adquirir e modificar a biblioteca mais sim distribuí-la do jeito que ela e, deixando assim de ter um time para cuidar desse assunto e assumindo uma biblioteca open source o que e muito legal. Com essa integração passamos a ter o intellisense que desde a versão 2008 do Visual Studio já dava suporte a JavaScript agora da suporte ao JQuery facilitando ainda mais o desenvolvedor em duas atividades. Obs: A biblioteca de intellisense do JQuery ainda não e nativa do Visual Studio para ter acesse a ela e preciso fazer download de um HotFix para integração com o Visual Studio que se encontra no endereço abaixo:
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
Apos instalar o HotFix, basta adicionar o script de documentação do JQuery no seu projeto para ter todo suporte via intellisense no Visual Studio. Para baixar o script de documentação do Intellisense basta acessar este endereço:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3-vsdoc.js
Agora vamos conhecer um pouco mais sobre o JQuery e como ele pode nos ajudar em nosso dia a dia de Desenvolvedor.
jQuery
Acredito que o maior apelo da jQuery é que ela permite que você possa elegantemente e de eficiente encontrar e manipular elementos HTML com o mínimo de linhas de código possíveis e isso pode acreditar ajuda muito na implementação do seu projeto.
A jQuery da esse suporte através de uma “API”que permite que os desenvolvedores consigam fazer consultas a elementos HTML e executar comandos nos elementos encontrados. Uma das características do JQuery e que os comandos podem ser agrupados onde o resultado de um comando acaba contribuindo em outros, a biblioteca jQuery também inclui um conjunto de “APIs” de animação pode ser usada como comandos.
A combinação permite fazer algumas coisas muito legais, com apenas algumas linhas de código. Agora vamos fazer alguns exemplos de como utilizar a JQuery. Antes de começar a desenvolver com a biblioteca e preciso fazer o download da mesma que se encontra no LINQ abaixo.
http://docs.jquery.com/Downloading_jQuery
Alguns Exemplos
Para podermos utilizar o JQuery e preciso adicionar o script da biblioteca no projeto em que vamos trabalhar como na imagem abaixo:
Clique com o lado direito do mouse no WebSite e selecione a opção nova pasta coloque o nome de scripts.
Clique com o lado direito do mouse em cima da pasta script e seleciona a opção de adicionar item existente e seleciona o jquery-1.3.js Repita o procedimento para adicionar ao projeto o script de documentação do Intellisense selecionando o jquery-1.3-vsdoc.js Depois de feito tudo isso temos que arrastar o script jquery-1.3.js para a pagina para adicionarmos a referencia para o mesmo.
Como na imagem abaixo:
Pronto agora podemos começar de vez, o processo parece meio complicado mais não e são os procedimentos básicos para se utilizar qualquer script, e você vera o beneficio que trará. Chega de lero lero vamos ao que interessa.
Vamos fazer um exemplo básico de exibir uma mensagem de “alert” na tela utilizando um asp:button.
Adicione um botão asp:Button na pagina.
<asp:Button ID="Button1" runat="server" Text="Button" />
Nota: para adcionarmos eventos no load da pagina basta incluirmos o script abaixo e ai todo código escrito dentro dele será executado no evento load da pagina.
<script type="text/javascript">
$(document).ready(function() {
// add code here
});
</script>
Agora vamos adicionar os comandos para disparar o “alert ” no click do botão.
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
alert("Hello world!");
});
});
</script>
Quando clicamos no botão:
Agora vamos fazer uma animação no Clique de um botão utilizando JQuery.
No primeiro exemplo fizemos algo bem simples um tradicional “Hello world” agora vamos seguir a mesma linha e fazer uma animação utilizando um <asp:Panel>. Agora na pagina vamos adicionar um imput button e o panel como no codigo abaixo:
<form id="form1" runat="server">
<input id="btnAnimate" type="button" value="Animate" />
<asp:Panel ID="Panel1" runat="server">
Some sample text in this panel
</asp:Panel>
</form>
Também vamos acrescentar um CSS para embelezar o div (lembrando asp: Painel torna como uma <div> quando a pagina e carregada). O <style> tag tem sido mantida no elemento <head> da página.
<style type="text/css">
div {
background-color:#D5EDEF;
color:#4f6b72;
width:50px;
border: 1px solid #C1DAD7;
}
</style>
Por fim vamos adicionar o código jQuery para animar o painel quando clicarmos no botão.Vamos utilizar a função 'animar'. Observe como o IntelliSense nos ajuda a com os parâmetros.
Depois de adicionar nos parâmetros para a função animar (), o código completo será o seguinte:
<script type="text/javascript">
$(document).ready(function() {
$("#btnAnimate").click(function() {
$("#Panel1").animate(
{
width: "350px",
opacity: 0.5,
fontSize: "16px"
}, 1800);
});
});
</script>
Aqui, a animação ocorre enquanto alteramos a largura, a opacidade ea font do painel quando o botão é clicado. O valor'1800 'representa o número de milissegundos para executar a animação.
Veja como ficou após a execução:
Antes da animação:
Após a animação:
Agora vamos fazer um exemplo de como selecionar e deselecionar todos os itens de uma CheckBox list, notem como e bem simples o código.
Primeiro adicionamos o? Script “js” do JQuery:
<script src="scripts/jquery-1.3.js" type="text/javascript"></script>
Depois arrastamos da ToolBox o objeto CheckBoxList e um unico CheckBox:
<asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />
<asp:CheckBoxList ID="cbList" runat="server"></asp:CheckBoxList>
No load da pagina ASPX iremos carregar o CheckBoxList utilizando o código abaixo:
if (!Page.IsPostBack)
{
cbList.Items.Add(new ListItem("Items 1", "Items 1"));
cbList.Items.Add(new ListItem("Items 2", "Items 2"));
cbList.Items.Add(new ListItem("Items 3", "Items 3"));
cbList.Items.Add(new ListItem("Items 4", "Items 4"));
cbList.Items.Add(new ListItem("Items 5", "Items 5"));
}
Agora vamos fazer o código JQuery pra selecionar e deselecionar os CheckBoxs, se fossemos fazer isso utilizando um Javascript normal teríamos que loopar todos os controles Checando um por um, daria um trabalhinho considerável, vamos ver como fazemos isso com o JQuery.
script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
});
});
</script>
Veja como vai funcionar:
Antes do Clique:
E isso pessoal, espero ter contribuído pelo menos um pouco com seu crescimento profissional, a temos eu queria escrever sobre este assunto que e uma novidade que vai ajudar muito em nosso dia a dia, esta biblioteca esta so começando a ser implementada e já faz coisas fantásticas o que fiz aqui e so um pequeno exemplo do que se pode fazer com a ferramenta, vale apena estudar mais afundo.
Bons Códigos...
Se inscrever