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