Jquery制作让HTML元素具有输入框功能的插件

废话少说，直接上代码！

/** * jQuery inputable plugin : simple inputable implements with ajax request & response * http://blog.csdn.net/xxd851116 * * Create a inputable element with input, type of text. * * @option inputName: Text input element name attribute; * @option inputStyle: Text input element style, contains this input attribute size; * @option inputMaxLength|inputSize: Text input element maxLength|size attribute; * @option url: When the text input element blur, client request url; * @option param: request data, pattern: 'key/value'; * @option paramProps: param property, pattern: '['prop1'(, 'prop2')*]'; * @option loadingPath: loading image path on request doing; * @option onSuccess: executing function if request is success(status = 200); * @option onError: executing function if request is error(status = 404, 500..); * * @return jQuery * * Copyright (c) 2009 XingXiuDong * * Date: 2009-09-16 * Version: 1.0 * Version: 1.1, add loading image during requesting * Version: 1.2, add paramProps options to append request param with curent element propertys */ ;(function($){ $.fn.extend({ inputable : function(settings) { var $this = this; var options = $.extend({ inputName : 0, // input element name inputStyle : {}, // input element style inputSize : 10, // input element size inputMaxLength : 10, // input element maxlength url : "", // request uri param : {}, // request params，pattern： key/value paramProps : [], // inputable's element property, to add param by property's value loadingPath : "", // loading image path onSuccess : function(){}, // executed after success onError : function(){} // executed after error }, settings); $this.each(function(){ var $span = $("<span></span>"); $span.text($.trim($(this).text())); // no.1 element: span -> text $(this).empty().append($span); // no.2 element: span -> input var $input = $("<input type=/"text/" name=/"" + options.inputName + "/" />") .attr("maxlength", options.inputMaxLength).attr("size", options.inputSize); $input.css(options.inputStyle).val($.trim($(this).text())); $(this).append($span.clone().empty().append($input).hide()); // no.3 last element: img var $loading; if (options.showLoading = options.loadingPath.length == 0 ? false : true) { $loading = $("<img src=/"" + options.loadingPath + "/" />").hide().appendTo($(this)); } $(this).click(function(){ $(this).find("span:first-child").hide().next().show().find("input").focus().select(); }); $(this).find("span input[type='text']").blur(function() { $(this).parent().hide().prev().show(); }).click(function(){ return false; }).change(function() { if (options.url.length == 0) return false; if (options.showLoading) $loading.show(); var $_this = $(this); options.param[options.inputName] = $_this.val(); $.each(options.paramProps, function(index, paramProp){ options.param[paramProp] = $_this.parent().parent().attr(paramProp); }); $.getJSON(options.url, options.param, function(json) { if (json.status == "200") { $_this.parent().prev().text($.trim(options.param[options.inputName])); if (options.showLoading) $loading.hide(); options.onSuccess(); } else { if (options.showLoading) $loading.hide(); options.onError(); } }); }); }); return $this; } }); })(jQuery);

 

使用实例（以下是从项目中直接剪辑而来，可根据用户自己定制）：

 $("td.order_value_td").inputable({ inputName : "order_value", inputMaxLength : 4, inputStyle : {color:"#F00",border:"1px solid #0099FF","text-align":"right","padding-right":"3px",width:"35px"}, url : '../manager/ArticleImg.do?method=updateOrderValue', loadingPath : '../images/loading.gif', paramProps : ['id'], onSuccess : function(){ $("<div id=/"tip/" style='position:absolute;top:150px;right:10px;border:1px solid green;padding:10px;background-color:#FFF;color:green;'>^_^ 恭喜您！数据提交成功！</div>").appendTo("body"); }, onError : function(){ $("<div id=/"tip/" style='position:absolute;top:150px;right:10px;border:1px solid red;padding:10px;background-color:#FFF;color:green;'>Y_Y 很抱歉！数据提交出错，请重新编辑！</div>").appendTo("body"); } }).click(function(){$("#tip").remove();});