기본 jQuery 도구 설명 플러그인을 만드는 방법

최근에 웹 개발과 관련이 있는 경우 jQuery 또는 jQuery 플러그인 에 대한 소개가 거의 필요하지 않습니다. 실제로 jQuery 플러그인은 인터넷의 거의 70%가 어떤 식으로든 사용하고 있을 정도로 인기를 얻었습니다.

초보자든 전문가든, 웹 개발 전문 지식 수준이 무엇이든 jQuery는 확실히 배우고 마스터해야 할 목록에 있어야 합니다. 이를 염두에 두고 이 튜토리얼에서는 기본 jQuery 툴팁 플러그인을 만드는 방법을 알려줄 것입니다.

그래서 이것은 우리가 만들 것입니다:

더 이상 시간을 낭비하지 않고 멋진 코딩으로 손을 더럽히고 jQuery 플러그인 생성을 마스터합시다.

파일 구조

1. jqueryToolTip.css – 툴팁의 스타일시트.
2. jqueryToolTip.js – 실제 jQuery 플러그인 파일입니다.

플러그인이 번거로움 없이 다양한 사용자와 장치 구성에 서비스를 제공할 수 있도록 충분히 유연해야 합니다. 더 진행하기 전에 이를 수행하는 데 도움이 되는 몇 가지 규칙이나 개념을 살펴보겠습니다.

jQuery 플러그인 생성 규칙

1. 고유한 ID 유지 – 플러그인 요소의 스타일을 지정할 때 현재 페이지 스타일을 무시하지 않도록 고유한 id 와 class 이름을 갖는 것이 매우 중요합니다.
2. 줄 주석 남기기 – 줄 주석을 남기는 것은 항상 좋은 습관입니다. 이것은 jQuery 플러그인을 다룰 때 필수적입니다. 사용자와 프로그래머는 다른 사람이 작성한 코드의 각 행이 의미하는 바를 파악하기 어려울 수 있고 주석 없이 코드를 해독하는 데 시간이 많이 걸릴 수 있기 때문입니다.
3. 소스 코드 축소 – 플러그인이 웹사이트를 만드는 데 필요한 유일한 것은 아니므로 최종 사용자에게 가능한 한 적은 공간과 대역폭을 사용하는 것이 중요합니다.

엄격한 규칙은 없지만 코딩하는 동안 코드를 작동시키기 전에 디자인 부분을 개인적으로 처리합니다. 우리는 이 튜토리얼에서 동일한 모델을 따를 것입니다: 실제 jQuery 툴팁 플러그인 에 대한 코드를 작성하기 전에 필요한 HTML과 CSS를 먼저 작성할 것입니다.

샘플 .html 파일을 만들고 여기에 다음 코드를 추가합니다.

 <div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">도구 설명 텍스트는 여기에 표시됩니다. </span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- jqueryToolTip 종료 -->

이제 jqueryToolTip.css 파일을 열고 그 안에 아래 CSS를 붙여넣습니다.

 #jqueryToolTip_wrapper{
			배경: 없음 반복 스크롤 0 0 rgba(0, 0, 0, 0.8);
			테두리 반경: 4px 4px 4px 4px;
			-웹킷 테두리 반경: 4px 4px 4px 4px;
			-moz-border-radius: 4px 4px 4px 4px;
			색상: #FFFFFF;
			글꼴 크기: 12px;
			글꼴 두께: 굵게;
			라인 높이: 보통;
			패딩: 5px;
			위치: 절대;
			z-인덱스: 999;
			글꼴 패밀리: Arial, "MS Trebuchet", sans-serif;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			상단: 자동;
			디스플레이:블록;
			너비: 0;
			높이:0;
			테두리:단색 5px;
			테두리 색상:투명 투명 rgb(0,0,0) 투명;
			테두리 색상:투명 투명 rgba(0,0,0,0.8) 투명;
			위치:절대;
			상단:-10px;
			왼쪽:10픽셀
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			테두리 색상:rgb(0,0,0) 투명 투명 투명;
			border-color:rgba(0,0,0,0.8) 투명 투명 투명;
			상단:자동;
			하단:-10px;
		}

