jQuery外掛程式-通用input或textarea靜態ajax修改功能外掛程式

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

要求:

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='width:50%'>這個是textarea</textarea><br><br>
</body>
</html>

2.plugin.js的內容為:

       //點擊元件修改樣式取得初始值
       $(_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擴展方法定義屬於自己的氣泡提示}開啟操作成功的氣泡提示,並延時自動關閉氣泡.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More