jQuery: find ()
jQuery é um framework JavaScript grande. Se você ainda não teve oportunidade de trabalhar com ele, espero que a publicação seguinte, irá incentivá-lo para tirar vantagem desta solução particular. Porque ele é caracterizado pela velocidade, otimizando o código para acomodá-lo em tantos navegadores, assim, o que provavelmente muitos dos mais interessantes - fácil de construir soluções complexas.
No artigo de hoje vai se concentrar em um método muito útil find ().
Se você não tiver sido lidar com esse quadro, peço-lhe para se familiarizar com as noções básicas de seletores, usando a API oficial sobre selectorów , ou com preparada por Bartosz Medonia curso básico jQuery . Este conhecimento vai facilitar muito o entendimento das soluções apresentadas neste documento.
Melhor, vamos obter algum exemplo concreto deste método. Na maioria das páginas, um dos elementos básicos para um menu de navegação. Vamos tentar criar seu próprio menu animado usando o número mínimo de componentes e funcionamento em qualquer navegador que suporte JavaScript.
Primeiro Preparação de elementos
Vamos começar criando um novo documento HTML:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Menu </ title> </ HEAD> <body> </ BODY> </ Html>
Em seguida, pegue a última versão do jQuery no site oficial do projeto (produção) e copiá-lo para uma pasta de nossos arquivos HTML.
Dentro deste documento, poderia usar algum conteúdo de exemplo, e nosso menu. Usado para esta div e tags span. Claro que, os itens do nosso menu, deve ser ligações, colocando-os num bloco. O conjunto colocado dentro de uma div com id bloco menu =. Adicionado o arquivo usando a tag script jQuery. Um todo deve ser algo como isto:
<div id="menu"> <div> href # 1 Menu </ a> <span> href # 1.1 Menu </ a> href # 1.2 Menu </ a> href # 1.3 Menu </ a> </ Span> </ Div> <div> href # 2 Menu </ a> <span> href # 2.1 Menu </ a> href # 2.2 Menu </ a> href # 2.3 Menu </ a> href # 2.4 Menu </ a> Menu de href # 2.5 </ a> </ Span> </ Div> <div> href # 3 Menu </ a> <span> href # 3.1 Menu </ a> href # 3.2 Menu </ a> href # 3.3 Menu </ a> href # 3.4 Menu </ a> </ Span> </ Div> <div> href # 4 Menu </ a> <span> href # 4.1 Menu </ a> href # 4.2 Menu </ a> </ Span> </ Div> </ Div> <! - Menu # End -> Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. Há alguns exemplos de conteúdo. <script type="text/javascript" src="jquery.js"> </ script>
Especialmente colocar muitos itens no menu para mostrar o quão fácil será apelar para muitos deles a partir do jQuery, dependendo do bloco que mover o mouse.
Segundo Definir a aparência do menu (css)
Nesta seção, definimos o visual usado nos arquivos html blocos, de código. Preparei-me, o seguinte código ao estilo, localizado na cabeceira:
<style type="text/css"> <! - * {Margin: padding, 0px: 0px;} a {text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Menu {top: 0px; float: left; width: 100%;} Div # menu {position: relative; float: left;} Div # menu a: active, div # menu a: link, div # menu a: visited {display: block; position: relative; vertical-align: middle; background: # ccc; color: # fff; padding: 5px 10px; width: 150px;} Div # menu a: hover {background: # 999;} Div # menu span {display: none; position: absolute, top: 100%; left: 0; float: none;} Div div # menu a: active, # div div do menu a: link, div # menu extensão a: visited {posição: relative; display: block; float: left; top: 0px; background: # ddd; color: # fff; padding: 5px 10px; width: 150px;} Div div # menu a: hover {background: # 999;} -> </ Style>
No nosso exemplo, criamos apenas simples menu de dois níveis, mas não há nada na maneira de modificá-las e se adaptar a qualquer número de níveis.
Se estamos neste ponto, você também deve consultar a estrutura para criar menu de css'owego .
Terceiro A unha do programa - encontrar.
Por essas medidas, estamos preparados para implementar uma página inteira de código JavaScript. Sabemos também, como mencionado, dizendo que o selector. No nosso caso, o exemplo é bastante simples, uma vez que existem apenas quatro menu principal, mas não é difícil imaginar que pode haver mais, e cada um pode ter várias ramificações. Isso desqualifica o método de loop, também exclui uma força bruta, tendo examinado todos os casos separadamente. Mas, graças ao método de encontrar, os furúnculos problema a uma linha muito clara de código que executam todo o trabalho para nós. É bom que o nosso código JavaScript estava em US $ (document). Ready, garantindo que consultá-lo quando a página carrega, todos os scripts externos, estilos e outros arquivos.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Menu Div #"). Hover ( function () { . $ (Este) Find ("span") Css ({opacity: 0,98}) SlideToggle ("rápido"),.. } function () { . $ (Este) Find ("span") SlideToggle ("rápido").; } ); }); / /]]> -> </ Script>
O código acima, eu recomendo colocar a tag script, que nos referimos a jQuery, na parte inferior.
No seletor principal, consulte a tag de id = "menu", dentro do qual existe um div. Método. Passe (), significa uma ocorrência invadir o mouse, o item selecionado e como parâmetros, toma uma ou duas funções que são executadas durante o início deste evento. A segunda característica é opcional e é executada quando o mouse sair da área do nosso elemento. Tentou introduzir o código de modo que ambas as funções são transparentes para o leitor, mas eu recomendo minimizando o código em projetos existentes.
Vamos agora analisar o código dentro da função. Novamente, aqui usamos o seletor, desta vez, referem-se ao assunto em que vivemos. Cada retorna um seletor jQuery, que pode ser abordada por esta cláusula. Mas se você quiser dentro do elemento, consulte o item dentro de um item, use o método Find, que localiza e retorna todos os elementos correspondentes. Tenha isso em mente, porque se você quiser se referir a um item específico, você usaria uma classe e depois do recurso. Find (". ClassNazwa"). Claro que, no interior do encontrar, podemos também referir a um elementos de estrutura mais complicada, bem como os selectores jQuery.
A primeira característica como você pode ver, modificar o método find retorna um objeto e alterar a sua transparência, use o slideToggle método (), será iniciada a animação, neste caso, é de animação, "descendente" ao fundo, o que determina o parâmetro definido para exibir nenhum nas configurações de um elemento (um elemento é invisível, então deslize a única coisa que podemos fazer é mostrá-lo).
Na segunda característica, tudo parece muito semelhante, exceto que não precisa mais modificar a opacidade, porque ele já foi alterado. Fizemos isso no jQuery, incluindo porque no css, não seria possível, de tal forma a alcançar o pleno cumprimento do validador do W3C, e que a transparência foi exibida corretamente em todos os navegadores modernos que suporte Javascript.
4 Resumo
O objetivo deste artigo, foi aprender a criar menus animados, mas, conhecendo muitas questões interessantes sobre o método find (), bem como o jQuery. As oportunidades são enormes, e espero que após ler este artigo, ele vai ganhar uns poucos entusiastas.
Enquanto o efeito do nosso trabalho, podemos ver a demonstração .
Artigo muito bom - método muito útil descrito jQuery, e um exemplo bastante prático. Tudo limpo e agradável, eu estou esperando para os próximos artistas