Tag Archives: jQuery-ui

Вышел jQuery-UI 1.9

http://blog.jqueryui.com/2012/10/jquery-ui-1-9-0/, на русском — http://habrahabr.ru/post/154251/. Вроде говорили, что должен был немного обновиться API, но при этом дока по созданию jQuery-UI виджетов не обновлена — http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

Расширение базового функционала 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

Нужно было навешивать и снимать обработчик клика динамически, при этом не затронув чужие обработчики, а их на элементе несколько, каждый ставится своим виджетом. Мой jQuery-ui-виджет навешивает клик только если его ещё нет. Для этого сделан отдельный метод:

_bindClick: function()
{
	var me = this;
	var $me = $( me.element );

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

	$me.bind( 'click.' + me.widgetName, function( Event ) {
	// логика клика, к примеру:
		if ( ! me.options.allowDoubleClick ) {
			$me.unbind( 'click.' + me.widgetName );
		}
	} );
},
//===========================================================================}}}

_bindClick: function()

{

var me = this;

var $me = $( me.element );

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

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

var filteredEvents = [];

if ( 'click' in events )

{

filteredEvents = $.grep( events.click, function( Event ) {

return Event.type == 'click' && Event.namespace == me.widgetName;

} );

}

if ( filteredEvents.length ) {

return;

}

$me.bind( 'click.' + me.widgetName, function( Event ) {

// логика клика, к примеру:

if ( ! me.options.allowDoubleClick ) {

$me.unbind( 'click.' + me.widgetName );

}

} );

//===========================================================================}}}

Работа с событиями в 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 — …