jquery plugin4 jQuery 플러그인 4 - 년도 select 박스 만들기 웹페이지에서 간단한 년도 선택상자(select 박스, 콤보 박스, 드롭다운 리스트)를 jQuery 플러그인으로 만들어 보겠습니다. 달력까지 제공되는 자바스크립트로된 UI 들이 많이 있지만, jQuery 플러그인 연습도 해볼겸 간단하게 사용할 수 있는 년도 선택상자를 만들어 봅니다. 보통 자바스크립트로 UI 를 만들때 요소를 사용해서 만들어질 곳을 표시하고, 스크립트에서 동적으로 태그를 교체하여 생성을 합니다. 이번 예제에서는 간단히 하기 위해서 요소를 직접 사용하여 내용을 동적으로 채울 수 있도록 합니다. 즉, 모양을 바뀌지 않는다는 것입니다. 요소의 옵션을 년도로 간편하게 채울 수 있는 초 간단 플러그인이 되겠습니다. * 기본적인 기능은 2010년을 시작 년도로하고, 마지막 년도는 현재년도 + 1 년까.. 2018. 4. 12. jQuery 플러그인 3 - 확장 기능 제공 플러그인에서 외부에서 접근 가능한 기능을 서브 함수로 제공하도록 합니다. 이렇게 공개된 기능으로 제공하게 되면 사용자가 쉽게 기능을 재정의해서 사용할 수 있습니다. jQuery 플러그인 테스트 1. 테스트용 DIV 입니다. 2. 테스트용 DIV 입니다. 3. 테스트용 DIV 입니다. 함수를 공개로 제공하는 것이 항상 좋은 것은 아닙니다. 필요에 따라 비공개 함수로 유지할 필요가 있는것도 있습니다. 예제에서와 같은 debug 함수는 비공개로 두는 것이 나을 것입니다. 플러그인 내에서 DOM에 추가할 요소를 만드는 경우 플러그인 사용자에게 이러한 요소에 액세스 할 수 있는 방법을 제공하는 것이 좋습니다. 플러그인 내에서 다음과 같이 추가적인 요소를 생성하게 되면 추가 요소의 클래스를 사용자가 수정하기 어렵게.. 2018. 4. 10. jQuery 플러그인 2 - 기본값 사용자 재정의 아래의 예제는 이전 글 "jQuery 플러그인 1 - 기본적인 플러그인 만들기" 에서 마지막에 보았던 플러그인에 기본값을 제공하는 예제 입니다. (function($) { $.fn.greenify = function( options ) { // 기본 옵션을 제공하는 가장 간단한 방법입니다. var settings = $.extend({ // 이것이 기본값들입니다. color: "#556b2f", backgroundColor: "white" }, options ); // 설정 변수를 기반으로 스타일을 지정합니다. return this.css({ color: settings.color, backgroundColor: settings.backgroundColor }); }; }(jQuery)); 이 플러그인을.. 2018. 4. 10. jQuery 플러그인 1 - 기본적인 플러그인 만들기 jQuery 플러그인은 jQuery의 프로토타입 객체를 확장하는 새로운 메소드를 추가하는 것입니다. 우리가 새로 추가한 기능은 jQuery의 모든 기능을 상속 받아 바로 사용할 수 있습니다. jQuery에 기능을 추가한다는 개념이지만, 우리가 사용할 때는 jQuery의 기능을 모두 사용할 수 있는 우리의 기능을 만든다고 생각하면 되겠습니다. 물론 jQuery 플러그인으로 기능을 만들지 않고 직접 기능을 수행하는 클래스를 만들고, 필요한 곳에 jQuery를 사용하도록 하는 방법도 있습니다. 어떤 방법으로 만들지는 자신의 선택이겠습니다. 자신이 편리한 방법으로 만들면 될 것 같습니다. 필요에 의해 jQuery플러그인을 만들어야 겠다고 생각을 했다면, 먼저 미리 만들어져 있는 것들중에 같은 기능을 하는 프로그.. 2018. 4. 9. 이전 1 다음
