Расширение базового функционала jquery-ui-виджетов

Захотелось сделать более правильную работу с триггерением/навешиванием обработчиков на события, чем это реализовано в jquery-ui. При этом сам функционал надоело копировать из виджета в виджет. В общем, вот простой добавить методы к своим виджетам:

(function( $ )
{
	"use strict";
/**
 * расширение базового функционала jquery-ui
 */
	$.widget( "my.my_extension", {
		_triggerSmart: function( EventName, Data )
		{
			var me = this;
			var $me = $( me.element );

			$me.trigger( EventName + '.' + me.widgetName, Data );
			return me;
		},
		_bindSmart: function( EventName, Handler )
		{
			var me = this;
			var $me = $( me.element );

		// боремся с повторным навешиванием обработчика
			var events = $.data( $me.get( 0 ), 'events' );
			var filteredEvents = [];
			if ( EventName in events )
			{
				filteredEvents = $.grep( events[EventName], function( Event ) {
					return Event.type == EventName && Event.namespace == me.widgetName;
				} );
			}
			if ( ! filteredEvents.length ) {
				$me.bind( EventName + '.' + me.widgetName, Handler );
			}
			return me;
		}
	} );
}( jQuery ));

(function( $ )

{

"use strict";

/**

* расширение базового функционала jquery-ui

$.widget( "my.my_extension", {

_triggerSmart: function( EventName, Data )

{

var me = this;

var $me = $( me.element );

$me.trigger( EventName + '.' + me.widgetName, Data );

return me;

_bindSmart: function( EventName, Handler )

{

var me = this;

var $me = $( me.element );

// боремся с повторным навешиванием обработчика

var events = $.data( $me.get( 0 ), 'events' );

var filteredEvents = [];

if ( EventName in events )

{

filteredEvents = $.grep( events[EventName], function( Event ) {

return Event.type == EventName && Event.namespace == me.widgetName;

} );

}

if ( ! filteredEvents.length ) {

$me.bind( EventName + '.' + me.widgetName, Handler );

}

return me;

}

} );

}( jQuery ));

Потом для каждого виджета нужно будет указать опциональный второй параметр

$.widget( "my.fast_search", $.my.my_extension,
	{
		options:
		{
			...

$.widget( "my.fast_search", $.my.my_extension,

{

options:

{

...

Внимание нужно обратить на второй параметр $.my.my_extension, который в …

Работа с событиями в jQuery-ui

Если нужно из виджета стриггерить событие, это сделать это можно двумя способами:

this.element.trigger( 'my_event_element', { option1: true } );

1	this.element.trigger( 'my_event_element', { option1: true } );

this._trigger( '_my_event_widget', null, { option1: true } );

1	this._trigger( '_my_event_widget', null, { option1: true } );

Допустим, что наш виджет называется MyCoolWidget. Тогда поймать наши события можно так:

$( '#div' ).MyCoolWidget();
$( '#div' ).
	bind( 'my_event_element', function( Event, Ui ) { console.dir( Ui ) } ).
	bind( 'mycoolwidget_my_event_widget', function( Event, Ui ) { console.dir( Ui ) } );

$( '#div' ).MyCoolWidget();

$( '#div' ).

bind( 'my_event_element', function( Event, Ui ) { console.dir( Ui ) } ).

bind( 'mycoolwidget_my_event_widget', function( Event, Ui ) { console.dir( Ui ) } );

Обратите внимание на второй bind — префиксом к событию в этом случае явлется название виджета в нижнем регистре. Кстати, есть ещё один способ обработать событие от this._trigger — …

Tag Archives: trigger

Расширение базового функционала jquery-ui-виджетов

Работа с событиями в jQuery-ui