Um plugin é uma ferramenta de código reutilizável escrita em um arquivo JavaScript padrão. Esses arquivos fornecem métodos jQuery úteis que podem ser usados em conjunto com os métodos da estrutura jQuery.
Vamos ver alguns plug-ins disponíveis e exemplos de como usá-los
Plugin Pagepilling ou Stacked Page
PagePiling.js é um plugin jQuery para navegar entre as seções de um site, rolando com o mouse como se fossem slides em um menu, usando as setas do teclado ou girando a roda do mouse, todas as seções estão no mesmo site. A rolagem é vertical, portanto, a página está empilhada.
- Começar
- Temary
- JQuery
O objetivo deste tutorial é apresentar plugins
da biblioteca JavaScript JQUERY
- 1 - Introdução ao jQuery
- 2 - Programação Básica com jQuery
- 3 - Efeitos avançados com jQuery
Uma biblioteca JavaScript para escrever menos e fazer mais
ExemploA configuração é feita invocando a função pagepiling, onde indicamos o id do menu, a seguir indicamos o nome de cada seção, indicamos a cor de fundo de cada seção e a seguir na navegação correta indicamos o nome que aparecerá.
$ ('# pagina'). pagepiling ({menu: '#menu', âncoras: ['iniciar', 'seção', 'seçãob'], seçõesCor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navegação: {' posição ':' direita ',' dicas ': [' Página inicial ',' Seção A ',' Seção B ']}A classe de seção é aquela usada pelo Plugin JQuery Para reconhecer cada seção, a aula de introdução é aquela que indicamos para iniciar o conteúdo de uma seção.
Plug-in classificável para classificar listas
Este plugin é muito útil para reordenar listas arrastando com o mouse e trocando itens. O wordpress cms usa este plugin para reordenar categorias, posts e páginas.
Vamos fazer um exemplo, suponha que temos uma lista de um time inicial de jogadores e um time substituto, também temos uma lista de jogadores reservas. Faremos essas três listas e por meio do plugin classificável, poderemos trocar a lista de jogadores simplesmente arrastando seu nome com o mouse para a lista que queremos colocar ou mudar sua posição dentro da mesma lista.
jQuery Sortable - Lista de jogadoresjQuery Sortable - dono da equipe do jogador
- Jose
- Alberto
- Charles
- Item 4
- Javier
- molduras
- Daniel
- Genaro
- Mario
- Fernan
- Jacinto
- Manuel
- Silvano
Como criar meu próprio plugin jQuery?
Um plugin jQuery é um script ou um novo método que usamos para criar uma nova funcionalidade, estendendo ou facilitando as possibilidades que o jQuery nos oferece. Para criar um plugin, devemos declarar uma função e programar a funcionalidade de forma genérica para que possa ser reaproveitado em qualquer página ou site.
Devemos analisar e levar em consideração que ao incluir nosso plugin no jQuery não temos conflito com nenhuma outra biblioteca ou função ou mesmo com arquivos css que possam alterar o desempenho de nosso plugin. jQuery nos permite definir plug-ins de maneiras diferentes. Os elementos de um site não podem ser manipulados com segurança até que o documento seja totalmente carregado no navegador. jQuery detecta este estado para determinar quando os elementos html podem ser acessados.
O evento .ready () só será executado uma vez que a web tenha sido carregada e antes de ser mostrada no navegador, .ready () tem o propósito de executar alguma função imediatamente após carregar todo o documento HTML garantindo que nosso código seja executado em elementos que estão sendo exibidos.
O formato desta função é:
// Estas funções estarão disponíveis quando a web terminar de carregar $ (document) .ready (function () {function myfunction () {// código da função}});Se, em vez de uma função, eu aplicar um seletor CSS. Esta linha será executada automaticamente quando a página terminar de carregar, por exemplo, após carregar a página, coloque todos os links em verde e com um tamanho de 14 pixels.
$ (document) .ready (function () {$ ('a'). css ({'color': green, 'font-size': '14px'});});Em seguida, criaremos um plugin que elimina qualquer e-mail publicado em uma lista de comentários em um site.
Avaliações de usuários |
Comentário Lorem Ipsum 1 - sexta-feira 01/04/2016 12:35 Lorem Ipsum é simplesmente um texto fictício de impressoras e arquivos de texto. [email protected] |
Comentário Lorem Ipsum 2 - sexta-feira 01/04/2016 12:35 Lorem Ipsum é simplesmente um texto fictício de impressoras e arquivos de texto. [email protected] |