Tag Archives: trigger
Расширение базового функционала jquery-ui-виджетов
Захотелось сделать более правильную работу с триггерением/навешиванием обработчиков на события, чем это реализовано в jquery-ui. При этом сам функционал надоело копировать из виджета в виджет. В общем, вот простой добавить методы к своим виджетам:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
(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 )); |
Потом для каждого виджета нужно будет указать опциональный второй параметр
1 2 3 4 5 |
$.widget( "my.fast_search", $.my.my_extension, { options: { ... |
Внимание нужно обратить на второй параметр $.my.my_extension, который в …
Работа с событиями в jQuery-ui
Если нужно из виджета стриггерить событие, это сделать это можно двумя способами:
1 |
this.element.trigger( 'my_event_element', { option1: true } ); |
1 |
this._trigger( '_my_event_widget', null, { option1: true } ); |
Допустим, что наш виджет называется MyCoolWidget. Тогда поймать наши события можно так:
1 2 3 4 |
$( '#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 — …