Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.12.2011, 07:35
Новичок на форуме
Отправить личное сообщение для xezzus Посмотреть профиль Найти все сообщения от xezzus
 
Регистрация: 30.12.2011
Сообщений: 2

Создание плагина: вызов callback функции при событии например click
Накатал небольшой плагинчик:
(function($){
  $.fn.select = function(opt){
    // предварительно
    def = {
      "list":{},
    };
    set = $.extend({},def,opt);
    var $this = $(this);
    return this.each(function(){
      // наполнение
      for(i in opt.list){
        $this.append('<li val="'+i+'">'+opt.list[i]+'</li>');
      }
      // стиль
      $this.addClass('jquery_select');
      $this.children('li').addClass('jquery_select_off');
      // выбор
      $.test = function(){alert('test');}
      $this.children('li').toggle(
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_off').addClass('jquery_select_on');
        },
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_on').addClass('jquery_select_off');
        }
      );
    });
  }
})(jQuery);

ul.jquery_select {padding:0px;list-style:none;width:100%;overflow:auto;height:100px;background:#E6E6E6;border-left:1px solid #A61919;}
ul.jquery_select li {cursor:pointer;padding:0px 13px 0px 13px;}
li.jquery_select_off {border-bottom:1px solid #D9D9D9;border-top:1px solid #F2F2F2;}
li.jquery_select_on {background:#A61919;color:#fff;border-bottom:1px solid #991717;border-top:1px solid #B31B1B;}


В данный момент работает, но он не завершен. Для полного счастья хочется получать выбранные элементы при каждом клике через callback функцию. Следуя логике я делаю так:
(function($){
  $.fn.select = function(opt){
    // предварительно
    def = {
      "list":{},
      "func":function(){}
    };
    set = $.extend({},def,opt);
    var $this = $(this);
    return this.each(function(){
      // наполнение
      for(i in opt.list){
        $this.append('<li val="'+i+'">'+opt.list[i]+'</li>');
      }
      // стиль
      $this.addClass('jquery_select');
      $this.children('li').addClass('jquery_select_off');
      // выбор
      $.test = function(){alert('test');}
      $this.children('li').toggle(
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_off').addClass('jquery_select_on');
          set.func.call(this);
        },
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_on').addClass('jquery_select_off');
          set.func.call(this);
        }
      );
    });
  }
})(jQuery);


И вот казалось бы:

$('#select').select({
        "list":["Россия","Украина","Беларусь","Болгария","Словакия","Словения"],
        "func":function(dat){alert(dat);}
      });

<ul id="select"></ul>


но, стоит только поместить функцию обратного вызова в нутрь какого либо события и она перестаёт работать.

Буду рад услышать ваши мысли по данному вопросу.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов функции при загрузке страницы disallow jQuery 6 24.07.2012 15:19
вызов функции при смене url vvsh Events/DOM/Window 4 11.08.2011 19:01
не получается вызов функции при наведении курсора oleg_zhukov Events/DOM/Window 2 24.03.2010 12:09