2010-11-24 2 views
1

Я знаю, что многие люди задают вопросы о подключаемых модулях и обратных вызовах (и я читал много из них - вот как я добрался до этого), поэтому, пожалуйста, несите меня. Я попробовал свою руку в очень простом плагине типа hide/show accordion для часто задаваемых вопросов и добился успеха в том, чтобы заставить его делать то, что я хотел. Однако, поскольку я все еще участвую, я не совсем уверен, как некоторые вещи работают. Мне удалось добавить обратный вызов к плагину после прочтения this question и нескольких других.
Мой вопрос: Правильно ли этот код и есть ли лучший способ реализовать этот обратный вызов? Вот working sample и код ниже. Спасибо за ваше время.jQuery пользовательский плагин обратный вызов - новый вопрос

(function($) { 
$.fn.simpleFAQ = function(options, callback) { 
    // define default options 
    var defaults = { 
     textExpand  : "Expand all", 
     textCollapse : "Collapse all", 
     displayAll  : false, 
     toggleSpeed  : 250 
    }; 
    var options = $.extend(defaults, options); 
    // callback 
    if(typeof callback != "function") { callback = function(){} } 

    this.each(function() { 
     obj = $(this); 
     // insert FAQ expand all/collapes all text before FAQ 
     var txt = '<span class="simple_jfaqText"><a href="javascript:;" rel="jfaq_expand">' + options.textExpand + '</a>/<a href="javascript:;" rel="jfaq_collapse">' + options.textCollapse + '</a></span>'; 
     $(txt).insertBefore(obj); 

     // add class to desired FAQ element 
     obj.addClass('simple_jfaq'); 

     // show/hide faq answers according to displayAll option 
     (options.displayAll == false) ? ddDisplay = 'none' : ddDisplay = 'block'; 
     obj.children('dd').css('display', ddDisplay); 


     // add classes according to <dd> state (hidden/visible) 
     obj.children('dd:visible').prev('dt').addClass('expanded'); 
     obj.children('dd:hidden').prev('dt').addClass('collapsed'); 

     obj.children('dt') 
      .click(function() { 
       // show/hide all answers (dd elements) on click 
       $(this).nextUntil('dt').slideToggle(options.toggleSpeed, callback); 
       // dt class change on click 
       $(this).toggleClass('collapsed').toggleClass('expanded'); }) 
      .hover(function() { $(this).toggleClass('hover'); }, function(){ $(this).toggleClass('hover'); }); 
    }); 

    // Expand All 
    obj.prev('span').children('a[rel=jfaq_expand]').click(function() { 
     // show all answers 
     $(this).parent('span').next('.simple_jfaq').children('dd:hidden').slideToggle(options.toggleSpeed); 
     setTimeout(callback, options.toggleSpeed) 
     // change classes 
     $(this).parent('span').next('.simple_jfaq').children('dt').removeClass('collapsed').addClass('expanded'); 
    }); 

    // Collapse all 
    obj.prev('span').children('a[rel=jfaq_collapse]').click(function() { 
     // hide all answers 
     $(this).parent('span').next('.simple_jfaq').children('dd:visible').slideToggle(options.toggleSpeed); 
     setTimeout(callback, options.toggleSpeed); 
     // change classes 
     $(this).parent('span').next('.simple_jfaq').children('dt').removeClass('expanded').addClass('collapsed'); 
    }); 
}; 
})(jQuery); 

ответ

0

Возможно, было бы хорошо, если бы обратный вызов выполнялся в контексте некоторого релевантного элемента.

var clicked = this; 
setTimeout(function() { callback.call(clicked); }, options.toggleSpeed); 
1

Я бы порекомендовал использовать jQuery's in event system для этого. Вы можете инициировать событие на любом узле, тогда пользователь кода часто задаваемых вопросов может привязываться к этому событию на этом узле. Вы даже можете передавать данные в функцию привязки.

Конечно, моя настоящая рекомендация - использовать my plug-in с тем же именем. :)

+0

Спасибо за ответ. Я только что понял, что видел ваш плагин, прежде чем я разместил свой и связался с ним (http://leo.dolcepixels.com/learning/jquery/simple-faq-jquery-plugin/). Я только пытался с нуля, чтобы учиться с самого начала. Я лучше рассмотрю ваш код и повторю попытку. Спасибо. – Leo 2011-01-24 14:31:09

Смежные вопросы