代码之家 › 专栏 › 技术社区 › Ben Everard

在jQuery插件中编程回调函数

jquery-callback jquery

6

Ben Everard · 技术社区 · 15 年前

我正在编写一个jQuery插件,这样我就可以在很多地方重用这段代码,因为它是一段非常好用的代码,代码本身向一个从隐藏行克隆的表中添加了一行新行,它继续对新行执行大量的操作。

我现在这样引用它:

$(".abc .grid").grid();

但是我想包含一个回调,这样当添加行时,调用插件的每个区域都可以做一些更独特的事情。我以前使用过jqueryajax插件,所以 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);

我在埃尔古做过通常的搜索。。。但我似乎得到了很多噪音,但收效甚微,任何帮助将不胜感激。

谢谢!

2 回复 | 直到 15 年前

1

9

Tauren 15 年前

也许是这样的?

$.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() {}
});

2

mamoo 15 年前

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);
}