Home » jQuery 外掛

[jQ]clearField 1.0

範例 1
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

clearfield_1_0

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>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

附註:
因為 clearField 沒有做好 jQuery 一貫的 chain 功能,因此範例最後修改字型的部份才沒有產生效果,建議如果真的要用的話,可使用 clearFile 修正 chain 版的。

發表迴響