clearField 套件是一個依輸入框欄位的 vlaue 屬性值來當提示內容的外掛,雖然並不是那麼的華麗,但至少最基本的提示能力是沒問題的。
套件名稱:clearField
套件版本:1.0
作者網站:http://labs.thesedays.com/projects/jquery/clearfield/
套件網址:http://plugins.jquery.com/project/clearField
發佈日期:2009-07-31
檔案大小:1.25 KB
檔案下載:jquery.clearfield.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | blurClass(選填) 描述: 當輸入框失去焦點時所要套用的樣式 className 預設值: 'clearFieldBlurred' activeClass(選填) 描述: 當輸入框取得焦點時所要套用的樣式 className 預設值: 'clearFieldActive' |
方法說明:
檢視原始碼 JavaScript
1 2 | // 幫指定的輸入框加上提示效果 $(selector).clearField(settings); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.clearfield.js"></script> <style type="text/css"> .clearFieldBlurred { color: #666; } .clearFieldActive { color: #000; } .myBlurredClass { color: blue; } </style> <script type="text/javascript"> $(function(){ // 把所有 input[type=text] 的元素都加上 clearField 效果 // 並自訂 blurClass 的樣式 $(":text").clearField({ blurClass: 'myBlurredClass' }).css("fontSize", "32px"); // 最後再把字型改成 32px, 但... }); </script> <body> <input type="text" name="" value="搜尋聯絡人或網址..." class="clearField" /> <br /> <input type="text" name="" value="" class="clearField" /> <br /> <input type="text" name="" value="請輸入密碼" class="clearField" /> </body> |
附註:
因為 clearField 沒有做好 jQuery 一貫的 chain 功能,因此範例最後修改字型的部份才沒有產生效果,建議如果真的要用的話,可使用 clearFile 修正 chain 版的。