728x90 300x250 SMALL javaScript545 클래스 기반 플러그인 문법 구조 (function($){ function MyClass(){ this.프로퍼티1; this.프로퍼티2; ... } MyClass.prototype.메서드1=function(){ } Myclass.prototype.메서드2=function(){ } $.fn.플러그인이름=function(){ this.each(function(index){ var obj = new MyClass(); // 플러그인 구현 코드가 들어있는 클래스 인스턴스를 생성 }) } })(jQuery); 위의 문법같이 작성하면 메서드를 모두 prototype에 만들기 때문에 만들어져 있는 메서드를 공유해서 사용한다. 즉 메서드를 한번만 만들어서 공유해서 사용할 수 있기 때문에 함수기반 플러그인이 가지고 있던 문제점을 해결할 수 있다. 2023. 10. 17. 선택한 노드 스타일 변경 해당 노드에 색상 변경 스타일 추가 css script html 신규 페이지 헤더 신규 내용 일반 노드 찾기 id로 찾기 tag로 찾기 class로 찾기 속성으로 찾기 자식 노드 찾기 1. 모든 자식 노드 찾기 2. 특정 자식 요소만 찾기 3. 마지막 자식 요소 찾기 푸터 2023. 10. 10. 스크롤 하면 생성되는 top버튼 만들기 - jQuery 플러그인 스크롤 하면 생성되는 top버튼 jQuery 플러그인으로 만들기 Scroll to Top script (function($) { $.fn.scrollToTopButton = function() { var $button = this; // 버튼 클릭 시 페이지 상단으로 스크롤 $button.on('click', function() { $('html, body').animate({scrollTop: 0}, 500); }); // 문서의 스크롤 위치를 감지하여 버튼 표시/숨김 처리 $(document).scroll(function() { if ($(this).scrollTop() > 200) { $button.fadeIn(); } else { $button.fadeOut(); } }); return this;.. 2023. 10. 8. jQuery 플러그인 구조 (function($){ $.fn.플러그인이름 = function(속성값){ this.each(function(index){ //기능구현 }) return this; } })(jQuery) jQuery 유틸리티가 jQuery 클래스 메서드로 만드는 것과 달리 jQuery 플러그인은 jQuery 클래스의 fn이란 곳에 플러그인을 만든다. 여기서 fn은 prototype을 줄여서 쓴 닉네임이다. jQuery.prototype.플러그인이름=function(){} 즉 위 와 같이 쓰는것과 같기 때문에 jQuery 플러그인은 jQuery 인스턴스 메서드와 동일한 구조를 가지고 있다. 같다고 볼 수 있다. 2023. 10. 5. 이전 1 ··· 20 21 22 23 24 25 26 ··· 137 다음 728x90 반응형 LIST