利用JQuery編寫自訂簡單的Html控制項

下面例子主要編寫一個輸入框，頁面載入時會顯示初始值，無邊框，看起來像span，點擊時，邊框會出現，而且內容會被選中，失焦時會觸發ajax事件，修改內容的值。

以下為代碼:

Code
 1 jQuery.fn.inputText = function(value, action, viladata)
 2 {
 3     var $input = this;
 4     //設定輸入框初始值
 5     if(value != "")
 6     {
 7     $input.val(value);
 8     }
 9     //設定輸入框為無邊框
10     $input.attr("style","border:0px solid #fff");
11     //輸入框被點擊
12     $input.click(function(){
13     //顯示邊框
14     $input.attr("style","border:1px solid #aaa");
15     //選中內容
16     $input.select();
17     });
18     
19     //輸入框失焦
20     $input.blur(function(){
21         $input.attr("style","border:0px solid #fff");
22         
23         //驗證函式，驗證是否通過
24         if(viladata)
25         {
26         var input = $input.val();
27         $.post(action,{value:input},function(data){
28             if(data=="success")
29             {
30             alert("修改成功");
31             window.location.reload();
32             }
33             else alert("修改失敗");
34         },"TEXT");
35         }
36     });
37 }

 在HTML中調用為:

 <input type="text" id="input"/>
<script type="text/javascript">
$(document).ready(function(){
    $("#input").inputText("初始值","a.aspx",validata);
});

//驗證函式
function validata()
{
    return true;

}

 

這樣一個簡單的控制項就完成了。。。