Script com jQuery

31 de janeiro de 2009 0 Por atercombr

Aqui, nós amamos Kyan unobtrusive script: script que adiciona sobre para o início de uma página da Web existente e estende-lo para adicionar funcionalidade e interação delicadeza.

É frequente utilizar uma biblioteca chamada Javascript jQuery para nos ajudar a adicionar scripts para os nossos sites, e ele tem um bom mecanismo de extensão. Vamos dar uma olhada em escrever um pequeno jQuery plugin para adicionar é um simples pedaço de funcionalidade para o nosso site: imprimir uma ligação após uma notícia.

A impressão link só funciona quando o Javascript está ativado, portanto, sem scripts para os usuários que recebem um link inativo. Isto não é particularmente agradável experiência, mas podemos fazer melhor. Vamos supor que nós queremos é a marcação:

 <button>Print this page</button>

Podemos facilmente adicionar este à parte inferior da nossa notícia <div id=”news_story”>…</div> usando jQuery:

 function addPrintButton() { $('<button>Print this page</button>').appendTo('#news_story'); }

Isto é bastante simples de compreender: quase todas as declarações em jQuery são uma selecção ou criação (neste caso, o nosso botão), seguido por um dos mais acções (neste caso, anexando-o para o elemento com um id de news_story). Precisamos também de acrescentar funcionalidade de impressão, mas pode simplesmente ser preso na mesma declaração:

 function addPrintButton() { $('<button>Print this page</button>') .click(function(){window.print();}) .appendTo('#news_story'); }

Como é que podemos chamar isso? jQuery oferece um mecanismo simples para chamar funções na página de carga com o $(function(){}) sintaxe:

 $(function(){ addPrintButton(); }); function addPrintButton() { $('<button>Print this page</button>') .click(function(){window.print();}) .appendTo('#news_story'); }

Bingo! Um botão de impressão cada notícia. Mas há ainda um truque que podemos usar para fazer isto mais flexíveis. Como disse anteriormente, um típico começa com uma declaração jQuery selector. Não seria bom se pudéssemos adicionar um botão para imprimir qualquer elemento exigido na página? Felizmente jQuery dispõe apenas de um tal mecanismo. Se nós jQuery alargar-se com a nossa função, então nós podemos usá-lo da mesma forma que as funções da biblioteca:

 $(function(){ $('#news_story').addPrintButton(); }); jQuery.fn.addPrintButton = function() { return this.each(function(){ $('<button>Print this page</button>') .click(function(){window.print();}) .appendTo(this); }); }

jQuery.fn é o conjunto de funções que jQuery sabe como resolver. Nós simplesmente acrescentar a nossa nova função para que a recolha, e certifique-se de que passamos a seleção fora de nosso código para que possamos cadeia mais funções para o efeito, se necessário.

Então lá vai: um simples jQuery plugin em 5 minutos.