샘플 .html 파일에 .css 파일을 포함했는지 확인한 다음 브라우저를 사용하여 .html 파일을 엽니다. 모든 것이 잘되면 아래에 주어진 이미지와 매우 유사한 위쪽 화살표가 있는 멋진 툴팁을 볼 수 있습니다.

아래쪽 화살표가 있는 도구 설명

동일한 툴팁에 아래쪽 화살표를 추가하려면 기존 클래스 .arrow_down 가 있는 범위에 .jqueryToolTip_arrow 클래스를 추가하기만 하면 됩니다.

전에:

 <span class="jqueryToolTip_arrow"></span>

후에:

 <span class="jqueryToolTip_arrow arrow_down"></span>

요구 사항

이제 HTML 및 CSS 부분이 완료되었으므로 실제로 플러그인 코드를 작성하기 전에 요구 사항을 이해하는 데 시간을 할애할 수 있습니다.

1. (모든 단일 앵커 링크에 대한 툴팁을 표시할 수 없기 때문에) 어떤 요소를 대상으로 지정해야 하는지 찾아야 합니다.
2. 호버 상태에서 현재 앵커 링크의 X 및 Y 축을 잡아야 합니다.
3. 마지막으로 툴팁 div 를 호버 상태의 현재 앵커 링크로 재배치해야 합니다.

복잡해 보일 수 있지만 jQuery 필터와 CSS 타겟팅 요소를 사용하면 작업이 훨씬 쉬워집니다.

jQuery 플러그인의 기초

요약 코드:

 (함수($){
			$.fn.jqueryToolTip = function(toolTipOptions){
			}
			}
		})(제이쿼리);

위에 주어진 코드는 플러그인 생성을 처음부터 시작할 때마다 사용해야 하는 코드입니다. 여기서 jqueryToolTip 은 플러그인 이름이며 원하는 것으로 바꿀 수 있습니다. 같은 이름을 가진 두 개의 플러그인이 큰 혼란을 일으킬 수 있으므로 고유하게 유지하십시오.

기본 설정:

 var 도구팁기본값 = {
			위치: "하단"
		},

플러그인에 따라 일부 기본 설정이 필요할 수 있습니다. 예를 들어, 튜토리얼에서 위치는 우리가 처리해야 하는 것입니다(즉, 툴팁을 요소의 상단에 표시할지 또는 그 아래에 표시할지 여부).

기본값 무시:

 toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

원하는 경우 최종 사용자가 기본 설정을 무시하도록 하는 것이 항상 좋은 방법입니다. 우리의 경우 기본적으로 툴팁이 맨 아래에 있도록 설정했습니다. 이제 최종 사용자가 맨 위에 표시되기를 원하는 경우 위의 코드는 최종 사용자가 지정한 옵션으로 기본 설정을 재정의합니다.

위에서 논의한 것 외에 다른 모든 것은 일반 jQuery 코드입니다. 자, 이제 시작할 수 있습니다! jqueryToolTip.js 파일을 열고 그 안에 다음 코드를 삽입하기만 하면 됩니다.

 (함수($){
			$.fn.jqueryToolTip = function(toolTipOptions){
				var 도구팁기본값 = {
					위치: "하단"
				},
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- jqueryToolTip 종료 -->' ;
				$('본문').append(도구팁 템플릿);
			}
		})(제이쿼리);

jQuery ToolTip Plugin 용 HTML 마크업을 포함할 toolTipTemplate 이라는 변수를 만들었습니다. 그런 다음 웹 페이지 본문에 HTML 마크업을 추가합니다.

 $(이).each(함수(){
			$(이).hover(함수(){
				// 링크 위로 마우스를 가져간 후 발생하는 작업에 대한 코드입니다.
			});
		});

