Diversão com jQuery plug-ins

A biblioteca jQuery é impressionante por si só, e quando você adicionar bibliotecas como jQuery UI e jQuery Mobile, você pode ver exatamente o quão poderoso esta ferramenta é. Mas isso não é tudo. Os desenvolvedores do jQuery construído em um mecanismo de extensão incrível que torna mais fácil para que terceiros possam adicionar novas extensões chamadas plugue

-ins para jQuery.

Os detalhes sobre cada plug-in variam, mas em geral, você tem que fazer o seguinte para fazê-los funcionar:

1. Link para jQuery.

   Todos estes plug-ins estender a funcionalidade do jQuery, então eles começam com a suposição de que você está usando jQuery em seu site.

2. Baixar uma biblioteca adicional.

   Os plug-ins são todos arquivos, principalmente de javascript, assim que você quer instalá-los em seu próprio servidor ou fazer uma ligação. Alguns dos plug-ins incluem arquivos adicionais e instruções, por isso não deixe de verificar os detalhes sobre o plug-in página.

3. Adicionar um nisso() função.

   A maioria das páginas jQuery ter algum tipo de inicialização e, em quase todos os plug-in precisa ser inicializado. Certifique-se de adicionar um nisso() em função da forma normal.

4. Chamar a função jQuery apropriado.

   A maioria dos plug-ins simplesmente adicionar novas funções para jQuery. Para a maior parte, a execução de um plug-in simplesmente requer a aplicação de novas funções jQuery para um nó ou nós na sua página.

Há literalmente centenas e centenas de grandes plug-ins disponíveis. Você pode ver um monte deles na Livros de Andy. Você pode encontrar muitos mais plug-ins no Plugin Registry jQuery.

ipwEditor

Este plug-in legal faz parte da sua página web editável. Você pode escolher uma forma simples de edição ou algo mais sofisticado com a ferramenta FCKedit. (Depois de começar a jogar com esta ferramenta, você vai reconhecê-lo imediatamente, porque você provavelmente já usou dezenas de vezes como um usuário). A ipwEditor não salva suas páginas. Você ainda vai precisar de algum tipo de AJAX e codificação do lado do servidor para fazer isso. No entanto, esta é uma maneira muito fácil de construir um CMS simplista.

Flot

Às vezes suas páginas da web precisa exibir algum tipo de dados. Há uma série de poderosos gráficos plug-ins que você pode usar. Uma opção fácil e poderoso é chamado Flot.

o flot programa permite que você construa um gráfico a partir de uma matriz 2D de pontos de dados. Você pode extrair os dados de um banco de dados, recolher junto dos utilizadores, ou o que quer. o flot plug-in constrói uma lona e gera um de uma série de gráficos padrão. Esta é uma ferramenta especialmente poderosa se você precisa fazer gráficos em tempo real em seu site.

Nuvem

Nos últimos anos, tornou-se popular para oferta visualizações de dados, ou modos para ilustrar dados. Um tal mecanismo é a tag cloud. Essencialmente esta ferramenta coloca um número de palavras em posições semi-aleatórios. Em uma nuvem de tags típico, a posição, tamanho e cor das palavras são usados ​​para representar a força relativa e relação dos termos. o nuvem jQuery plug-in faz com que seja muito fácil para construir suas próprias nuvens de tags. Você pode converter qualquer lista de HTML a uma nuvem de tags. Basta adicionar um opcional valor atribuir a cada elemento da lista, e o plug-in muda automaticamente o tamanho e o peso do elemento de acordo com o valor.

tablesorter

programas AJAX muitas vezes envolvem a recuperação de dados, que é frequentemente exibidos em uma tabela HTML. o plug-in tablesorter permite ao usuário classificar facilmente uma tabela clicando em um cabeçalho.

Quando o usuário clica no primeiro cabeçalho do nome, a tabela é classificada por nomes em ordem alfabética. Clique no primeiro cabeçalho de nome novamente para classificar por nome em ordem inversa. O comportamento padrão do tablesorter permite classificar por qualquer campo de cabeçalho.

Droppy

menus drop-down se tornaram uma ferramenta importante na usabilidade websites. Há centenas de jQuery plug-ins para lidar com este recurso. Uma boa opção é Droppy porque é muito fácil de usar.

A maioria dos sistemas de navegação são, em última instância aninhada listas de links. O plug-in Droppy simplesmente leva um ul com um monte de links (aninhados tão profundamente como você deseja) e transforma-lo em um menu drop-down bem formatado.

Galleria

galerias de imagem são outro tópico plug-in muito popular. Muitas galerias de imagem estão disponíveis para jogar. Galleria é um, poderoso galeria de imagem popular, e não requer qualquer script do lado do servidor.

A galeria de imagens padrão tem algumas grandes características:

• As imagens são pré-carregado: Cada imagem é carregada na memória quando a página é inicializado, assim não haverá nenhum atraso quando o usuário alterna entre imagens.

• A ferramenta galeria automaticamente cria imagens em miniatura: Os (miniatura) indexar imagens menores são criadas automaticamente e adicionado à página.

• Ao clicar em uma miniatura expande-lo na área de visualização: A maior área de visualização contém uma versão maior da imagem atual.

• Clicando sobre a área de visualização permite que você visualize a imagem seguinte: O comportamento padrão permite que você facilmente alternar entre imagens com cliques do mouse.

• A saída é baseado em CSS: Use o arquivo CSS incluído para gerenciar a exibição de sua página, incluindo como e onde as miniaturas ir, quão grande é a imagem de exibição é, e muito mais.

• Tem muitas opções: O plug-in Galleria é muito personalizável. Possui muitas opções avançadas. Verifique a documentação para mais.

Usando Galleria é muito parecido com qualquer outro jQuery plug-in. Adicionar os scripts apropriados, escrever algum HTML básico, e adicionar um nó jQuery mágica:

1. Importar os scripts.

   Você vai precisar de jQuery como sempre, bem como jquery.galleria ea folha galleria.css estilo CSS.

2. Criar uma lista de imagens.

   Faça cada item da lista uma imagem.

3. Adicione o galleria () nó à lista.

   Isso é realmente tudo que você precisa fazer.

4. Jogue com as opções.

   Olhar sobre a documentação para algumas ótimas opções, incluindo a capacidade de usar miniaturas personalizadas, especificar o seu próprio recipiente de saída, e executar funções de retorno quando o usuário seleciona uma imagem ou miniatura.