jQueryUI Plug-in template

http://jquery.page2page.ru/index.php5/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0_jQuery

by Alexey Demin

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">

JavaScript

(function($){
  jQuery.fn.responsiveBlock = function(options){
    options = $.extend({
      defColor:"white", //цвет элемента над которым нет курсора
      hoverColor:"red" //цвет элемента на который наведен курсор
    }, options);
    var make = function(){
      // здесь переменная this будет содержать отдельный
      // DOM-элемент, к которому и нужно будет применить
      // воздействия плагина
      $(this).css("background-color",options.defColor)
      .mouseenter( function(){
        $(this)
        .css("background-color",options.hoverColor)
        .trigger('responsiveBlock.stateChange'); //-вызов события
      })
      .mouseleave( function(){
        $(this)
        .css("background-color",options.defColor)
        .trigger('responsiveBlock.stateChange'); //-вызов события
      });
    };
 
    return this.each(make); 
  };
})(jQuery);
 
 
// теперь к элементам страницы можно будет привязывать обработчики события stateChange:
$('div').on('responsiveBlock.stateChange', handler);