jquery插件：将函数转换为插件？

我想学习编写jquery插件，所以我认为如果我通过将我的函数转换为插件来学习它会更容易，例如：

这些是我的正常function，

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(' 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('
 loading
'); // 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("
"); 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(" " + message + " 
"); 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(" " + message + " 
"); // 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(' 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('
 loading
'); // 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); 

我从这里开始关注教程。 虽然我不太明白为什么我必须使用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() { ... }); }; 

这是编写jQuery插件的文档。 希望有所帮助！ jQueryUI源代码也很有用。

编辑：您不必使用extend ，但是，根据您的方案，它可能更方便使用。 这是一个处理$.fn.extend好答案。