플러그인은 표준 JavaScript 파일로 작성된 코드조각입니다. 이러한 파일은 jQuery 라이브러리 메서드와 함께 사용할 수 있는 유용한 jQuery 메서드를 제공합니다. 예를 들어 제목 및 콘텐츠 본문이 있는 토글 가능한 섹션을 만듭니다(제목을 클릭하여 본문을 위아래로 전환합니다). JS를 사용하도록 설정하지 않았다면 콘텐츠는 여전히 완벽하게 작동합니다. html 파일에서 jQuery, hello 플러그인 및 플러그인에 대한 호출의 마지막 버전을로드합니다. 이 예제에서는 index.html 파일의 헤드에 이 것을 추가하려고합니다: 다음은 디버깅 목적에 대한 경고 방법을 가지고 있는 작은 플러그인입니다. jquery.debug.js 파일에이 코드를 유지 – 당신은 새로운 기능을 추가하거나 예제것들을 사용자 정의하여 놀 수 있습니다. 당신이 jQuery에 익숙하지 않은 경우, 걱정하지 마세요, 우리는 당신을 위해 jQuery 클래스가 있습니다. https://jquery.com/plugins 저장소 링크에서 다운로드 할 수있는 많은 jQuery 플러그인이 있습니다. jQuery 플러그인은 플러그인을 트리거하기 위해 호출 할 이름으로 함수를 등록하여 작동합니다 (예를 들어, 너비 / 높이가 반환 될 때 jQuery의 붙박이 .width() 또는 .height() 함수를 호출합니다) 우리는 내가 만든 플러그인을 사용합니다.

플러그인의 다른 부분을 선보일 수 있습니다. 그것은 중첩 된 요소의 가시성을 전환하기위한 간단한 플러그인입니다, 목록 항목 등, FAQ같은 것들에 대한 아코디언 스타일의 위젯을 만들 려면. 전반적인 아이디어는 플러그인의 개념에 대 한, 하지만이 예제는 모든 실제로 작동 하는 방법을 볼 수 도움이 될 것입니다. 모든 기술을 결합, 다음 예제 플러그인 컴파일: 윈도우 (github) 전체 화면을 차지 하는 섹션으로 단일 페이지 웹 사이트를 구축할 수 있는 플러그인. 플러그인은 새로운 섹션이 가시성에 와서 스냅을 처리 할 때 호출 콜백을 제공합니다, 그래서 당신은 쉽게 사용자 정의 탐색 메뉴 이상으로 확장 할 수 있습니다. 여기에 예입니다 : 여기에 우리가 논의 한 기술의 일부를 사용하여 작은 플러그인의 예입니다 : 그게 전부입니다! 이제 jQuery의 $ 개체에서 호출 할 수있는 새로운 방법이 있습니다. 지금은 아무 것도 하지 않지만 선택기에서와 같이 원하는 곳 어디에서나 이 메서드를 호출할 수 있습니다. 우리가 html 페이지의 동일한 디렉토리에 jquery.debug.js 파일을 넣어 가정. 이벤트 수신기는 $item 이벤트에 모두 액세스할 수 있으며 기능을 사용자 지정할 수 있습니다. 예를 들어, 클릭 할 때 요소를 제거 하려는 경우: 이 문서에서 구축 하는 사소한 예제 플러그인을 고려 하 고, 이 이제까지 유용 할 때 궁금 할 수 있습니다.

한 가지 실제 예는 사이클 플러그인입니다. 사이클 플러그인은 슬라이드 쇼 플러그인 내장 전환 효과의 수를 지 원하는 – 스크롤, 슬라이드, 페이드, 기타. 그러나 현실적으로 슬라이드 전환에 적용할 수 있는 모든 단일 유형의 효과를 정의할 수 있는 방법은 없습니다. 이러한 유형의 확장성이 유용한 위치입니다. 주기 플러그인은 사용자가 자신의 사용자 정의 전환 정의를 추가 할 수있는 “전환”개체를 노출합니다. 이 원형 슬라이더는 다음과 같이 플러그인에 정의되어 있습니다:이 원형 슬라이더는 사용자가 원 위에 mousing하여 값의 범위를 선택할 수 있습니다. 전체 슬라이더는 기본 설정이지만 분기 원, 반원 및 원형 셰이프를 얻는 데 사용할 수도 있습니다. 예를 들어 속도계처럼 보이도록 다양한 방법으로 테마에 맞게 조정할 수 있는 CSS 스타일이 있습니다. 어떤 이미지도 관련되지 않습니다.

그것은 모두 CSS와 자바 스크립트로 만들어졌습니다.