Программирование функции обратного вызова в плагине jQuery
Я пишу плагин jQuery, таким образом, я могу снова использовать этот код во многих местах, поскольку это - очень хорошо используемая часть кода, сам код добавляет новую строку к таблице, которая была клонирована от скрытой строки, он продолжает выполнять загрузку манипуляций на новой строке.
Я в настоящее время ссылаюсь на него как это:
$(".abc .grid").grid();
Но я хочу включать обратный вызов так каждая область, от которой называют плагин, может сделать что-то немного более уникальное, когда строка была добавлена. Я использовал плагин Ajax jQuery прежде, поэтому использовали success функция обратного вызова, но не может понять, как код работает в фоновом режиме. Вот то, чего я хочу достигнуть:
$(".abc .grid").grid({
row_added: function() {
// do something a bit more specific here
}
});
Вот мой сменный код
(function($){
$.fn.extend({
//pass the options variable to the function
grid: function() {
return this.each(function() {
grid_table=$(this).find('.grid-table > tbody');
grid_hidden_row=$(this).find('.grid-hidden-row');
//console.debug(grid_hidden_row);
$(this).find('.grid-add-row').click(function(event) {
/*
* clone row takes a hidden dummy row, clones it and appends a unique row
* identifier to the id. Clone maintains our jQuery binds
*/
// get the last id
last_row=$(grid_table).find('tr:last').attr('id');
if(last_row===undefined) {
new_row=1;
} else {
new_row=parseInt(last_row.replace('row',''),10)+1;
}
// append element to target, changes it's id and shows it
$(grid_table).append($(grid_hidden_row).clone(true).attr('id','row'+new_row).removeClass('grid-hidden-row').show());
// append unique row identifier on id and name attribute of seledct, input and a
$('#row'+new_row).find('select, input, a').each(function(id) {
$(this).appendAttr('id','_row'+new_row);
$(this).replaceAttr('name','_REPLACE_',new_row);
});
// disable all the readonly_if_lines options if this is the first row
if(new_row==1) {
$('.readonly_if_lines :not(:selected)').attr('disabled','disabled');
}
});
$(this).find('.grid-remove-row').click(function(event) {
/*
* Remove row does what it says on the tin, as well as a few other house
* keeping bits and pieces
*/
// remove the parent tr
$(this).parents('tr').remove();
// recalculate the order value5
//calcTotal('.net_value ','#gridform','#gridform_total');
// if we've removed the last row remove readonly locks
row_count=grid_table.find('tr').size();
console.info(row_count);
if(row_count===0) {
$('.readonly_if_lines :disabled').removeAttr('disabled');
}
});
});
}
});
})(jQuery);
Я сделал обычно поиск на elgooG..., но я, кажется, получаю много шума с небольшим результатом, любая справка значительно ценилась бы.
Спасибо!
2 ответа
Может быть, что-то вроде этого?
$.fn.extend({
//pass the options variable to the function
grid: function(callbacks) {
// The following can be used so you don't need
// to test for callback existence in the rest
// of the plugin
var defaults = {
before: function() {},
after: function() {},
row_added: function() {}
}
callbacks = $.extend({},defaults,callbacks);
// perform callback
if (callbacks.before)
callbacks.before();
return this.each(function() {
// do stuff
if (callbacks.row_added)
callbacks.row_added();
// do more stuff
}
// perform callback
if (callbacks.after)
callbacks.after();
}
});
Назовите это примерно так:
$("#grid").grid({
before: function() {},
after: function() {},
row_added: function() {}
});
РЕДАКТИРОВАТЬ: Я просто добавил обратные вызовы по умолчанию, чтобы вам не нужно было проверять наличие обратных вызовов. Лично я предпочитаю просто проверить их существование, прежде чем вызывать их, но вы можете предпочесть этот маршрут.
Yuo может прочитать этот пост:
http://www.learningjquery.com/2009/03/making-a-jquery-plugin-truly-customizable
который содержит параграф о предоставлении возможностей обратного вызова...
var defaults = {
onImageShow : function(){}, // we define an empty anonymous function
// so that we don't need to check its
// existence before calling it.
// ... rest of settings ...
};
// Later on in the plugin:
$nextButton.bind('click', showNextImage);
function showNextImage() {
// DO stuff to show the image here...
// ...
// Here's the callback:
settings.onImageShow.call(this);
}