jQuery: find ()
jQuery é un framework JavaScript grande. Se aínda non tivo oportunidade de traballar con el, espero que a publicación seguinte, pode incentivos-lo a aproveitar esta solución particular. Porque é caracterizado pola velocidade, optimizando o código para acomodar-lo en tantos navegadores, así, o que probablemente moitos dos máis interesantes - fácil de construír solucións complexas.
No artigo de hoxe vai concentrarse nun método moi útil find ().
Se non se xestione ese cadro, pídolle para familiarizado coas nocións básicas de selectores, usar a API oficial sobre selectorów , ou con preparada por Bartosz Medonia curso básico jQuery . Este coñecemento vai facilitar moito a comprensión das solucións presentadas neste documento.
Mellor, imos obter un exemplo concreto deste método. Na maioría das páxinas, un dos elementos básicos para un menú de navegación. Imos tentar crear o seu propio menú animado usando o número mínimo de compoñentes e funcionamento en calquera navegador que soporte JavaScript.
Primeiro Preparación dos elementos
Imos comezar creando un 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> Menú </ title> </ HEAD> <body> </ BODY> </ Html>
A continuación, tome a última versión de jQuery na web oficial do proxecto (produción) e copia-lo para un cartafol dos nosos arquivos HTML.
Dentro deste documento, podería usar algún contido de exemplo, eo noso menú. Usado para esta div e etiquetas span. Por suposto, os elementos do noso menú, debe ser con, poñendo-os nun bloque. O conxunto colocado dentro dunha div ID bloque menú =. Engadido o ficheiro usando a etiqueta script jQuery. Seu conxunto debe ser algo así:
<div id="menu"> <div> href # 1 Menú </ a> <span> href # 1.1 Menú </ a> href # 1.2 Menú </ a> href # 1.3 Menú </ a> </ Span> </ Div> <div> href # 2 Menú </ a> <span> href # 2.1 Menú </ a> href # 2.2 Menú </ a> href # 2.3 Menú </ a> href # 2.4 Menú </ a> Menú de href # 2.5 </ a> </ Span> </ Div> <div> href # 3 Menú </ a> <span> href # 3.1 Menú </ a> href # 3.2 Menú </ a> href # 3.3 Menú </ a> href # 3.4 Menú </ a> </ Span> </ Div> <div> href # 4 Menú </ a> <span> href # 4.1 Menú </ a> href # 4.2 Menú </ a> </ Span> </ Div> </ Div> <! - Menú # End -> Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. Hai algúns exemplos de contidos. <script type="text/javascript" src="jquery.js"> </ script>
Especialmente poñer moitos elementos do menú para amosar o quão doado será apelar a moitos deles a partir do jQuery, dependendo do bloque que mover o rato.
Segundo Definir o aspecto do menú (css)
Nesta sección, definimos a vista usado nos arquivos html bloques, de código. Preparei-me, o seguinte código ao estilo, situado na cabeceira:
<style type="text/css"> <! - * {Margin: padding, 0px: 0px;} a {text-decoration: none; font: 20px Xeorxia, "Times New Roman", Times, serif;} html, body {Margin: 10px;} # Menú {top: 0px; float: left; width: 100%;} P # menú {position: relative; float: left;} P # menú: active, p # menú: ligazón, p # menú: Visited {display: block; position: relative; vertical-align: middle; background: # CCC; color: # FFF; padding: 5px 10px; width: 150px;} P # menú a: hover {background: # 999;} P # menú span {display: none; position: Absolute, top: 100%; left: 0; float: none;} Div div # menú: active, # div div no menú a: link, p # menú extensión a: Visited {posición: relative; Mostrar: block; float: left; top: 0px; background: # DDD; color: # FFF; padding: 5px 10px; width: 150px;} Div div # menú a: hover {background: # 999;} -> </ Style>
No noso exemplo, creamos só simple menú de dous niveis, pero non hai nada no xeito de modificalo-las e adaptarse a calquera número de niveis.
Se estamos neste punto, tamén debe consultar a estrutura para crear menú css'owego .
Terceiro A uña do programa - atopar.
Por estas medidas, estamos preparados para aplicar unha páxina enteira de código JavaScript. Sabemos tamén, como mencionado, dicindo que o selector. No noso caso, o exemplo é moi sinxelo, xa que hai só catro menú principal, pero non é difícil imaxinar que pode haber máis, e cada un pode ter varias ramificacións. Isto descualifica o método de loop, tamén exclúe unha forza bruta, tendo examinado todos os casos por separado. Pero, grazas ao método de atopar, os furúnculos problema a unha liña moi clara de código que executan todo o traballo para nós. É bo que o noso código Javascript estaba en US $ (document). Ready, garantindo que consultalo cando a páxina carga, todos os scripts externos, estilos e outros arquivos.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Menú Div #"). Hover ( function () { . $ (Este) Find ("div") CSS ({Opacity: 0,98}) SlideToggle ("rápido"), .. } function () { . $ (Este) Find ("div") SlideToggle ("rápido").; } ); }); / /]]> -> </ Script>
O código anterior, eu recomendo poñer a etiqueta guión, que nos referimos a jQuery, na parte inferior.
O selector principal, consulte a etiqueta de id = "menú", dentro do cal hai un div. Método. Pase (), significa unha ocorrencia invadir o rato, o elemento seleccionado e como parámetros, toma unha ou dúas funcións que son executadas durante o inicio deste evento. A segunda característica é opcional e é executada cando o rato sae da área do noso elemento. Tentou introducir o código para que ambas as funcións son transparentes para o lector, pero eu recomendo minimizando o código en proxectos existentes.
Imos agora analizar o código dentro da función. De novo, aquí usamos o selector, esta vez, refírense ao asunto no que vivimos. Cada retorna un selector jQuery, que pode ser abordada por esta cláusula. Pero se quere dentro do elemento, consulte o elemento dentro dun elemento, use o método Find, que se localiza e retorna todos os elementos correspondentes. Teña isto en mente, porque se quere referir a un elemento específico, usaría unha clase e despois do recurso. Find (". ClassNazwa"). Claro que, no interior do atopar, podemos tamén referirse a un elementos de estrutura máis complicada, e os selectores jQuery.
A primeira característica como podes ver, modificar o método find retorna un obxecto e modificar a súa transparencia, use o slideToggle método (), será iniciada a animación, neste caso, é de animación, "descendente" ao fondo, o que determina o parámetro fixado para amosar ningún na configuración dun elemento (un elemento invisible, entón deslice o único que podemos facer é mostralo lo).
Na segunda característica, todo parece moi semellante, só que non necesita máis modificar a opacidade, porque xa cambiou. Fixemos iso en jQuery, incluíndo porque no css, non sería posible, de tal forma a alcanzar o pleno cumprimento do validador do W3C, e que a transparencia foi exhibida correctamente en todos os navegadores con soporte JavaScript.
4 Resumo
O obxectivo deste artigo, foi aprender a crear menús animados, pero, coñecendo moitas cuestións interesantes sobre o método find (), así como o jQuery. As oportunidades son enormes, e espero que logo de ler este artigo, que vai gañar uns poucos entusiastas.
Mentres que o efecto do noso traballo, podemos ver a demostración .
Artigo moi bo - método moi útil descrito jQuery, é un exemplo moi práctico. Todo limpo e agradable, eu estou esperando para os próximos artistas