Tag Archives: jQuery
Расширение базового функционала jquery-ui-виджетов
Захотелось сделать более правильную работу с триггерением/навешиванием обработчиков на события, чем это реализовано в jquery-ui. При этом сам функционал надоело копировать из виджета в виджет. В общем, вот простой добавить методы к своим виджетам: (function( $ ) { «use strict»; /** * расширение базового функционала jquery-ui */ $.widget( «my.my_extension», { _triggerSmart: function( EventName, Data ) …
Как бороться с повторным добавлением обработчика события в jQuery
Нужно было навешивать и снимать обработчик клика динамически, при этом не затронув чужие обработчики, а их на элементе несколько, каждый ставится своим виджетом. Мой jQuery-ui-виджет навешивает клик только если его ещё нет. Для этого сделан отдельный метод: _bindClick: function() { var me = this; var $me = $( me.element ); // боремся с повторным навешиванием …
Работа с событиями в 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 — аргументы, отвечающие соответственно за запросы к …
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() …
Работа с событиями в jQuery-ui
Если нужно из виджета стриггерить событие, это сделать это можно двумя способами: this.element.trigger( ‘my_event_element’, { option1: true } ); this._trigger( ‘_my_event_widget’, null, { option1: true } ); Допустим, что наш виджет называется MyCoolWidget. Тогда поймать наши события можно так: $( ‘#div’ ).MyCoolWidget(); $( ‘#div’ ). bind( ‘my_event_element’, function( Event, Ui ) { console.dir( Ui ) …
Способ узнать, какие события забиндены на элементе в jQuery
console.log( $( selector ).data(‘events’) ); Выдаст все события, которые слушаются обработчиками на элементе.
jQuery templates (расширение jQuery, шаблонизатор)
Всё достаточно просто. $.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/
jQuery — обработка событий с использованием Namespaced Events
Часто события навешиваются на элементы так: $(‘.class’).bind(‘click’, function(){}); А когда нужно снять обработчик события с элемента, то делается это так: $(‘.class’).unbind(‘click’); При этом слетят все обработчики события click с элемента. Можно снимать только конкретный обработчик, но это не очень удобно. Гораздо удобнее группировать обработчики в неймспэйсы по функциональности, а потом снимать обработчики всего неймспэйса: $(‘.class’).bind(‘click.namespace’, …
Передача параметров с сервера к jQuery. Продвинутый способ.
Старый способ передачи параметров с сервер-сайда на клиент-сайд для 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 …