jquery 点即可编辑插件

 最近再用jquery 写东西，发现还是很好用的，这是jquery上看的教程，然后自己模拟就写了一个

废话少说，看代码吧

 

jQuery.noConflict();
function  sanshi_edit(id,editClass,postPage,isNotNull)
... {
    var saveButton ="saveButton";
    var cancelButton ="cancelButton";
    //var isNotNull = true;
    var idstr = '#'+id;
    //鼠标单击事件
    jQuery(idstr).click(function()...{
        var textarea = '<div><textarea rows="3" cols="40">'+jQuery(idstr).html()+'</textarea>';
        var button     = '<div><input type="button" value="保存" class="'+saveButton+'" /><input type="button" value="取消" class="'+cancelButton+'" /></div></div>';
        var revert = jQuery(idstr).html();
        jQuery(idstr).after(textarea+button).remove();
        //监听保存按钮单击事件
        jQuery('.'+saveButton).click(function()...{
            //保存事件
            var postContent = jQuery(this).parent().siblings(0).val();
            if(!isNotNull && postContent=="")
            ...{
                alert("您输入的内容不能为空");
                return false;
            }else...{
                sanshi_edit_save(true,jQuery(this),postContent,id,editClass,postPage,isNotNull);
            }
        });
        //监听取消按钮单击事件
        jQuery('.'+cancelButton).click(function()...{
            //取消事件
            sanshi_edit_save(false,jQuery(this),revert,id,editClass,postPage,isNotNull);
        });
    });
    //监听鼠标经过事件
    jQuery(idstr).mouseover(function()...{
        jQuery(idstr).addClass(editClass);
    });
    jQuery(idstr).mouseout(function()...{
        jQuery(idstr).removeClass(editClass);
    });
    //sanshi_edit(idstr,editClass);
    //修改过的信息保存
    function sanshi_edit_save(isSave,obj,text,id,editClass,postPage,isNotNull)
    ...{
        if(isSave)
        ...{
            //如果设置了提交页，就提交
            if(postPage)
            ...{
                //debug 2008-2-1 调试
                //$.post(postPage,{contents : text},function(text){$("#debug").html(text);});
                jQuery.post(postPage,...{contents : text});
            }
            alert("保存成功");
        }
        obj.parent().parent().after('<div id="'+id+'">'+text+'</div>').remove();
        sanshi_edit(id,editClass,postPage,isNotNull);
    }
}

 

使用上也很简单

 

< script > ...
jQuery("document").ready(function()...{
    new sanshi_edit("sanshiedit1","editable","my_edit.php");
});
</ script >
< div  id ="sanshiedit1" >
编辑我
</ div >

 

说下参数吧

sanshi_edit("sanshiedit1","editable","my_edit.php");

第一个参数为要编辑那个div里的内容

第二个参数为编辑区域 鼠标经过的样式

第三个参数为提交到那个页面

注意这里提交使用的是post方式的 而且提交的变量为固定的名字为contents

后台接收程序

 

$text   =   strip_tags ( $_POST [ " contents " ]);

 

jquery 仿google 下拉表单 插件

http://phpitem.com/search.php 查看效果

作者 叁石  sanshi0815
mail sanshi0815@tom.com

blog : http://blog.csdn.net/sanshi0815