$(this) 는 플러그인을 시작할 요소에 대한 참조입니다. 최종 사용자의 커서가 필수 요소 위에 있을 때마다 도구 설명이 표시되고 그 안에 있는 텍스트가 링크의 제목 attr 으로 변경됩니다.

 $(이).each(함수(){
			// 호버 기능
			$(이).hover(함수(){
				var toolTipTitle = $(this).attr("제목"); // 현재 링크 제목 가져오기
				var toTop = $(this).offset().top; // 현재 링크 Y축 가져오기
				var toLeft = $(this).offset().left; // 현재 링크 X축 가져오기
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("높이"); // 툴팁 높이 얻기
				var itemHeight = $(this).css("높이"); // 링크 높이 가져오기

				if(toolTipSettings.position == '상단')
				{
					$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
					var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
				}
				또 다른
				{
					var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
				}

				$('.jqueryToolTip_text').html(toolTipTitle); // 툴팁 텍스트를 현재 링크 제목으로 변경
				$('#jqueryToolTip_wrapper').css("디스플레이","차단"); // 툴팁 표시를 차단으로 설정
				$('#jqueryToolTip_wrapper').css({ // 툴팁 왼쪽 및 상단 위치를 현재 링크 위치로 설정
					상단: 상단최종,
					왼쪽: 왼쪽으로
				});
			},함수(){
				$('#jqueryToolTip_wrapper').css("디스플레이","없음"); // 호버 완료 후 툴팁 숨기기
			});
		});

위의 코드에서 주어진 코드가 무엇을 하려고 하는지 더 잘 이해할 수 있도록 각 줄마다 주석을 달았습니다.

함께 모아서

 (함수($){
			$.fn.jqueryToolTip = function(toolTipOptions){

				// 플러그인의 기본 설정
				var 도구팁기본값 = {
					위치: "하단"
				},

				// 기본 설정 확장
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

				// 툴팁 플러그인용 HTML 마크업
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- jqueryToolTip 종료 -->' ;

				// 마크업 추가
				$('본문').append(도구팁 템플릿);

				$(이).each(함수(){
					// 호버 기능
					$(이).hover(함수(){
						var toolTipTitle = $(this).attr("제목"); // 현재 링크 제목 가져오기
						var toTop = $(this).offset().top; // 현재 링크 Y축 가져오기
						var toLeft = $(this).offset().left; // 현재 링크 X축 가져오기
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("높이"); // 툴팁 높이 얻기
						var itemHeight = $(this).css("높이"); // 링크 높이 가져오기

						if(toolTipSettings.position == '상단')
						{
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
							var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
						}
						또 다른
						{
							var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
						}

						$('.jqueryToolTip_text').html(toolTipTitle); // 툴팁 텍스트를 현재 링크 제목으로 변경
						$('#jqueryToolTip_wrapper').css("디스플레이","차단"); // 툴팁 표시를 차단으로 설정
						$('#jqueryToolTip_wrapper').css({ // 툴팁 왼쪽 및 상단 위치를 현재 링크 위치로 설정
							상단: 상단최종,
							왼쪽: 왼쪽으로
						});
					},함수(){
						$('#jqueryToolTip_wrapper').css("디스플레이","없음"); // 호버 완료 후 툴팁 숨기기
					});
				});
		}
		})(제이쿼리);

플러그인을 호출하는 방법

jqueryToolTip 플러그인을 호출하는 것은 다른 jQuery 플러그인만큼 간단합니다.

JS 파일 포함:

[html 유형=”텍스트/자바스크립트” 언어=”<스크립트”]

<p>스타일 시트 포함:</p>

 <link rel="stylesheet" href="../Documents/Unzipped/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />

제목 속성을 사용하여 앵커 링크 생성:

 <a href="#" title="ToolTip Demo">도구 설명 데모</a>

플러그인 호출(기본):

 <스크립트 유형="텍스트/자바스크립트">
    $(함수(){
        $('a').jqueryToolTip();
    })
</스크립트>

플러그인 호출(옵션 전달):

 <스크립트 유형="텍스트/자바스크립트">
    $(함수(){
        $('a').jqueryToolTip({
            위치: "상단"
        });
    })
</스크립트>

완성 된!