要求:
jQuery1.4以上就行了.
用途:
可以靜態免刷新修改任意input或textarea的內容,修改之後ajax提交到服務器並保存,提交方法可以自己設定是post還是get
//如果要轉載本文請注明出處,免的出現版權紛爭,我不喜歡看到那種轉載了我的作品卻不注明出處的人 Seven{See7di#Gmail.com}
演示:
用法:
1.html調用頁面的代碼為:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> new document </title>
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript' src="img/plugin.js"></script>
<script type='text/javascript'>
$(function(){
$.JsEdit('#aa',"work=test&hotelid=1","sys.php","POST");
$.JsEdit('#bb',"work=test&hotelid=2");
$.JsEdit('#cc',"work=test&hotelid=3","sys.php","GET");
});
//如果要轉載本文請注明出處,免的出現版權紛爭,我不喜歡看到那種轉載了我的作品卻不注明出處的人 See7di#Gmail.com
</script>
<style type='text/css'>
input{border:1px solid white;}
</style>
</head>
<body>
<input id='aa' value='這個是input1'><br><br>
<input id='bb' value='這個是input2' style='border-color:green;'><br><br>
<textarea id='cc' rows='3' style='50%'>這個是textarea</textarea><br><br>
</body>
</html>
2.plugin.js的內容為:
(function($){
//通用ajax靜態編輯內容
//對象,ajax參數,ajax後臺文件,ajax提交方式
//用法:
//$.JsEdit('#id',"work=test&id=1","sys.php","get");
//$.JsEdit('#id',"work=test&id=2","tst.php");
//$.JsEdit('#id',"work=test&id=3");
$.extend({JsEdit:function(_this,_action,_file,_method){
//感應鼠標修改或還原元件的初始邊框樣式
var _Isedit=false,_val="",_css="";
$(_this).hover(function(){
if(!_css){_css=$(_this).attr("style");}
if(!_Isedit){$(_this).css("border","1px solid #DDD");}
},function(){
if(!_Isedit){if(_css){$(_this).attr("style",_css);_css="";}else{$(_this).attr("style","");}}
});
//點擊元件修改樣式取得初始值
$(_this).click(function(){
_val=$(_this).val();
$(_this).css("border-width","1px").css("border-style","solid").css("border-color","#666 #DDD #DDD #666");
$(_this).focus();
_Isedit=true;
});
//失去焦點還原初始樣式並判斷是否對值做過修改
$(_this).blur(function(){
if(_css){$(_this).attr("style",_css);_css="";}else{$(_this).attr("style","");}
_Isedit=false;
var _value = $(this).val();
if(_val==_value){return false;}
if(!_file){_file="sys.php";}
if(!_method){_method="POST";}_method=_method.toUpperCase();
$.ajax({
type:_method,url:_file,data:"value="+encodeURI(_value)+"&"+_action,
success:function(msg){
if(msg.indexOf("Error:")!=-1){alert(msg);}
}
});
});
}});
})(jQuery)
3.sys.php的內容為
<?PHP
$work=StrToLower($_GET["work"]));
Switch ($work){
Case "test":
_test();
Break;
}
//------------------------------------------------*
Function _test(){
OB_start();
OB_clean();
$hotelid=$_GET["hotelid"];
$value=$_GET["value"]);
Echo 'hotelid:'.$hotelid.' value:'.$value;
//如果提示出錯,則只要在echo內包含Error:就可以了,例如Echo 'Error:有錯誤!';
Exit();
}
該插件的高級應用範例:
ajax读取数据库的內容並显示到每一天的栏位里,使用{jQuery插件-通用input或textarea靜態ajax修改功能插件}静态免刷新修改每天的房价,修改完成之后使用{使用jquyer擴展方法定義屬於自己的氣泡提示}打开操作成功的气泡提示,并延时自动关闭气泡.
