NilColor

Куда ж еще записать, как не сюда?
Итак, есть идея – сделать свой виджет для jQueryUI. Почему именно эта библиотека? А не важно. Просто мне она нравится. Итак, виджет. Вот “скелет” для виджета плюс несколько забавностей, на которые я набрел:

(function($, window, document, undefined){
  //handy log function
  window.log = function(){
    log.history = log.history || [];
    log.history.push(arguments);
    if(this.console)
      console.log( Array.prototype.slice.call(arguments) );
  };

  $.extend($.expr[':'], {
    lookup: function(a){return a.getAttribute('t2-ui-role') === 'lookup';}
  });

  var Lookup = {
    options: {
      version: '0',
      icon: 'search'
    },
    currentlyActiveLookup: null,
    _create: function(){
      var self = this,
          el = self.element;
      self.options.icons.primary = self.icon;
      //log('element IS'+(el.jquery?'':' NOT')+' jQuery object');

      $.ui.button.prototype._create.apply(self);

      self._setOption('icons', {
        primary:'ui-icon-'+self.options.icon,
        secondary:null
      });

      el.bind('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        $(e.target).trigger('lookup.t2', {lookup:this});
        self._trigger('activated', null, {lookup:this});
        return false;
      });
    },
    _init: function(){ log('_init'); },
    boom: function(){ log('nice, you boom me!'); }
  };

  $.widget('t2.lookup', $.ui.button, Lookup);//NS doesn't mean something yet

  //====================== RUN CODE HERE ======================
  $('#id_ref_button').button({icons:{primary: "ui-icon-search"}});

  var l1 = $(':lookup').lookup({
    activated: function(e, data){ //tightly coupled
      log('activated callback fired');
      log('  '+data, data.lookup);
    }
  });
  // a-la Observer Pattern
  $('body').bind('lookup.t2', function(e, data){ //loosely coupled v.1
    log('lookup.t2 event catched');
    log('  '+data, data ? data.lookup : 'nope');
  });
  $('body').bind('lookupactivated', function(e, data){ //loosely coupled v.2
    log('lookupactivated event catched');              //why not activated.lookup?
    log('  '+data, data.lookup);
  });

  l1.lookup('boom');

})(jQuery, window, window.document)

Самое странное – это то, как виджет может общаться с внешним миром… Итак, есть конечно стандартный (для пользователей jQuery) способ .trigger(). Ловить такие события можно тоже стандартным способом – .bind(). Тут вроде все просто и все понятно. Далее, jQueryUI предлагает свой способ: this._trigger(type, event, data). Где первый параметр это имя события, второй – это jQuery.Even object. Третий – это что-то, что вы еще хотите передать в это событие. Учтите, что третий параметр передается используя .apply(), так что если там будет массив — он развернется в список аргументов. Это влияет на то, как писать сигнатуру колбэка и обсервера событий
А вот такие события уже можно ловить 2мя способами:

1. callback — .lookup({ activated: function(){} })
2. observer — .bind('lookupactivated', function(){} )

Мне больше нравится второй вариант. Во-первых, Event Bubbling позволяет навесить обработчик на контейнер, где эти виджеты появляются и убрать код из инициализации этих виджетов при получении данных с помощью AJAX. Во-вторых это просто красиво.
Единственный тут минус – это название этого события… Оно строится самим jQueryUI и представляет собой widget_name + event_nameбез точек и пробелов… Ну… зато плюсы хороши и приятны. Среди плюсов также то, что третий параметр для данного способа не развернется (в случае, если это массив) в аргументы.
Кстати, в данном примере я “наследовался” от уже существующего виджета $.ui.button, но если без этого – просто не указывайте второй параметр при регистрации виджета $.widget('t2.lookup', $.ui.button, Lookup);. Кстати, namespace, указываемый при регистрации ничего не значит. По крайней мере пока ничего. Так что можно делать свой или использовать тот, что использует сама jQueryUI ($.widget('ui.lookup', Lookup);) — выбирайте сами. Как это все работает и вообще попробовать самому можно на мега полезном ресурсе JSBin.

P.S.
Надо бы кстати написать про мега удобный кусок кода… В след. раз.

(function($, window, document, undefined){
  //code goes here
})(jQuery, window, window.document)

(: