최고의 jQuery를 UI 위젯 라이브러리를 사용하는 방법 튜토리얼 2024년, 이 튜토리얼에서는 자연,닫기 노트,를 배울 수 있습니다.
우리는 진행 표시 줄을 생성합니다. 호출하기 실시 예에 나타낸 바와 같이 jQuery.widget()
완료하기 위해, 두 개의 매개 변수 : 플러그인 이름이 생성 될 객체를 포함하는 텍스트가 플러그인을 지원하는 기능이다. 플러그가 호출 될 때, 새로운 플러그인 인스턴스를 생성하고, 모든 기능은 본 실시 예의 문맥에서 실행된다. 이 두 가지 중요한 방법으로 다른 표준 jQuery 플러그인. 우선, 콘텍스트 객체가 아니라 DOM 요소이다. 둘째, 컨텍스트는 항상 하나의 객체가 아닌 모음입니다.
$.widget( "custom.progressbar", { _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); } });
플러그인 네임 스페이스의 이름을 포함해야합니다,이 예에서, 우리가 사용하는 custom
네임 스페이스를. 당신은 하나의 층 깊은 네임 스페이스를 만들 수 있습니다, 따라서 custom.progressbar
이름 효과적인 플러그인입니다 very.custom.progressbar
유효한 플러그인 이름입니다.
우리는 부품 라이브러리 (위젯 공장) 두 가지 속성을 우리에게 제공했다. this.element
하나의 요소를 포함하는 객체의 jQuery이다. 우리는 여러 요소를 포함하고있는 jQuery를 플러그인 객체를 호출 할 경우, 각 요소에 대해 별도의 플러그인 인스턴스를 생성되며, 각 인스턴스는 고유해야합니다 this.element
. 두 번째 특성은, this.options
, 플러그 - 인 옵션은 모든 키 이름 / 값 쌍 해시 (해시)를 포함한다. 다음과 같이이 옵션은 플러그인에 전달 될 수있다 :
$( "<div></div>" ) .appendTo( "body" ) .progressbar({ value: 20 });
우리가 호출 할 때 jQuery.widget()
, 제공함으로써 어느 jQuery.fn
jQuery를 확장 할 수있는 기능을 추가 (표준 플러그인 시스템을 만드는 데 사용). 함수 이름은 패스에 따라 추가 jQuery.widget()
"의 ProgressBar"- 네임 스페이스가없는 이름입니다. 플러그 통과 옵션 플러그인 인스턴스에 설정된 값을 얻을 수있다. 다음 예에서와 같이, 우리는 모든 옵션에 기본 값을 지정할 수 있습니다. 당신의 API를 설계 할 때, 당신은 당신의 플러그인의 가장 일반적으로 사용되는 알고 있어야합니다, 그래서 당신은 적절한 기본값을 설정하고 모든 옵션을 진정으로 선택하도록 할 수 있습니다.
$.widget( "custom.progressbar", { // Default options. options: { value: 0 }, _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); } });
이제 우리는 우리의 진행률 표시 줄을 초기화 할 수 있습니다, 우리는 플러그인 인스턴스에서 메서드를 호출하여 작업을 수행합니다. 플러그인 방식을 정의하려면, 우리는 우리가 통과 jQuery.widget()
함수 객체를 참조합니다. 우리는 또한 밑줄 접두사와 함수 이름을 "개인"방법을 정의 할 수 있습니다.
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { var progress = this.options.value + "%"; this.element .addClass( "progressbar" ) .text( progress ); }, // Create a public method. value: function( value ) { // No value passed, act as a getter. if ( value === undefined ) { return this.options.value; } // Value passed, act as a setter. this.options.value = this._constrain( value ); var progress = this.options.value + "%"; this.element.text( progress ); }, // Create a private method. _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } });
플러그인 인스턴스의 메소드를 호출하려면 jQuery 플러그인에 메소드의 이름을 전달할 수 있습니다. 당신이 매개 변수를 허용하는 방법을 호출 할 경우, 당신은 단순히 이러한 매개 변수 뒤에 메소드 이름을 전달합니다.
참고 JQuery와 기능은 상기 방법을 수행하는 플러그인을 초기화하는 데 사용되는 동일한 방법 이름으로 전달된다. 이것은 사슬 메소드 호출을 유지하면서 JQuery와 공간 오염을 방지하기 위해 수행된다. 이후의 장에서, 우리는 다른 용도가 더 자연스럽게 볼 수 있습니다.
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ value: 20 }); // Get the current value. alert( bar.progressbar( "value" ) ); // Update the value. bar.progressbar( "value", 50 ); // Get the current value again. alert( bar.progressbar( "value" ) );
option()
메소드는 자동으로 플러그에 제공된다. option()
메소드는 당신이 얻을 및 초기화 후 설정 옵션을 할 수 있습니다. jQuery의 하나의 방법 .css()
및 .attr()
메소드 : 인수가 사용하는 것 같이 만 이름을 전달할 수 있습니다, 당신은 또한 키 이름 / 값 쌍을 사용하거나 전달 세트 등의 이름과 값을 전달할 수 있습니다 여러 값을 설정하는 해시. 값으로 사용되는 경우, 플러그인이 전류 값에 대응하는 수신 옵션 이름을 반환한다. 세터로 사용되는 경우, 위젯 _setOption
각 옵션을 설정하기위한 메서드가 호출됩니다. 우리는 우리의 플러그인을 지정할 수 있습니다 _setOption
옵션 변경을 반영하는 방법. 작업이 독립적으로 수행 할 수 있도록, 우리가 오버라이드 (override) 할 수있는 옵션을 변경 _setOptions
.
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } });
간단한 확장 변경 플러그인 상태 발생시 사용자가 반응 할 수 있도록 콜백을 추가하는 것이다. 우리는 진행률 표시 줄이 100 %에 도달 할 때 진행률 표시 줄에 콜백을 추가하는 방법은 다음과 같은 예를 볼 수 있습니다. _trigger()
콜백의 이름, 콜백 jQuery를 이벤트 개체를 시작하고, 이벤트와 연관된 데이터의 해시 : 방법은 세 가지 인수를 사용합니다. 콜백 이름이 하나의 매개 변수를 요구하지만, 사용자 정의 플러그인의 사용자 기능을 구현하려는 것입니다, 다른 매개 변수는 매우 유용합니다. 우리가 드래그 플러그인을 작성하는 경우 사용자가 드래그의 x / y 좌표가 제공하는 객체에 따라 이벤트에 응답 할 수 있도록 콜백을 트리거 예를 들어, 우리는 MouseMove 이벤트 끌기 이벤트를 전달할 수 있습니다. 에 전달 유의하시기 바랍니다 _trigger()
대신 기본 브라우저 이벤트의 jQuery를 행사해야합니다 원래 이벤트의.
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); if ( this.options.value == 100 ) { this._trigger( "complete", null, { value: 100 } ); } }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; } });
본질적으로 콜백 함수 만 추가 옵션은 다른 옵션과 동일 얻고으로 설정할 수 있습니다. 콜백이있을 것입니다 때마다 해당 이벤트가 트리거됩니다. 이벤트 유형 이름 및 접속 플러그를 결정하는 콜백 함수의 이름이다. 이하의 실시 예에 도시 된 바와 같이, 특히, 이벤트 객체 및 이벤트와 연관된 데이터의 해시 : 이벤트 콜백은 동일한 두 개의 인자를 받아 들인다. 이렇게하기 위해, 사용자를 방지하기위한 플러그의 기능을 포함 할 수있는 최선의 방법은 콜백을 취소 할 수있다 사랑을 생성하는 것이다. 사용자 콜백 또는 네이티브와 관련된 이벤트가 그들과 함께 어떤 이벤트를 취소 취소 할 수 있습니다, 그들은 호출이다 event.preventDefault()
또는 반환 false
달성하기 위해. 당신이 콜백을 취소 할 경우, _trigger()
메서드는 반환 false
, 그래서 당신은 플러그인에서 해당 기능을 달성 할 수 있습니다.
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar({ complete: function( event, data ) { alert( "Callbacks are great!" ); } }) .bind( "progressbarcomplete", function( event, data ) { alert( "Events bubble and support many handlers for extreme flexibility." ); alert( "The progress bar value is " + data.value ); }); bar.progressbar( "option", "value", 100 );
이제 우리는 플러그인을 만들 위젯 라이브러리 (위젯 공장)를 사용의이 실제로 어떻게 작동하는지 살펴 보자하는 방법을 보았다. 전화를 할 경우 jQuery.widget()
,이 플러그인에 대한 생성자 함수를 만들고 플러그인 인스턴스가 프로토 타입 객체로 전달됩니다 설정합니다. 위젯과 같이 정의 기본 위젯 프로토 타입에서 온다에 모든 기능은 자동으로 추가됩니다 jQuery.Widget.prototype
. 당신이 플러그인 인스턴스가 사용됩니다 만들 때 jQuery.data
원래 DOM 요소에 저장합니다, 플러그인 이름 키 이름으로.
직접 DOM 요소에 연결된 플러그 인스턴스 때문에 직접 플러그인 방식을 통과 할 필요없이, 플러그 - 인스턴스를 액세스 할 수있다. 이 방법을 사용하면 문자열 메소드 이름을 통과 할 필요없이, 플러그인 인스턴스에서 직접 호출 할 수 있습니다, 당신은 또한 속성을 직접 연결에 액세스 할 수 있습니다.
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar() .data( "progressbar" ); // Call a method directly on the plugin instance. bar.option( "value", 50 ); // Access properties on the plugin instance. alert( bar.options.value );
또한, 탐색의 방법없이 플러그의 인스턴스를 생성 할 수 있으며, 옵션 생성자 원소를 직접 호출 :
var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") ); // Same result as before. alert( bar.options.value );
위젯 생성자와 프로토 타입의 가장 큰 장점은 쉽게 확장이다. 추가하거나 방법 플러그 프로토 타입을 수정하여, 우리는 모든 인스턴스의 위젯 동작을 수정할 수 있습니다. 우리는 0 % 진행에 다시 진행 표시 줄에 메서드를 추가 할 경우, 예를 들어, 우리는 모든 플러그인 인스턴스에서 호출 될 프로토 타입에이 방법을 추가 할 수 있습니다.
$.custom.progressbar.prototype.reset = function() { this._setOption( "value", 0 ); };
자세한 내용과 방법을 기존의 위젯 자세한 내용에 새로운 위젯을 만드는 방법에 대한 확장 된 위젯의 경우, 참조 멤버 라이브러리로 확장 위젯 (위젯) (위젯 공장의) .
일부의 경우, 응용 프로그램은 플러그인, 다음 응용 프로그램을 취소 할 수있는 사용자 수 있습니다. 당신은 할 수 있습니다 _destroy()
이 방법을 수행 할 수 있습니다. 에서 _destroy()
메소드 내에서, 당신은 초기화 및 사용 후 플러그 - 인 할 동안 모든 조치를 취소해야합니다. _destroy()
에 의해 .destroy()
메소드가 호출, .destroy()
는 가비지 컬렉션에 사용할 수 있도록 자동으로 호출 DOM 바인딩에서 요소를 제거 할 때 방법은 플러그인 인스턴스입니다. 기본 .destroy()
방법은 또한 일반적으로 이러한 위젯 인스턴스에서 DOM 요소를 제거하는 등 몇 가지 정리 작업, 처리하는 데 사용되는이 요소의 모든 이벤트는, 모든 결합 해제 사용, 결합 해제 위젯 네임 스페이스를 인용 _bind()
이벤트를 추가 할 수 있습니다.
$.widget( "custom.progressbar", { options: { value: 0 }, _create: function() { this.options.value = this._constrain(this.options.value); this.element.addClass( "progressbar" ); this.refresh(); }, _setOption: function( key, value ) { if ( key === "value" ) { value = this._constrain( value ); } this._super( key, value ); }, _setOptions: function( options ) { this._super( options ); this.refresh(); }, refresh: function() { var progress = this.options.value + "%"; this.element.text( progress ); if ( this.options.value == 100 ) { this._trigger( "complete", null, { value: 100 } ); } }, _constrain: function( value ) { if ( value > 100 ) { value = 100; } if ( value < 0 ) { value = 0; } return value; }, _destroy: function() { this.element .removeClass( "progressbar" ) .text( "" ); } });
구성 요소 라이브러리 (위젯 공장) 플러그의 상태를 만들 수있는 방법입니다. 이 사용될 수있는 기타 다른 모델은, 각각 고유의 장점과 단점을 갖는다. 부품 라이브러리 (위젯 공장) 많은 일반적인 문제를 해결하고, 크게 효율을 향상시킬뿐만 아니라 매우 jQuery를 UI 플러그 - 인 다른 상태에 적합하게 코드의 재사용 성을 향상시킨다.
이 섹션에서 우리가 사용할 수 있습니다 custom
네임 스페이스를. ui
네임 스페이스는 공식 jQuery를 UI 플러그인을 예약되어 있습니다. 자신의 플러그인을 만들 때, 당신은 당신의 자신의 네임 스페이스를 만들어야합니다. 더 명확하게하는 등의 범위에 속하는 곳 플러그에서 그래서.