console.log( $( selector ).data('events') );
Выдаст все события, которые слушаются обработчиками на элементе.
console.log( $( selector ).data('events') );
Выдаст все события, которые слушаются обработчиками на элементе.
Всё достаточно просто.
$.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/
Часто события навешиваются на элементы так:
$('.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'); // Не вызовет
Старый способ передачи параметров с сервер-сайда на клиент-сайд для 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;
Если нужно срочно прекратить анимацию (к примеру, как результат выполнения ajax-запроса), а она всё продолжается, то нужно сделать так:
$el.queue("fx", []);
Такое может быть, когда на элементе есть сложная анимация, связанная с отображением элемента, а по результату ajax-запроса элемент нужно скрыть.
Подробно об очередях – на сайте jquery
В FireBug1.6 появился новый способ вывода – console.table
Виджет добавляет инпуту кнопки, упрощающие генерацию маски, и строку для показа сгенерированного по маске значения.
Виджет выложен исключительно для примера.
Использовать напрямую нельзя (только с моего письменного разрешения). К сожалению так, прошу извинить.
Continue reading »
Задача стояла следующая:
есть список сущностей (к примеру, упражнений), каждая из которых в форме выводится в виде нескольких полей ввода (к примеру, сеты и название упражнения), хочется иметь возможность яваскриптом добавлять/удалять упражнения, менять их положение.
Для этого были использованы формсеты (django.forms.formsets) и jquery на клиенте.
В теории всё так: в шаблон передаём формы из формсета (подводный камень тут – для правильной валидации нужно в шаблоне внутри формы нужно не забыть вписать скрытые инпуты, отвечающие за количество форм формсета на странице, для этого пишем в шаблоне {{ exercisesFormset.management_form }}).
В шаблоне у каждого упражнения присутствуют контролы для удаления/добавления и перемещения упражнений, после загрузки страницы ненужные контролы у каждого упражнения скрываются, а после, к примеру, добавления нового упражнения контролы перерисовываются.
Для удаления все поля ввода упражнения очищаются, после чего скрываются.
Это была теория, теперь практика. Ниже гольный код с комментариями.
Continue reading »
Постоянно забываю запись всех атрибут селекторов для 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».
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;
},