要求
----
载入jquery.js
被编辑元素写法
---------------
<a href="#" title="单击开启编辑状态,双击保存更改" class="edit_a" db_id="{$list.id}" contenteditable="true" >{$list.hit}</a>
--------
绑定编辑事件
-------
$(document).ready(
function (){
ajax_edit_bind('.edit_a', save_edit);
}
);
function save_edit(el){
var txt = $(el).text();
if (isNaN(txt)){
element_div_tip(el, '请输入数字');
return 0;
}
if (txt < 0){
element_div_tip(el, '请输入大于0数字');
return 0;
}
var obj = {};
obj.url = 'music.php';
obj.element = el;
obj.data = {};
obj.data.action = 'edit_hit';
obj.data.id = $(el).attr('db_id');
obj.data.value = txt;
ajax_edit_save(obj);
}-----------------公用func
----------
function ajax_edit_bind(e_class, save_edit_fun){
$(e_class).click(//单击编辑
function (){
$(this).css('border', '1px solid black');
$(this).css('padding', '5px');
$(this).css('display', 'block');
}
);
$(e_class).dblclick(//双击保存
function (){
element_div_tip(this, '保存中...请稍候');
save_edit_fun(this);
}
);
$(e_class).blur(//失去焦点还原
function (){
$(this).css('border', '0px solid black');
$(this).css('padding', '0px');
$(this).css('display', '');
}
);
}function ajax_edit_save(obj){
for (var data in obj.data){
obj.data[data] = encodeURIComponent(obj.data[data]);
}
$.ajax({
element:obj.element,
url:obj.url,
type:"POST",
cache :false,
dataType:'html',
data:obj.data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success:function (data){
element_div_tip(this.element, data);
},
error:function (event, XMLHttpRequest, ajaxOptions, thrownError){ element_div_tip(this.element, 'ajax出错了:' + XMLHttpRequest);}
});
}function element_div_tip(element, tip, option){
if (!element){//隐藏
if (!$('#ajax_div_tip').length){
$('#ajax_div_tip').css('display', 'none');
}
return 0;
}
tip = '<div><span style="display:block;text-align:center;padding:10px 10px 0px 10px;">点击关闭提示</span><hr style="margin-bottom:10px;">' + tip + '</div>';
if (!$('#ajax_div_tip').length){
var div_html = '<div style="position: absolute;z-index:9999;" title="点击关闭提示" ' +
' class="ajax_div_tip" id="ajax_div_tip" οnclick="this.style.display=\'none\';" >' + tip + '</div>';
$('body').append(div_html);
}else{
$('#ajax_div_tip').css('display', 'block')
.html(tip);
}
$('#ajax_div_tip').css('top', $(element).offset().top + $(element).height())
.css('left', $(element).offset().left);
}-----------php需要处理
在接收到中文时必须要
$name = urldecode($name);
如果代码保存时使用gb2312时还要把上面utf8用iconv转成gb2312才正常;
-------------------------
2011-08-26修改:
1 .当修改区获得焦点时,记录当时编辑区的值,当清空编辑区数据成空白后(包括换行),失去焦点时,这样会导致因为a标签的text没有数据而编辑不可见,现在增加一判断,如果编辑区为空时,失去焦点后,自动恢复到获得焦点时的数据;
2. firefox下面,如果有一标签a1在排版位置的前面,a2在排版位置的相对a1的后面,a1/a2同时打开可编辑属性时,在a2中进行删除时,一直按住删除键不放,就会也同时把a1编辑区的内容删除掉,在ie中却不会出现这种问题,看来在firefox中,删除对于可编辑区来说,会有tab的功能作用,所以现在修改成,只有选中时,才开启可编辑状态;失去焦点后移除编辑属性
//>>>ajax 保存类
function ajax_edit_bind(e_class, save_edit_fun){
$(e_class).focus(//单击编辑
function (){
$(this).attr('bakText', $(this).text() );//记忆首次焦点状态
$(this).attr('contenteditable', "true" );//因为firefox在多个可编辑时,向前删除时,会把没选中的可编辑区也删除,所以选中时才能编辑
$(this).css('border', '1px solid black');
$(this).css('padding', '5px');
$(this).css('display', 'block');
}
);
$(e_class).dblclick(//双击保存
function (){
save_edit_fun(this);
element_div_tip(this, '处理中...请稍候');
}
);
$(e_class).blur(//失去焦点还原
function (){
if (/^\s*$/.test($(this).text()) ) $(this).text($(this).attr('bakText'));//还原最后一次非空
$(this).removeAttr('contenteditable');//删除可编辑属性
$(this).css('border', '0px solid black');
$(this).css('padding', '0px');
$(this).css('display', '');
}
);
}
function ajax_edit_save(obj){
for (var data in obj.data){
obj.data[data] = encodeURIComponent(obj.data[data]);
}
$.ajax({
element:obj.element,
url:obj.url,
type:"POST",
cache :false,
dataType:'html',
data:obj.data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success:function (data){
element_div_tip(this.element, data);
},
error:function (event, XMLHttpRequest, ajaxOptions, thrownError){ element_div_tip(this.element, 'ajax出错了:' + XMLHttpRequest);}
});
}
function element_div_tip(element, tip, option){
if (!element){//隐藏
if (!$('#ajax_div_tip').length){
$('#ajax_div_tip').css('display', 'none');
}
return 0;
}
tip = '<div><header style="display:block; padding-bottom:5px; margin-bottom:10px;text-align:center;">点此关闭</header><span>' + tip + '</span></div>';
if (!$('#ajax_div_tip').length){
var div_html = '<div style="position: absolute;z-index:9999;background:InfoBackground; border:1px solid black; padding:3px;" ' +
' class="ajax_div_tip" id="ajax_div_tip" οnclick="this.style.display=\'none\';" >' + tip + '</div>';
$('body').append(div_html);
}else{
$('#ajax_div_tip').css('display', 'block')
.html(tip);
}
$('#ajax_div_tip').css('top', $(element).offset().top + $(element).height() + parseInt($(element).css('padding-top')) + parseInt($(element).css('padding-bottom')) + 5)
.css('left', $(element).offset().left);
}
//<<<
