Home » jQuery 外掛

[jQ]jQuery Super Labels Plugin 1.0.1

[ 日期： | 瀏覽：4,087 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jQuery Super Labels Plugin 比 HTML5 的 placeholder 效果還加了滑動及淡出淡入的效果，當輸入方塊取得焦點時是先把 label 滑動到右邊，當使用者開始輸入文字內容後，label 才會淡出隱藏。

套件名稱：jQuery Super Labels Plugin
套件網址：1.0.1
作者網站：https://github.com/remybach/jQuery.superLabels
套件網址：N/A
發佈日期：2012-04-20
檔案大小：7.87 KB
檔案下載：jquery.superLabels.js
引用檔案：jquery.easing.1.3.js

參數選項說明：

檢視原始碼 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

baseZindex(選填)
描述： label 的 z-index
預設值： 0
 
debug(選填)
描述： 是否顯示除錯訊息在 console 中, 但如果用壓縮版的並無此設定
預設值： false
 
duration(選填)
描述： label 滑動到右邊的速度(1000毫秒 = 1秒)
預設值： 500
 
easingIn(選填)
描述： 如果有額外引用 jQuery Easing 時, 可指定 label 滑到右邊時的動畫緩衝效果
預設值： 'easeInOutCubic'
 
easingOut(選填)
描述： 如果有額外引用 jQuery Easing 時, 可指定 label 滑到左邊時的動畫緩衝效果
預設值： 'easeInOutCubic'
 
fadeDuration(選填)
描述： label 淡出的速度(1000毫秒 = 1秒)
預設值： 250
 
labelLeft(選填)
描述： label 在表單欄位上距離左邊的位置
預設值： 0
 
labelTop(選填)
描述： label 在表單欄位上距離上方的位置
預設值： 'easeInOutCubic'
 
noAnimate(選填)
描述： 設為 true 時則會變成一般的 placeholder 的校果而已, 並不會有動畫滑動及透明度效果
預設值： false
 
opacity(選填)
描述： label 滑動到右邊但表單欄位未輸入任何值前的不透明度
預設值： 0.5
 
slide(選填)
描述： 設為 false 時則會變成一般的 placeholder 的校果而已, 並不會有動畫滑動效果
預設值： true
 
wrapSelector(選填)
描述： 若 label 還有用其它區塊包裹的話, 這邊要填入該包裹的元素
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素中的表單欄位加上 superLabels 效果
$(selector).superLabels(options);

使用範例：

檢視原始碼 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery-glowing.js"></script>
<style type="text/css">
	form ul, form li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	form ul li {
		position: relative;	/* 一定要設絕對座標 */
		width: 410px;
		margin: 10px;
	}
	form input, form textarea {
		width: 400px;
	}
	form select {
		width: 408px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 form 中的表單元素加上 superLabels 效果
		// 把 lable 放在表單元素上, 距離上下各 5px
		$('form').superLabels({
			labelLeft: 5,
			labelTop: 5
		});
	});
</script>
 
<body>
	<form action="" class="grid_4 push_4">
		<ul>
			<li>
				<label for="text-input">Name</label>
				<input type="text" name="text-input" value="" />
			</li>
			<li>
				<label for="textarea">Message</label>
				<textarea rows="2" cols="20" name="textarea"></textarea>
			</li>
			<li>
				<label for="select">Why is the sky blue?</label>
				<select rows="2" cols="20" name="select">
					<option value="1">It's painted blue.</option>
					<option value="2">Why not?</option>
					<option value="3">Rayleigh scattering.</option>
				</select>
			</li>
		</ul>
	</form>
</body>
範例 1

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

發表迴響