Июн 17
console.log( $( selector ).data('events') );

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

Теги:
Апр 04

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

	$.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>

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

Теги:
Янв 28

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

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

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

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

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

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

При этом есть ещё один очень большой плюс: события разных неймспэйсов не вызывают обработчики друг друга, а click вызовет все обработчики

$('.class').bind('click.namespace', function(){});
$('.class').trigger('click.namespace'); // Вызовет наш обработчик
$('.class').trigger('click');           // Тоже вызовет
$('.class').trigger('click.other');     // Не вызовет

Ссылка на документацию

Теги:
Янв 28

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

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

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

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

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

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

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

var property1Initial = $( ".my-class" ).data().property1;
Теги:
Янв 25

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

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

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

Теги:
Ноя 30

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

Теги:
Ноя 16

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

Теги:
Ноя 10

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

В теории всё так: в шаблон передаём формы из формсета (подводный камень тут – для правильной валидации нужно в шаблоне внутри формы нужно не забыть вписать скрытые инпуты, отвечающие за количество форм формсета на странице, для этого пишем в шаблоне {{ exercisesFormset.management_form }}).
В шаблоне у каждого упражнения присутствуют контролы для удаления/добавления и перемещения упражнений, после загрузки страницы ненужные контролы у каждого упражнения скрываются, а после, к примеру, добавления нового упражнения контролы перерисовываются.
Для удаления все поля ввода упражнения очищаются, после чего скрываются.

Это была теория, теперь практика. Ниже гольный код с комментариями.
Continue reading »

Теги:
Окт 22

Постоянно забываю запись всех атрибут селекторов для jquery. Памятка с примерами использования:
1. Элемент с атрибутом [A]
Выбирает все элементы с атрибутом.
Пример:

$( "checkbox[checked]" )

Выбрать все чекбоксы с атрибутом «checked».
2. Элемент с атрибутом A, равным B [A=B]
Пример:

$( "input[name='my-name']" )

Выбрать все инпуты с атрибутом «name», равным «my-name».
3. Элемент с атрибутом A, не равным B [A!=B]
Пример:

$( "input[name!='my-name']" )

Выбрать все инпуты с атрибутом «name», не равным «my-name».
4. Элемент с атрибутом A, начинающимся с B [A^=B]
Пример:

$( "input[name^='my-nam']" )

Выбрать все инпуты с атрибутом «name», начинающимся с «my-nam».
5. Элемент с атрибутом A, заканчивающимся на B [A$=B]
Пример:

$( "input[name$='-name']" )

Выбрать все инпуты с атрибутом «name», заканчивающимся на «-name».
6. Элемент с атрибутом A, содержащим B [A*=B]
Пример:

$( "input[name*='y-n']" )

Выбрать все инпуты с атрибутом «name», содержащим «y-n».
7. Элемент с атрибутом A, содержащим префикс B [A|=B]
Выбирает все элементы, у которых атрибут A равен B или начинается с B и дефиса.
Пример:

$( "input[name|=my]" )

Выбрать все инпуты с атрибутом «name», равным «my» или начинающимся с «my».
8. Элемент с атрибутом A, содержащим B, ограниченный пробельными символами [A~=B]
Пример:

$( "input[name~='my-name']" )

Выбрать все инпуты с атрибутом «name», равным «my-name» или, к примеру «my-name your-name».

http://api.jquery.com/category/selectors/

Теги:
Окт 06
	arraysAreEqual: function( Arr1, Arr2 )
	{
		var equal = ( Arr1.length == Arr2.length );
		if ( equal )
		{
			$.each( Arr1, function ( key, val ) {
				if ( $.inArray( val, Arr2 ) == -1 )
				{
					equal = false;
					return false;
				}
			} );
		}
		return equal;
	},
Теги:
preload preload preload