jQuery : () 찾기
jQuery는 위대한 자바 스크립트 프레임 워크입니다. 당신이 그와 일할 기회를 가지지 못했 경우, 다음과 간행물, 당신이 특정 솔루션을 활용하도록 장려되기를 바랍니다. 쉽게 복잡한 솔루션을 구축하기 위해 - 그것은 가장 흥미로운 중 아마도 대부분은 물론 많은 브라우저로 가서 남편을 수용할 수 있도록 코드를 최적화, 속도가 특징 때문입니다.
오늘의 글에서) (찾을 매우 유용한 방법에 초점을 맞출 것입니다.
이 프레임 워크를 처리하지 않은 경우, 당신이 사용하는 선택자의 기초를 맡은지 촉구 selectorów에 공식적인 API를 , 또는 바르 토스 Medonia에 의해 준비와 jQuery의 기본 코스 . 이 지식은 크게 여기 제시된 솔루션의 이해를 용이하게합니다.
베스트가이 방법의 몇 가지 구체적인 예제를 찾아드립니다. 대부분의 페이지에서 메뉴 네비게이션을위한 기본 요소 중 하나. 우리는 자바 스크립트를 지원하는 브라우저 아래 구성 요소와 운영의 최소 숫자를 사용하여 자신의 움직이는 메뉴를 만들려고합니다.
처음으로 요소의 작성
빈 HTML 문서를 만들 어서 시작하자 :
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 과도 / / 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> 메뉴 </ TITLE> </ HEAD> <BODY> </ BODY> </ HTML>
다음에서 jQuery의 최신 버전을 받아 프로젝트의 공식 사이트 (생산) 및 HTML 파일의 폴더에 복사합니다.
이 문서 내에서 일부 샘플 컨텐츠, 우리의 메뉴를 사용할 수 있습니다. 이 사업부와 span 태그에 사용됩니다. 물론, 우리의 메뉴 항목, 따라서 블록에 그들을 배치, 링크해야합니다. 전체가 ID = 메뉴로 블록 사업부 안에 넣어. jQuery 스크립트 태그를 사용하여 파일을 추가했습니다. 전체가이 모양은 다음과 같습니다
<div id="menu"> <DIV> HREF # 1 메뉴 </ a>에 가 <span> HREF # 1.1 메뉴 </ a>에 HREF # 1.2 메뉴 </ a>에 HREF # 1.3 메뉴 </ a>에 </ SPAN> </ 사업부> <DIV> HREF # 2 메뉴 </ a>에 가 <span> HREF # 2.1 메뉴 </ a>에 HREF # 2.2 메뉴 </ a>에 HREF # 2.3 메뉴 </ a>에 HREF # 2.4 메뉴 </ a>에 HREF # 2.5 메뉴 </ a>에 </ SPAN> </ 사업부> <DIV> HREF # 3 메뉴 </ a>에 가 <span> HREF # 3.1 메뉴 </ a>에 HREF # 3.2 메뉴 </ a>에 HREF # 3.3 메뉴 </ a>에 HREF # 3.4 메뉴 </ a>에 </ SPAN> </ 사업부> <DIV> HREF # 4 메뉴 </ a>에 가 <span> HREF # 4.1 메뉴 </ a>에 HREF # 4.2 메뉴 </ a>에 </ SPAN> </ 사업부> </ 사업부> <! - 끝 # 메뉴 -> 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. 몇 가지 샘플 콘텐츠입니다. <script type="text/javascript" src="jquery.js"> </ SCRIPT>
특히 얼마나 쉽게 우리가 마우스를 이동하는 블록에 따라 jQuery에서 많은 관심을 끌어 것을 보여주 메뉴에서 다양한 항목을 넣어.
초 메뉴의 모양 (CSS)를 정의
이 섹션에서는 HTML 파일, 코드 블록에 사용되는 모양을 정의합니다. 머리 부분에있는 스타일로, 다음 코드를 스스로 준비 :
<style type="text/css"> <! - * {여백 : 0px, 패딩 : 0px;} {텍스트 장식 : 없음; 글꼴 : 20px 조지아, "타임즈 새로운 로마", 타임즈, 리프;} HTML, 없음 body {margin : 10px;} # 메뉴 {가기 : 0px; 플로트 : 왼쪽, 폭 : 100 %;} # 메뉴 DIV {:; 부동 상대적으로 : 위치 왼쪽;} 활동 사업부 # 메뉴 : # 메뉴 DIV 링크 사업부 # 메뉴 : {디스플레이 방문 : 블록; 위치 : 상대적, 수직 정렬 : 중간, 배경 : # CCC; 색상 : # fff; 패딩 : 5px 10px; 폭 : 150px;} 사업부 # 메뉴 : 가져가 {배경 : # 999;} # 메뉴 스팬 DIV {:; : 절대, 최고 : 100 %; 왼쪽 : 0; 플로트 : 순위 없음 표시 없음;} 사업부 사업부 # 메뉴 : 활성, # 메뉴 사업부 사업부 : 링크 사업부 # 메뉴 스팬 : 방문 {위치 : 상대적; 디스플레이 : 블록; 플로트 : 왼쪽, 상단 : 0px; 배경 : # DDD; 색깔 : # fff을; 패딩 : 5px 10px; 폭 : 150px;} 사업부 사업부 # 메뉴 : 가져가 {배경 : # 999;} -> </ 스타일>
우리의 예제에서 우리는 간단한 두 단계 메뉴를 만들지만, 그것을 수정하고 레벨의 숫자에 적응하기위한 방법은 아무것도 없다.
우리가이 시점에서라면도 참조해야 css'owego 메뉴를 만드는 프레임 워크 .
셋째 프로그램의 손톱 - 찾으십시오.
이러한 조치를 통하여, 우리는 전체 페이지의 JavaScript 코드를 구현할 준비가되어 있습니다. 언급한 바와 같이 우리는 또한 선택 말씀, 알아요. 우리의 경우에는 오직 네 가지 주요 메뉴가 있기 때문에 예제는 매우 간단하지만, 거기에 더있을 수도 있고, 각각 여러 지점을 가질 수 있다고 상상하기 어렵지 않습니다. 이것은 루프 방식을 disqualifies 또한 별도로 모든 사례를 조사 받기, 짐승의 원동력 제외됩니다. 그러나 찾을 방법 덕분에 문제 때문인 우리를 위해 모든 작업을 실행할 코드 중 하나가 분명 라인. 우리의 JavaScript 코드는 $ (문서)에 있었던 것이 좋습니다. 준비, 우리가 그것을 참조 확보 때 페이지가로드, 모든 외부 스크립트, 스타일 및 기타 파일.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (문서). 준비 (함수 () { $ ( "사업부 # 메뉴"). 하버 ( 함수 () { . $ (이) ( "기간") 찾기 CSS ({불투명도 : 0.98}) SlideToggle ( "빠른");.. } 함수 () { . $ (이) ( "기간") 찾기 SlideToggle ( "빠른").; } ); }); / /]]> -> </ SCRIPT>
저는 위의 코드는 하단에, 우리가 jQuery를 참조하는 스크립트 태그를 넣어 권장합니다.
메인 선택기에서 ID의 태그 = "메뉴"사업부가있는 안쪽을 참조하십시오. 방법은.) (가져가서, 사건이 마우스, 선택한 항목을 침공 의미와 매개 변수로,이 이벤트의 개시 기간 동안 수행되는 하나 또는 두 가지 기능이 걸립니다. 두 번째 기능은 선택 사항이며 마우스는 우리 요소의 영역을 떠날 때 수행됩니다. 두 함수를 리더기에 투명하게,하지만 기존의 프로젝트에서 코드를 최소화하는 것이 좋습니다 있도록 코드를 도입을 시도 했어.
지금은 우리 함수 내부의 코드를 분석해 보자. 다시 말하지만, 여기서 우리는 선택, 우리는 우리가 살고있는 주제를 참조이 시간을 사용합니다. 각은이 조항에 의해 해결할 수 jQuery 셀렉터를 반환합니다. 하지만 당신이 요소 안에 원한다면, 일치하는 모든 요소를 찾아 반환하는 Find 메서드를 사용하여 항목 안에서 항목을 참조하십시오. 당신은 특정 항목을 참조하고 싶다면, 이러한 클래스를 사용할 수 있기 때문에 마음에 계속 보관하고 항소 후. ( ". ClassNazwa") 찾는다. 물론, 찾는 안에서, 우리는 또한 더 복잡한 구조 요소를 참조뿐만 아니라 jQuery 선택자 수 있습니다.
보시다시피 첫 번째 기능은, 메소드 개체를 반환하고 투명도를 변경할 찾아 수정한 다음 메소드 slideToggle ()를 사용,이 경우에는, 애니메이션을 시작한다, 그것은 표시하도록 설정 매개 변수를 결정 하단에 "내림차순"애니메이션입니다 요소의 설정에서 없음 (요소가 보이지 않는이므로 할 수있는 유일한 것은 그것을 보여주는 것입니다 밀어).
두 번째 기능에서는 모든 것이 아직 변경 되었기 때문에 우리가 더 이상 투명도를 수정할 필요가 없습니다 제외하고는 매우 유사 보입니다. 우리를 포함하여 jQuery에 한 CSS에서하기 때문에 W3C의 유효성을 완전히 이행을 달성하기 위해 같은 방식으로, 불가능했을, 그 투명도가 지원하는 자바 스크립트 모든 최신 브라우저에서 제대로 표시되었다.
넷째 개요
이 문서의 목적, 그것은 애니메이션 메뉴를 만드는 방법을 학습했지만,) 메소드 (찾기에 관한 많은 흥미로운 문제를 알아가는뿐만 jQuery로. 기회 거대한이며,이 기사를 읽은 후 그것이 몇 애호가를 얻을 수 있기를 바랍니다.
우리 연구의 효과가 있지만, 우리가 볼 수있는 데모를 .
아주 멋진 기사 - 매우 유용한 방법은 jQuery를 설명하고, 매우 실용적인 예제. 모든 명확하고 쾌적한 저 다음 예술가 기다리고 있어요