jquery插件: converting functions into a plugin?

Question

我想学习写jquery插件，所以我想如果我把函数转换成插件来学习的话会更容易理解，比如:

这些是我的正常功能，

this.delete_uploaded = function(){  

    $(".delete-uploaded").click(function(){

        // remove the popup.
        $('#popup_result').remove();

        // same as: var target_delete = $(this).parent().parent().parent();
        var target_delete = $(this).parents('.item-uploaded'); // the item for deletion, such as item held in li 
        var parent_delete = $(this).parents('.items-uploaded'); // the parent that hold delete item, such as ul > li
        var wrapper_parent = $(this).parents('.upload'); // the wrapper that hold the parent, such as div > ul > li
        var target_loadin = $(this).parent();
        var target_html = $(this).parent().html();
        var path_load = $(this).attr('href');

        // make a gif loader.
        target_loadin.html('<img src="'+http_root+rp_image_global+img_loader+'" style="float:none;"/> loading');

        // load the delete form.
        target_loadin.load( path_load, function(){

            // when the yes button is triggered.
            $("input[type=submit][name=yes]").click(function(){

                // get the path from attribute of action in the form.
                var path_post = $(this).parent('form').attr('action');
                //alert(path_post);

                // make a gif loader.
                target_loadin.html('<div class="ajaxloader"><img src="'+http_root+rp_image_global+img_loader+'" style="float:none;"/> loading</div>');

                // post the form.
                $.post(path_post, $(this).serialize(), function(xml){

                    // procees the form output.
                    process_delete_uploaded(xml);
                });

                // slide up the deleted target.
                target_delete.slideUp('fast', function() {

                    // remove its divs completely
                    target_delete.remove();
                    //alert($('li',parent_delete).length);

                    // count how many items are left behind         
                    if($('li',parent_delete).length == 0)
                    {
                        $('.binder-row',wrapper_parent).css({
                            borderBottom: '0px solid #999', 
                            padding: '0px 0px 0px 0px'
                        });
                    }

                });

                return false;
            });

            // when the no/cancel button is triggered.
            $("input[type=button][name=no]").click(function(){

                // return the html
                target_loadin.html(target_html);

                // reload the delete function
                delete_uploaded();

                return false;
            });

        });

    return false;
    });
}

// callback function for proccesing the deleted item.
this.process_delete_uploaded = function(xml){

    // append a popup div.
    $(document.body).append("<div id=\"popup_result\" class=\"popup\"></div>");

    var popup = $('#popup_result');
    var width = 400;
    var top = 220;
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    var marginLeft = "-"+ ((scrollLeft + width)/2);

    popup.css({
        top:(scrollTop + top) + "px", 
        left:"50%",
        marginLeft:marginLeft + "px",
        width:width + "px",
        zIndex:"11",
        display:"none"
    });

    // proccess the result and load the result page and display the result messages on the result page.
    popup.load(http_root+rp_cms+"result.php", {}, function(){

        // loop for any error messages.
        $("error", xml).each(function(){
            var elementid = $(this).attr('elementid');
            var message = $(this).attr('message');
            $("#"+elementid+"_label").addClass('error');
            $("#"+elementid+"_img").css({visibility:'visible'});
            $(".result").append("<img src='"+http_root+rp_image_global+"attention.png' /> <b>" + message + "</b> <br />");
            popup.fadeIn('slow', function(){    
                closePopup(popup);
            }); 
        });

        // loop for any positive results.
        $("result", xml).each(function(){

            // store the result node.
            var message = $(this).attr('message');
            //alert(message);

            // append the positive messages in the result class.
            $(".result").append("<img src='"+http_root+rp_image_global+"info.png' /> <b>" + message + "</b> <br />");

            // display the messages by fading them in.
            popup.fadeIn('fast', function(){

                // set the timeout to 1 minute to remove the popup
                setTimeout(function(){
                    popup.fadeOut("slow",function(){
                        popup.remove();
                    }); 
                },1000);    

                // attach closePopup function.
                closePopup(popup);      
            });

        });
    });
}

我想将它转换成一个插件，这样我就可以像这样实例化它，

$(".delete-uploaded").delete_uploaded({
  target_delete: '.item-uploaded', 
  parent_delete: '.items-uploaded',
  wrapper_parent:'.upload'
})

等等，

 $(".delete-listed").delete_uploaded({
    target_delete: '.item-listed', 
    parent_delete: '.items-listed',
    wrapper_parent:'.upload'
 })

可能吗？

谢谢。

编辑:

到目前为止我的尝试还不错...

// You need an anonymous function to wrap around your function to avoid conflict
(function($){

    // Attach this new method to jQuery
    $.fn.extend({ 

        // This is where you write your plugin's name
        pluginname: function(options) {

            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                deleteTarget:   '.item-listed', 
                deleteParent:   '.items-listed',
                wrapperParent:  '.upload',
            }

            var options =  $.extend(defaults, options);

            return this.click(function(){
                var o = options;

                var target_delete = $(this).parents(o.deleteTarget); // The item for deletion, such as item held in li 
                var parent_delete = $(this).parents(o.deleteParent); // The parent that hold delete item, such as ul > li
                var wrapper_parent = $(this).parents(o.wrapperParent); // The wrapper that hold the parent, such as div > ul > li
                var target_loadin = $(this).parent();
                var target_html = $(this).parent().html();
                var path_load = $(this).attr('href');

                // Make a gif loader.
                target_loadin.html('<img src="'+http_root+rp_image_global+img_loader+'" style="float:none;"/> loading');
                //alert(target_html);

                // Load the delete form.
                target_loadin.load( path_load, function(){

                    // When the yes button is triggered.
                    $("input[type=submit][name=yes]").click(function(){

                        // Get the path from attribute of action in the form.
                        var path_post = $(this).parent('form').attr('action');
                        //alert(path_post);

                        // Make a gif loader.
                        target_loadin.html('<div class="ajaxloader"><img src="'+http_root+rp_image_global+img_loader+'" style="float:none;"/> loading</div>');

                        // Post the form.
                        $.post(path_post, $(this).serialize(), function(xml){

                            // Procees the form output.
                            process_delete_uploaded(xml);
                        });

                        // Slide up the deleted target.
                        target_delete.slideUp('fast', function() {

                            // Remove its divs completely
                            target_delete.remove();
                            //alert($('li',parent_delete).length);

                            // Count how many items are left behind         
                            if($('li',parent_delete).length == 0)
                            {
                                $('.binder-row',wrapper_parent).css({
                                    borderBottom: '0px solid #999', 
                                    padding: '0px 0px 0px 0px'
                                });
                            }

                        });

                        return false;
                    });
                });

                return false;

            });

        }
    });

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

我已经按照here的教程进行操作。尽管我不太明白为什么必须使用 jquery.extend()，但它运行良好...

Answer 1

这是一个不完整的示例，应该可以帮助您:

$.fn.delete_uploaded = function(settings) {
    /* Define defaults for each of the settings: */
    var target_delete = settings.target_delete || '.item-uploaded';
    var parent_delete = settings.parent_delete || '.items-uploaded';
    var wrapper_parent = settings.wrapper_parent || '.upload';

    /* "this" is already a jQuery object: */
    this.click(function() { ... });
};

Here是编写 jQuery 插件的文档。希望有帮助!同样有用的是 jQueryUI source code .

编辑:您不必使用extend，但是，根据您的情况，使用它可能会更方便。 Here这是一个很好的答案，涉及 $.fn.extend .