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 [email protected]

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