Home » jQuery 外掛

[jQ]clearField 1.0

[ 日期： | 瀏覽：3,666 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 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 版的。

發表迴響