Home » jQuery 外掛

[jQ]jquery-plugin Readonly 1.0 beta 1

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



一般我們如果把欄位設為唯讀(readonly)的話，通常都是利用其 readonly 的屬性，但 jquery-plugin Readonly 套件是採用遮罩的方式來讓使用者無法輸入，但本身欄位是沒被設為唯讀，因此原本唯讀可能造成的資料傳送就沒問題了。

套件名稱：jquery-plugin Readonly
套件版本：1.0 beta 1
作者網站：http://dev.powelltechs.com/jquery.readonly/
套件網址：http://plugins.jquery.com/project/readonly
發佈日期：2009-12-18
檔案大小：10.3 KB
檔案下載：jquery.readonly.js jquery.readonly.css

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

active(選填)
描述： 是否啟用 reayonly 遮罩效果
預設值： undefined
 
enabled(選填)
描述： 是否啟用 reayonly 遮罩效果
預設值： undefined
 
onClick(選填)
描述： 當使用者點擊 readonly 遮罩後的處理函式
預設值： null
 
onDblClick(選填)
描述： 當使用者連點 readonly 遮罩後的處理函式
預設值： null
 
onFocus(選填)
描述： 當出現 readonly 遮罩後，可設定是否接受使用者利用 tab 的方式來讓被設為 readonly 元素取得焦點
預設值： null
 
onKeyPress(選填)
描述： 當出現 readonly 遮罩後，可設定是否接受使用者利用再對已設為 readonly 的元素輸入按鈕；若要能啟用該功能時，得先設定 onFocus 不為 null 才行
預設值： function(e){ if(e.keyCode == 9) return true; else return false; }

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

// 啟用 readonly 遮罩效果
$(selector).readonly(true);
 
// 停用 readonly 遮罩效果
$(selector).readonly(false);
 
// 啟/停用 readonly 遮罩效果
$(selector).readonly('toggle');
 
// 啟/停用 readonly 遮罩效果(使用參數)
$(selector).readonly(option);

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.readonly.css">
<script type="text/javascript" src="jquery.readonly.js"></script>
<style type="text/css">
.demoarea{
	border: 1px solid #333;
	padding: 5px 10px;
	margin: 5px 0;
	width: 275px;
}
</style>
<script type="text/javascript">
	$(function(){
		$('.enable_readonly').click(function(){
			// 利用參數的方式來啟用 readyonly
			$('.demo').readonly({
				enabled: true,
				onClick: function(){
					alert('此欄位唯讀');
				}
			});
		});
 
		$('.disable_readonly').click(function(){
			$('.demo').readonly(false);
		});
	});
</script>
 
<body>
	<button class="enable_readonly">Enable Readonly</button>
	<button class="disable_readonly">Disable Readonly</button>
 
	<div class="demoarea">
		<select name="demo" class="demo">
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select>
	</div>
 
	<div class="demoarea">
		<a href="http://www.google.com" target="_blank" class="demo">Google</a>
	</div>
 
	<div class="demoarea">
		<form action="" method="get">
			Name: <input type="text" class="demo" name="name"><br/>
			Something Else: <input type="text" class="demo" name="something"><br/>
			<input type="submit" value="Go" class="demo">
		</form>
	</div>
</body>
範例 1

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

2 筆針對 [jQ]jquery-plugin Readonly 1.0 beta 1 的迴響

發表迴響