最近再用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);
}
}
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 >
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