1. A apresentação de slides incrível na jquery "slideshow elástico"
Slideshow com miniaturas e descrições de slides. Vários efeitos de mudança de imagens. Existem duas opções: com alteração automática de slides e sem.
2. Slider CSS3 puro
Slider de imagem bonito com descrição e mudança de corrediça automática. Quando você passa o cursor, a imagem de rotação pára. Parar é acompanhado pelo efeito CSS3.
3. JQuery conectando "Photorama"
Bom slider de galeria.
4. Efeitos de texto "efeitos de tipografia"
Efeitos interessantes para trabalhar com tipografia com CSS3 e jQuery. 7 efeitos legais diferentes.
5. Plugin "Darkbox"
Um pequeno plugin de luz para exibir imagens no bloco pop-up.
6. HOVER-EFEITO EM JQUERY
Efeito circular ao pairar.
7. JQuery CSS3 de animação
Muitos efeitos de CSS3 animados diferentes para criar botões deslumbrantes para o seu site. Apenas efeitos muito legais quando pairando.
8. JQuery Html5 mudando imagens de fundo
Quando você clica nas miniaturas, as imagens de fundo substituem umas às outras pelo efeito do borrão. Quando a janela do navegador é redimensionada, o tamanho da imagem de fundo é alterado.
8. Efeitos de tipografia interativos
Efeitos de texto interessantes usando HTML5 e jQuery (4 efeitos diferentes). Mouse sobre o texto para ver o efeito.
9. Assinaturas de imagem pop-up
Muitos efeitos animados diferentes ao anexar para implementar assinaturas de imagem pop-up.
10. Plugin "Portamento"
Bloco flutuante em jquery. Sempre permanece na zona de visibilidade ao rolar a página para baixo.
11. Scrollers de conteúdo.
jQuery Plugin para exibir o rolo em blocos de tamanho fixo. Várias decorações de estilo.
12. Plugin "Scrollbars"
implementação do jQuery da rolagem horizontal e vertical do conteúdo na unidade de tamanho fixo.
13. Plugin "Tiny Scrollbar"
jQuery plugin para implementar a rolagem vertical e horizontal do conteúdo.
Demonstração
Download
14. Plugin "Jscollpane"
Conteúdo cruzado de rolagem do navegador no bloco.
15. Bloco flutuante "Scroll segue"
Plugin para criar um bloco que irá rolar após a rolagem da página. É possível corrigir o bloco clicando no link.
16. Painéis pop-up "Barra lateral"
Correndo painéis de todos os lados da página da Web.
17. Soluções Espetaculares CSS3 para Página plug
Três opções para a implementação de efeitos animados para criar um "site no desenvolvimento".
17. Efeito ao rolar a página
Efeito incrível ao rolar a página: os elementos estão saindo da área atrás da tela ou vice-versa estão se escondendo atrás da área da tela. Tal solução é perfeita para uso em sites de portfólio, para uma apresentação espetacular de projetos concluídos com uma breve descrição.
19. Plugin "Fancybox 2"
Uma nova versão totalmente reescrita da fancybox mencionada por muitos plugin, para exibir imagens e outros conteúdos em janelas modais.
20. Galeria Minimit.
Plugin funcional com um grande conjunto de recursos: galeria, carrossel, slider, menu, extensor, botões animados.
21. JQuery News Ticker
Rotator News no site. Mensagens substituem umas às outras e aparecem usando um efeito interessante da máquina impressa. Você pode parar de mudar de notícia clicando no botão "Pause". Arrogs podem ser movidos de uma mensagem para outra.
22. Imagens adaptativas.
Imagens escaláveis \u200b\u200bpara exibição em dispositivos móveis. Tamanhos de imagem dependem do tamanho da janela. Tecnologias usadas: JavaScript e PHP5.
23. vscroller.
JQuery vertical, scroller CSS3. A velocidade da rolagem e o tempo de atraso é ajustado.
24. Menu suspenso multi-nível "Jqsimplemenu"
Plugin JQuery fresco para criar menu suspenso horizontal multi-nível no site.
25. "JScarousel 2.0"
jQuery plugin para implementar carrosséis verticais e horizontais.
26. Rotator "Notícia Dinâmica"
jQuery plugin para a visor bonita das últimas notícias da fita RSS.
27. Menu animado
Efeito animado ao pairar no item de menu.
28. Efeito de texto animado
Três exemplos espetaculares de trabalhar com Propriedade CSS. "Background-clip: texto". CSS3 O efeito não funciona em navegadores antigos.
29. CSS3 jQuery Blur Effect
Quando você passa o cursor para o bloco aumenta, e os restantes blocos com o texto estão borrados no fundo.
30. Dicas pop-up CSS3 jQuery
31. JQuery pop-up pairando pontas
32. Menu CSS Fácil
33. Notas CSS3 e HTML5
A implementação de blocos semelhantes aos scrapbooks.
34. Ruzina.
Exibindo um sistema de mídia em blocos pop-up: imagens, vídeo, flash.
35. JQuery Zumber.
Aumentar a área quadrada.
36. Descrição da imagem do jquery CSS3
Conectando "Galeria de Content Galeria de Porta Sliding" para implementar as descrições de imagem pop-up. Quando você passa o cursor para algumas das imagens apresentadas aparece pequena descrição Com referência ao artigo completo. Quando você passa: o efeito de criar portas de garagem.
37. O efeito "antes e depois" jquery plug "ucompare"
Pensando a cortina, você pode comparar duas imagens sobrepostas uns sobre as outras. Ideal para esses casos em que você precisar organizar duas opções para qualquer coisa na página: antes e depois.
38. Efeito de rotação de imagens
39. Mapas interativos da paz e da Europa e EUA
40. Slide Show "Slider.JS v1.1"
Vários diferentes efeitos de transição animados entre slides.
1. JQuery conectando "zoom de hover"
A solução original para implementar a descrição das imagens ao passar o cursor usando o efeito de zoom.
2. Plug "CAPTIFICE"
3. Descrição da imagem jquery na galeria
Quando você passa o cursor, uma descrição aparece, e a imagem em si é derramada por uma camada translúcida, uma certa cor.
4. JQuery Implementação de assinaturas de imagem
Diversas formas de realização de assinaturas para imagens que aparecem quando você passa o cursor do mouse.
5. JQuery Effect of Sliding Portas
Quando você passa-se em miniatura, uma descrição aparece em seu lugar.
6. JQuery Plug "ZoomInfo"
Quando você passa o cursor para a imagem, diminui e o nome e a descrição da foto aparece.
7. JQuery plug "mosaico"
Implementação de descrições de imagem pop-up ao pairar o cursor do mouse. 8 tipos diferentes de assinaturas pop-up são fornecidos. Você pode vê-los na página de demonstração.
Quando você passa o cursor do mouse para a imagem deixa uma breve descrição com referência a informações detalhadas.
9. Plugin para implementar a assinatura da imagem
Outra opção para implementar assinaturas de imagem pop-up quando pairando o cursor. Há uma oportunidade de escolher entre dois efeitos jquery. A aparência de assinaturas.
10. Descrição da imagem "Preview Window"
Plugin para imagens de assinatura. Quando você passa o cursor do mouse com um efeito animado, uma descrição é exibida. Jquery é usado para criar animação.
Preparado com base em materiais
os plugins jquery estão entre os componentes mais necessários ao construir um site e, de fato, qualquer aplicativo da Web. Eles permitem expandir sua funcionalidade. Este artigo lista os plugins mais úteis em 2012. Para mais pesquisa conveniente todos os plugins são divididos nas seguintes categorias: Layout de página da Web - plugins, etiquetas para navegação, plugins de formulário, plug-ins para criar controles deslizantes, plug-ins para gráficos e gráficos, efeitos para imagens e outros. Também entre esses plugins têm plugins que ajudarão você a criar seus aplicativos adaptativos.
Plugins de layout da página.
equalizar.js é um plugin jQuery que permite criar uma estrutura de bloco do site. Ele permite que você nivesse a altura e a largura de qualquer elemento.
O novo plugin para layouts adaptativos.freetile permite criar elementos de qualquer tamanho, enquanto a necessidade de criar um tamanho fixo das colunas de grade desaparece.
GRIDSTER.JS JQuery plugin para construir arrastar e soltar - grade. Também usando ele pode ser excluído dinamicamente e adicionar elementos da grade.
Zoomooz.js. - Este é um plugin jquery fácil de usar para aumentar qualquer elemento da página da web. Você pode facilmente adicionar um efeito de zoom simplesmente adicionando a classe "zoomtarget" a qualquer elemento HTML. O aumento pode ser redefinido clicando na página. O plugin foi testado em Internet Explorer. 9, Safari 3 +, Firefox 3.6 +, ópera e cromo.
O Wookmark é um plugin para criar um modelo multisca dinâmico.
jQuery HiddedPosition é um plugin que permite adicionar qualquer item, mesmo que esteja oculto.
Stellar.js - jquery-plugin, que fornece o efeito do paralaxe para itens.
O plugin jQuery, que adiciona o efeito da redação real das páginas durante a transição entre seções. Aceleração de hardware usada. Funciona em comprimidos e smartphones.
Plugin para tipografia adaptativa. Ele permite que você use o seletor gerando o tamanho perfeito da fonte.
Permite que você construa movimentos animados no site, incluindo todas as transformações possíveis.
Plugins para navegação
Horizontalnav é um plugin jquery que estica o menu horizontal para que corresponda a toda a largura do recipiente. Se você já tentou criar o efeito da tensão correta do menu de navegação em Recipiente CSS. O projeto, então você definitivamente sabe o quanto é difícil fazer pela compatibilidade entre os navegadores. Este plugin é facilmente.
o Stickymojo é um painel lateral fácil, rápido e flexível "Lipuchy" em jQuery. Funciona com o Firefox, Chrome, Safari e IE8 + (Bem suporta a versão antiga ou seja).
dDSlick é um plugin que permite criar menus suspensos com imagens e descrições.
Plugin para uma organização simples de painéis suspensos. O plugin suporta trabalhos com cookies para armazenar o status dos painéis. Entre as opções têm funções de referência para configurar o processo de abertura e fechamento de seções.
Plugin para criar blocos dobráveis \u200b\u200bque possam conter quaisquer dados em um espaço limitado.
Formando plugins.
O plugin permite determinar o nível de complexidade da senha.
Jquery-plugin para visualizar o processo de download de arquivos. Suporta arrastar e soltar e cria visualizações instantâneas para fotos.
Plugin que determina e verifica números de cartão de crédito. Ele permite determinar o tipo de cartão de crédito.
Plugin para filtrar dados. Você pode filtrar os dados na tag e para várias tags e categorias.
Plugin que verifica a entrada e-mail sobre a exatidão da lista pré-preparada (aqui você pode incluir o mais popular serviços de correio Mail.ru, yandrex.ru, gmail, etc.).
Plugins para criar sliders e carrosséis
Plugin que permite controlar as transições usando o mouse, touchpad e teclado. Para transições definidas por padrão, você pode adicionar adicional, que também estão no arquivo de origem.
iosslider.
iosslider é um plugin para um controle deslizante de navegador adaptativo.
RSLIDER - Tela Full slider adaptativo. CERCA DEh vai se adaptar automaticamente à sua largura da tela.
A FRESCO é um plugin adaptativo. Pode ser usado para criar programas de sobreposição impressionantes que funcionam perfeitamente em qualquer tamanhos de tela em todos os navegadores, em todos os dispositivos.
Bookblock: Conteúdo da aleta do plugin
O BookBlock é um plugin jquery que pode ser usado para criar componentes na forma de livretos que permitirão que você crie navegação como "páginas de giro". Aqui você pode usar qualquer conteúdo, ser imagens ou texto. O plugin transforma a estrutura somente se necessário (em outras palavras, somente quando a página é entregue) e usa sobreposição e sombras para transmitir realismo.
Adaptador é um controle deslizante de conteúdo fácil que fornece uma interface simples para os desenvolvedores para criar uma bela animação de alinhamento 2D ou 3D de slides. Atualmente, há suporte para propriedades 3D em navegadores WebKit e Firefox. Todas as transições 2D foram testadas em IE6 + e outros navegadores modernos.
Carrossel contínuo com vários recursos úteis.É fácil configurar e suporta até mesmo navegadores antigos.
Rinosslider. - Muito flexível jquery. Apresentação de slides. Não apenas uma variedade de efeitos é oferecida, mas é possível adicionar seus próprios estilos, efeitos e funções ao controle deslizante.
A sequência é um plugin jquery para rolar o conteúdo com a maneira original e fornece controle total. Você pode usar qualquer tipo de conteúdo; Ele irá rolar infinitamente. A marcação semântica é usada aqui, bem como modelos adaptativos e dispositivos com base na tecnologia de toque.
Glisse.js é uma galeria simples, adaptável e facilmente personalizável do jQuery.
Plugins para gráficos e gráficos
Morris.js é uma biblioteca leve que usa jQuery e Raphaël para facilitar o desenho cronogramas.
JQuery Org Chart é um plugin que permite criar estruturas de árvores com elementos aninhados. Os dados são inseridos em uma lista desordenada incorporada, o que torna o plugin incrivelmente fácil de usar.
Plugins para tipografia.
Bacon.js é um plugin jquery que permite que você envolva o texto ao redor da curva de bezier ou linha.
Textualizer - plugin jquery para criar belos efeitos sobre o texto. Trabalho suportado em: Chrome, Safari 4+, Firefox 3.5+, ou seja, 6,7,8,0, ópera 10.6+, Safari móvel (IOS 4)
O slabtext é um plug-in jquery muito útil que ilumina os cabeçalhos antes de alterar o tamanho de cada linha para preencher a área disponível horizontalmente.
trunk8 é um plugin Text Trigtele em jQuery. Permite que você corte um grande bloco de texto para uma parte menor para uma inspeção preliminar.
Plugins para criar vários efeitos para imagens
Este é um plugin jQuery que usa filtros CSS3 para criar um efeito de inclinação.
Plugin para implementar o efeito de imagens adaptativas.
plugin jquery que facilita a criação de cartões de imagem. Com esta ferramenta, qualquer imagem do mapa pode ser destacada ou selecionada, assim como o cartão pode ser controlado. jeitos diferentes. Funciona em todos os principais navegadores, incluindo o Internet Explorer 6, não usa o Flash e não requer nada além do jQuery. Alguns efeitos avançados exigem suporte HTML5, mas ainda funcionará em navegadores antigos.
Adaptive, ou se você quiser, o Web design responsivo agora não é apenas outra tendência de designer, isso já é um certo padrão para o desenvolvimento de sites, fornecendo universalidade de sites, percepção visual harmoniosa nas telas de vários dispositivos de usuário. Mais recentemente, ao desenvolver modelo adaptativoEu tive que lidar com várias dificuldades na integração de certos controles deslizantes e galerias de imagem, sem quebrar o estilo de design geral. Agora tudo é muito mais fácil, há um grande número de soluções prontas na rede e o que é especialmente satisfeito, a maioria deles está no livre acesso, com código aberto.
Devido à diversidade das ferramentas propostas, compili uma pequena revisão dos desenvolvimentos mais notáveis \u200b\u200bde sliders jQuery adaptativos de imagens que apareceram na última vez e distribuídos sem quaisquer restrições, isto é. absolutamente grátis.
Wow slider.
Slider jquery adaptável de imagens com um magnífico set efeitos visuais (vira, partidas, borrão, espirais, persianas, etc. ...) e muitos padrões prontos. Com a ajuda do assistente de inserção construído em gawwer, você pode facilmente criar slideshows deslumbrantes em questão de minutos. O site do desenvolvedor tem toda a documentação necessária sobre a configuração e uso do plug-in em excelentes exemplos de vida de operação de plug-in. Também disponível para baixar plugin Wordpress. E o módulo para o Joomla. Estou confiante de que muitos vão gostar desse slider maravilhoso, tanto iniciantes como um guia de guia.
Herlider.
HTML5, JQuery Slider e Galeria de Imagens, Plugin absolutamente gratuito para uso pessoal em sites executando sistemas populares - WordPress, Joomla, Drupal. Com este instrumento simples, mas sim funcional, você pode criar facilmente nas páginas de nossos sites, surtos de slides incríveis e brilhantes, apresentações espetaculares e anúncios de novas mensagens. Vários padrões e peles prontos para um controle deslizante, efeitos de transição deslumbrantes (mudança), saída de vários conteúdos multimídia:, vídeo com YouTube e Vimeo, configurações personalizadas flexíveis, etc ...
Slider Nivo.
O Slider de Nivo é um velho, bem conhecido por todos que estão no assunto, um dos mais belos e fáceis de usar o controle deslizante de imagens. O plugin JQuery Nivo Slider é livre para baixar e usar mais, distribuído sob a licença do MIT. Há também um plugin separado para o WordPress, mas infelizmente já pago e queda para ele terá US $ 29 por licença. É melhor fazer um pouco com os arquivos do WP tema e apertar a versão gratuita do JQuery do plugin do Slider do Nivo ao seu blog, o benefício da informação como fazê-lo na rede o suficiente.
Quanto ao funcional, tudo está em perfeita ordem. Uma biblioteca JQuery v1.7 + é usada para trabalho, belos efeitos de transição, configurações simples e muito flexíveis, layout adaptativo, corte de imagem automática e muito mais.
A ideia do controle deslizante foi inspirada por desenvolvedores, bem conhecida por todo o estilo dos produtos da Apple, onde vários itens pequenos (imagens) estão mudando para clicar na categoria selecionada com um efeito simples de animação. CODROPS Apresenta à sua disposição Uma lição detalhada para criar este controle deslizante, um alinhamento completo da marcação HTML, um conjunto de regras de CSS e o plugin jquery executável, bem como um maravilhoso exemplo de vida de usar um controle deslizante.
Slit Slider.
Slider de imagem de tela cheia no jQuery e CSS3 + livro detalhado sobre a integração da página do plug-in no site. A ideia é cortar o slide atual de corrente com um conteúdo específico ao alternar para o próximo conteúdo ou anterior. A PARTIR DE usando jquery. E animações CSS você pode criar transições exclusivas entre slides. O layout adaptativo do controle deslizante garante que ele verá as telas igualmente bem nas telas. tipos diferentes Dispositivos personalizados.
Slider de conteúdo elástico.
O controle deslizante do conteúdo que automaticamente é ajustado em largura e altura, dependendo do tamanho do contêiner pai no qual está localizado. Design bonito e deslizante flexível em configurações jquery, com navegação na parte inferior, ao alterar o tamanho da tela até a redução, a navegação é exibida como ícones. Documentação muito detalhada (criação de lições) e exemplos de uso de uso.
Slider 3D Stack.
Versão experimental de um controle deslizante que demonstra imagens com transições de um plano 3D. As imagens são quebradas em duas pilhas horizontais, usando a seta de navegação é mostrada e transitam cada imagem subseqüente para o estado de visualização. Em geral, nada de especial, mas a própria ideia e técnica de execução é bastante interessante.
Muito simples, 100% adaptativo e tela completa JQuery Slider de imagens. O trabalho do controle deslizante é baseado em transições de CSS (transição de propriedade) em um pacote com o JQuery Magic. O valor da largura máxima é 100% instalado por padrão, desta forma, o tamanho das imagens será alterado dependendo dos tamanhos da tela. Nada de efeitos de animação especiais e delícias no design, tudo é simples e afiado para o trabalho ininterrupto.
Slides mínimos
O nome fala por si só é talvez um dos deslizantes jQuery mais leves e minimalistas das imagens que conheci (plugin in 1KB). ResponsiveLides.js. -Kornet jquery plugin, que cria uma apresentação de slides usando elementos dentro do contêiner. Trabalha com uma ampla gama de navegadores, incluindo todas as versões do IE - o famoso freio de progresso, do IE6 e acima. O papel usa transições CSS3 em um pacote com JavaScript, para confiabilidade. Marcação simples usando uma lista não ordenada, configurando transições e intervalos de tempo, automático e controle manual Slides de comutação, bem como suporte para várias apresentações de slides. Esta é uma "bebê" tão frisque.
Câmera.
Câmera - jQuery grátis. Plugin para organizar uma apresentação de slides nas páginas de sites, um controle deslizante leve com uma infinidade de efeitos de transição, com um layout 100% adaptativo e muito configurações simples. Maravilhosamente caber nas telas de qualquer dispositivo de usuário (monitores de PC, tablets, smartphones e celulares). A capacidade de demonstrar o vídeo embutido. Alteração automática de deslizamento e controle manual usando botões e bloco de imagens. Praticamente uma galeria completa de fotos em design compacto.
bxslider jquery.
Outro, um controle deslizante adaptativo bastante simples em jquery. Nos slides, você pode colocar qualquer conteúdo, vídeo, imagens, texto e outros elementos. Suporte estendido para telas sensoriais. Use transições de animação CSS. Um grande número de diferentes variações na apresentação de apresentações de slides e galerias de imagem compacta. Controle automático e manual. Slides de comutação usando os botões selecionando miniaturas. O pequeno tamanho do arquivo de origem é muito simples em configurações e implementação.
Flexslider 2.
FlexSlider 2 - Versão atualizada O controle deslizante do mesmo nome, com uma taxa de resposta aprimorada, um ministério de script e minimizando a recomposição / redrawing. O plug-in inclui um controle deslizante básico, controlando o controle de slides usando miniaturas, as setas embutidas da esquerda e o painel de navegação inferior na forma de botões. A capacidade de produzir em slides de vídeo (Vimeo), configurações flexíveis de parâmetros (transições, design, intervalo de tempo), layout totalmente adaptável.
Galleria.
Bem conhecido e bastante popular plugin adaptativo jQuery para criar galerias de alta qualidade e controles deslizantes de imagens. A interface deslizante, graças ao seu painel de controle, assemelha-se visualmente o player de vídeo habitual, a composição do plug-in inclui várias decorações diferentes. Vídeo e imagens incorporadas com serviços populares: Flickr, Vimeo, YouTube e outros. Documentação detalhada Configurando e use.
Mirtilo.
Simples sem frescura free jquery slider de imagens, escrito especificamente para web design adaptativo. Blueberry é um plugin de código aberto jquery experimental. Design minimalista, sem efeitos, somente imagens de pop-up suavemente substituídas entre si após um determinado período de tempo. Tudo é muito simples, colocado, eu conectei e encaminhando ...
jquery popeye 2.1.
Slider JQuery muito compacto com elementos da caixa de luz. Devido a seus tamanhos flexíveis, é muito simplesmente incorporado em qualquer contêiner em um único post sob a forma de uma miniatura, quando você passa o cursor do mouse ou clicar em que a caixa de luz é ativada com um elemento de imagem e controle ampliado. É conveniente colocar um controle deslizante nos painéis laterais, para a apresentação de produtos ou anúncios de notícias. Excelente solução para sites com uma grande quantidade de informações.
Seqüência
Free slider adaptativo com transições CSS3 estendidas. Estilo minimalista, 3 temas de decoração, cada quadro desliza na direção horizontal aparecendo no centro da imagem fica à esquerda, a assinatura para a direita, as miniaturas são duplicadas no canto inferior direito. Quebra de páginas de apresentação de produtos para visualização em cada quadro. O controle também inclui botões para frente e para trás. Apoie tudo navegadores modernos.
Deslize.
Há um controle deslizante completamente promocional e na funcionalidade e nas configurações, a partir das configurações, há uma alteração na velocidade da alteração do slide, conectando o modo manual (os botões de controle são ativados), show de slides contínua. Este controle deslizante tem o direito de ser e ele me atraiu apenas pelo fato de que é, eu não encontrei nada particularmente interessante neste desenvolvimento, eu posso ter procurado mal)))
Slider de imagem responsivo.
Bonito tão adaptativo deslizante de imagens de Vladimir Kudinovov. Boa, ferramenta altamente desenvolvida, fornecida com exemplos visuais e instruções detalhadas para criação, instalação e uso. Design adaptativoBotões bonitos e atiradores de verde, tudo é muito fofo e calmamente, sem pressão.
Frackslider.
Livre JQuery Slider Plugin com efeito de paralaxe para imagens e slides de texto. Animação de slides possui vários valores mostrados com controle total em cada parâmetro de tempo e animação. A capacidade de animação ao mesmo tempo vários elementos no slide. Você pode definir vários métodos Animações, desaparecimento de slides ou transições de uma determinada direção. Exibição automática e controle manual usando as setas de navegação pop-up quando você paira. 10 tipos de efeitos de animação da aparência de slides e muito mais ...
A revisão foi bastante extensa, mas não é suficiente, devido ao grande número de produtos em consideração. Todos os detalhes e descrições detalhadas. funcionalidade. Um plug-in, você pode aprender diretamente nas páginas dos desenvolvedores. Resta esperar que alguém tenha diminuído a busca pela ferramenta mais necessária, para criar controles deslizantes coloridos nas páginas de seus sites.
Você já pensou que seria bom poder trabalhar com modelos russified? Apenas pense por um minuto. Não há tempo gasto em trabalhar com modelos de inglês. Estamos com pressa para agradá-lo com o fato de que o templatemonstrador agora pode ser encontrado no comerciante de Templatemster. O texto para cada um deles foi escrito manualmente. E, claro, todas as soluções acabadas são incrivelmente fáceis de usar.
Com todo o respeito, Andrew
Os navegadores criam automaticamente as dicas de pop-up quando os webmasters são prescritos ao atributo título Qualquer texto (como regra, atributo título Aplicado a tags.
e
. Para links e imagens). Quando os usuários trazem o cursor do mouse para tags em que o atributo está presente títuloO navegador exibe uma ponta pop-up. Essas dicas pop-up ( data de ferramenta.) Vamos editar.
Este artigo vai considerar:
- Como usar o plugin para substituir as dicas pop-up padrão
- Como configurar as dicas de ferramentas QTIP
- Como exibir conteúdo AJAX na ponta pop-up
Dicas de pop-up simples de texto personalizado
Espero que você não precise explicar que tais atributos como título, Alt são muitas vezes extremamente necessários. Afinal, eles ajudam os usuários a navegar melhor em um grande número de informações e, além disso, é extremamente útil para otimização de mecanismos de pesquisa. O único problema com os prompts - eles não podem ser alterados usando estilos CSS. Para resolver esse problema, usamos a oportunidade.
1. Crie o quadro de arquivo HTML básico, que contém com o atributo de título.
Lista de links:
- o principal
- Sobre companhia
- Contatos
- Portfólio.
2. Agora é necessário baixar o plugin QTIP do repositório.
3. Conecte os arquivos baixados:
// Biblioteca padrão jquery. // Neste arquivo, prescreveremos os scripts jQuery
4. Para trabalhar a sugestão pop-up suficiente para se registrar no Scripts.js:
$ (Documento) .REady (Função () ($ ("A"). Qtip ();));
Este design significa que, para todas as referências, que estão presentes no atributo de título serão aplicadas usando o método QTIP ().
Configurando o jquery qtip.
1. Personalizar as pontas pop-up podem ser diferentes. Para começar, altere a posição com a qual os prompts serão exibidos.
$ ("A"). Qtip ((posição: (meu: "centro inferior", // posição do cursor em: "Top Center", // Pontas pop-up Posição: $ (janela) // dica não lamber a tela das bordas)));
2. Depois de configurar a posição, você pode fazer um gráfico de cores do prompt. Por padrão, o arquivo jquery.qtip.min.css contém os seguintes estilos de cores:
Qtip-default (estilo padrão amarelo)
QTIP-Bootstrap
Para alguns desses estilos, você pode adicionar uma sombra: Qtip-Shadow. Além disso, ninguém interfere em criar seu próprio estilo, perfeitamente combinado com o general, embora padrão mais que abuso.
$ ("A"). Qtip ((posição: (meu: "centro inferior", em: "Top Center", Viewport: $ (janela)), Estilo: (Classes: "QTIP-Green Qtip-Shadow") ;
Criando um menu de navegação com prompts pop-up
1. Para começar, crie um quadro HTML:
# Navegação (Fundo: RGB (132,136,206); / * Navegadores antigos * / Fundo: -Moz-linear-gradiente (topo, RGBA (132,136,206,1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206 1) 100%); / * ff3.6 + * / fundo: -Webkit-gradient (linear, parte superior esquerda, fundo esquerdo, parada colorida (0%, RGBA (132,136,206,1)), cor-stop (50 %, RGBA (72,79,181,1)), parada colorida (100%, RGBA (132,136,206,1))); / * Chrome, Safari4 + * / Fundo: -Webkit-Linear-Gradient (Top, RGBA (132,136,206 , 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * Chrome10 +, Safari5.1 + * / Fundo: -O-Gradiente-Linear (Top, RGBA (132.136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * Opera11.10 + * / background: -ms-Linear-gradient (Top, RGBA 132.136,206, 1) 0%, RGBA (72,79,181,1) 50%, RGBA (132,136,206,1) 100%); / * ie10 + * / filtro: Progid: dximagetransform.microsoft.gradient (startcolorstr \u003d "# 8488ce" , Endolorstr \u003d "# 8488ce", gradienttype \u003d 0); / * ie6-9 * / fundo: gradiente linear (topo, RGBA (132,136,206,20,1) 0%, RGBA (72,79,181,1) 50%, RGBA (72,79,181,1) 132,136,206,1) 100%); / * W3C * / List-Style-Type: Nenhum; Margem: 100px 20px 20px 20px; Preenchimento: 0; Estouro: oculto; -Webkit-border-raio: 5px; -Moz-raio-raio: 5px; Raio de fronteira: 5px; ) # Navegação Li (Margem: 0; Padding: 0; Display: bloco; flutuador: esquerda; fronteira-direita: 1px sólido # 4449A8;) #Navegação A (cor: #fff; borda direita: 1px sólido # 8488CE; bloco; preenchimento: 10px;) #Navegação A: pairar (fundo: # 859900; cor de fronteira-direita: # a3bb00;)
Como resultado, a seguinte imagem deve ser obtida:
3. No arquivo scripts.js Adicionar:
$ ("# Navegação A"). Qtip ((posição: (meu: "Top Center", em: "Centro inferior", viewport: $ (janela)), Mostrar: (Efeito: Função (Offset) ($ ( ). Isolado (300);)), ocultar: (efeito: função (deslocamento) ($ () .SlideUp (100);))), estilo: (classes: "qtip-verde qtip-shadow",)) ;
Agora, quando você passa o cursor do mouse no menu de navegação, a dica pop-up será exibida (atributo de título).
Exibindo outro conteúdo na ponta pop-up
Além de exibir tags padrão, outro conteúdo pode ser exibido em uma dica pop-up, por exemplo, tirada de um arquivo, de um contêiner ou banco de dados oculto, e sem reinicializar a página usando a tecnologia AJAX.
Este link tem conteúdo do arquivo com AJAX
O valor do atributo href \u003d "tooltip.txt" significa que o hiperlink se refere ao arquivo TXT usual.
$ ("Infobox"). Cada (função () ($) .qtip ((conteúdo: (texto: "carregando ...", // enquanto o conteúdo é carregado, este registro Ajax será exibido: (URL: $ (isto) .attr ("href") // onde tomar conteúdo), title: (// Adicionar um campo com um título no texto da dica de ferramenta: $ (isto) .attr ("title"), botão: True // Adiciona um botão para finanças de fechamento)), Posição: (Meu: "Top Center", em: "Centro inferior", Efeito: Falso, // Remove o efeito Viewport: $ (Janela)), Mostrar: (Evento: ", // Dica exibir quando você clica no link, pode ser substituído por 'pair', então o prompt aparece quando você passa o solo: True // permite exibir apenas uma dica de ferramenta na tela), esconder:" Unfocus ", // Dica clica ao clicar em outro elemento de página de estilo: (classes:" QTIP-Green QTIP-Shadow ")))). Vinculado (" Clique ", Função (E) (E.PREVENTDEFAULT ()) ; // Quando você clica no link, o navegador não baixará o URL
Esta recepção AJAX funciona apenas quando o servidor está em execução. De modo que ele ganhou no computador local deve ser instalado, por exemplo,.
Até agora, eu não esqueci que prós e contras possuem radiadores de seção de alumínio e quais radiadores geralmente escolhem os consumidores.
(Cair: 409)
