Home » jQuery 外掛

[jQ]jGrow 0.5

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

jGrow 0.3

當我們使用 Textarea 物件時,一開始就要先指定好它的 rows 了,這樣才能加長整個 Textarea 物件。不過 jGrow 是一個很有趣的套件,它可以先設定 Textarea 最大的高度,這樣一開始就可以不用把 Textarea 拉那麼高,等使用者輸入到那邊時才自動去拉高。

0.3 版的做法則是直接控制 Textareaheight 屬性,所以一開始如果 Textarea 沒有設定 height 屬性是會有問題的。筆者修改了原本沒有設定 height 屬性的問題,但在 IE 6 中測試自動伸長還是有問題的,而 FireFoxChrome 都正常。

0.2 版的做法是直接控制 Textarea,設定的 rows 為多少,那 Textarea 就會自動配合輸入而拉高到設定的 rows;超過就會出現捲軸(這邊的 rowsjGrow 的設定值,而不是 Textarearows 值)。

套件名稱:jGrow
套件版本:0.5
作者網站:http://lab.berkerpeksag.com/jGrow
套件網址:http://plugins.jquery.com/project/jGrow
發佈日期:2010-06-05
檔案大小:3.38 KB
檔案下載:jquery.jgrow-0.5.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
max_height(選填, 0.3)
描述: textarea 的最大高度,超過時會有捲軸
預設值: "700px"
 
resize(選填, 0.4)
描述: 讓在 Firefox 或 Chrome 中是否允許直接透過滑鼠來縮放大小
預設值: "none"
 
overflow(選填, 0.4)
描述: 主要是針對 IE 來控制是否顯示捲軸用
預設值: "hidden"
 
cache_height(選填, 0.4)
描述: 用來暫存 textarea 高度用
預設值:0
 
rows(選填, 0.2 版適用)
描述: textarea 的最大高度,超過時會有捲軸
預設值: 0

方法說明:

檢視原始碼 JavaScript
1
2
// 使用 jGrow 效果
$(selector).jGrow([settings]);

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jgrow-0.5.js"></script>
<script type="text/javascript">
	$(function(){
		$("#adres").jGrow({
			max_height: "400px"
		});
	});
</script>
 
<body>
	<textarea name="frmAdres" id="adres" cols="40" rows="4"></textarea>
</body>
範例 1

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

發表迴響