Tag Archives: jQuery

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

В jQuery 1.7 добавили .on() и .off() для единообразия работы с событиями. bind, live и delegate могли вести себя непредсказуемо при использовании вместе. Например, $(document).unbind(‘click’) убирал все live(‘click’)-события со всего документа. Новое API событий .on() and .off() призвано как-то унифицировать систему создания обработчиков событий: Старое API Новое API $(elems).bind(events, fn) $(elems).on(events, fn) $(elems).bind(events, { mydata: 42 }, …

jQuery.deferred

В jQuery 1.5 была полностью переработана модель асинхронных запросов. Теперь они возвращают deferred-объект, содержащий promise-объект, который содержит методы, позволяющие узнать состояние запроса или навесить дополнительные обработчики. promise-Объект содержит методы then, done, fail, isResolved и isRejected. Суть нового подхода состоит в следующем:

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
	// a1 и a2 - аргументы, отвечающие соответственно за запросы к страницам page1 и page2
	var jqXHR = a1[2]; /* массив состоит из [ "success", statusText, jqXHR ] */
	if ( /Оппа!/.test(jqXHR.responseText) ) {
		alert("Где-то на первой странице есть 'Оппа!'.");
	}
});

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1, a2){

// a1 и a2 - аргументы, отвечающие соответственно за запросы к страницам page1 и page2

var jqXHR = a1[2]; /* массив состоит из [ "success", statusText, jqXHR ] */

if ( /Оппа!/.test(jqXHR.responseText) ) {

alert("Где-то на первой странице есть 'Оппа!'.");

}

});

$.when принимает deferred-объект или объекты и возвращает promise-объект. Можно делать и так:

var $promise;
if ( tt == 1 ) {
	$promise = $.when( $.getJSON( ... ) );
}
else if ( tt == 2 ) {
	$promise = $.when( $.getJSON( ... ), $.getJSON( ... ), $.post( ... ) );
}
else {
	$promise = $.when( console.log( 'else' ) );
}
$promise.
	then( function() { console.log( 'done', data ) } );

var $promise;

if ( tt == 1 ) {

$promise = $.when( $.getJSON( ... ) );

}

else if ( tt == 2 ) {

$promise = $.when( $.getJSON( ... ), $.getJSON( ... ), $.post( ... ) );

}

else {

$promise = $.when( console.log( 'else' ) );

}

$promise.

then( function() { console.log( 'done', data ) } );

…

jQuery.delegate

jQuery.delegate и jQuery.undelegate появились в jQuery 1.4.2. Это аналоги .live и .die(). У .live и .die() есть проблемы с, к примеру, вложенными объектами, с встраиванием в цепочки и много ещё. Синтаксис .delegate отличается от .live и, соответственно, .click и т.п. Пример использования:

// Using .live()
	$("table").each(function(){
		$("td", this).live("hover", function(){
			$(this).toggleClass("hover");
		});
	});
// Using .die()
	$("table").each(function(){
		$("td", this).die("hover");
	});

// Using .delegate()
	$("table").delegate("td", "hover", function(){
		$(this).toggleClass("hover");
		});
// Using .undelegate()
	$("table").undelegate("td", "hover");

// Using .live()

$("table").each(function(){

$("td", this).live("hover", function(){

$(this).toggleClass("hover");

});

// Using .die()

$("table").each(function(){

$("td", this).die("hover");

});

// Using .delegate()

$("table").delegate("td", "hover", function(){

$(this).toggleClass("hover");

});

// Using .undelegate()

$("table").undelegate("td", "hover");

http://api.jquery.com/delegate/ Работа с событиями в jQuery 1.7+

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

console.log( $( selector ).data('events') );

1	console.log( $( selector ).data('events') );

Выдаст все события, которые слушаются обработчиками на элементе.

jQuery templates (расширение jQuery, шаблонизатор)

Всё достаточно просто.

	$.getJSON( me.options.urlMoreResults )
		.success( function( Answer )
			{
				$( '#my-tmpl' ).tmpl( Answer );
			}
		);

$.getJSON( me.options.urlMoreResults )

.success( function( Answer )

{

$( '#my-tmpl' ).tmpl( Answer );

}

);

Шаблон:

	<script id="my-tmpl" type="text/x-jquery-tmpl">
			<div>
				{{if songs}}
					<ul class="song-list">
						{{each songs}}
							<li>
								<a class="play js-play" href="javascript:void(0);" data-song="${$value.id}"></a>
							</li>
						{{/each}}
					</ul>
				{{/if}}

				{{if description}}
					<div class="description">
						<a href="${url}/about" target="_blank">
							${description}
						</a>
					</div>
				{{/if}}
			</div>
	</script>

<div>

<li>

</li>

</ul>

${description}

</a>

</div>

</script>

http://api.jquery.com/category/plugins/templates/ http://habrahabr.ru/blogs/jquery/112843/ http://habrahabr.ru/blogs/jquery/113672/

jQuery — обработка событий с использованием Namespaced Events

Часто события навешиваются на элементы так:

$('.class').bind('click', function(){});

1	$('.class').bind('click', function(){});

А когда нужно снять обработчик события с элемента, то делается это так:

$('.class').unbind('click');

1	$('.class').unbind('click');

При этом слетят все обработчики события click с элемента. Можно снимать только конкретный обработчик, но это не очень удобно. Гораздо удобнее группировать обработчики в неймспэйсы по функциональности, а потом снимать обработчики всего неймспэйса:

$('.class').bind('click.namespace', function(){}); 
$('.class').bind('click.namespace', function(){}); 
$('.class').trigger('click.namespace');
$('.class').unbind('click.namespace');

$('.class').bind('click.namespace', function(){});

$('.class').trigger('click.namespace');

$('.class').unbind('click.namespace');

При …

Передача параметров с сервера к jQuery. Продвинутый способ.

Старый способ передачи параметров с сервер-сайда на клиент-сайд для jQuery обычно выглядел так:

<div class="my-class" property1="prop1-value" property2="prop2-value">текст</div>

1	<div class="my-class" property1="prop1-value" property2="prop2-value">текст</div>

Потом в скрипте можно было обращаться к свойствам DOM-элемента

var property1Initial = $( ".my-class" ).attr( "property1" );

1	var property1Initial = $( ".my-class" ).attr( "property1" );

Есть более интересный способ, использующий jQuery data:

<div class="my-class" data-property1="prop1-value" data-property2="prop2-value">текст</div>

1	<div class="my-class" data-property1="prop1-value" data-property2="prop2-value">текст</div>

В скрипте можно обратиться к этим свойствам так:

var property1Initial = $( ".my-class" ).data().property1;

1	var property1Initial = $( ".my-class" ).data().property1;