Category Archives: javascript

Работа с событиями в 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') );

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

Что почитать, чтобы повысить свой уровень JavaScript

От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в …

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;

Сброс очереди анимации на элементе в jquery

Если нужно срочно прекратить анимацию (к примеру, как результат выполнения ajax-запроса), а она всё продолжается, то нужно сделать так:

$el.queue("fx", []);

1	$el.queue("fx", []);

Такое может быть, когда на элементе есть сложная анимация, связанная с отображением элемента, а по результату ajax-запроса элемент нужно скрыть. Подробно об очередях — на сайте jquery

FireBug console.table

В FireBug1.6 появился новый способ вывода — console.table

Пример jquery-ui виджета

Виджет добавляет инпуту кнопки, упрощающие генерацию маски, и строку для показа сгенерированного по маске значения. Виджет выложен исключительно для примера. Использовать напрямую нельзя (только с моего письменного разрешения). К сожалению так, прошу извинить.

Динамическое добавление/удаление полей форм в Django

Задача стояла следующая: есть список сущностей (к примеру, упражнений), каждая из которых в форме выводится в виде нескольких полей ввода (к примеру, сеты и название упражнения), хочется иметь возможность яваскриптом добавлять/удалять упражнения, менять их положение. Для этого были использованы формсеты (django.forms.formsets) и jquery на клиенте. В теории всё так: в шаблон передаём формы из формсета …