本文介绍了一个使用jQuery实现的多行文本框高度动态调整的功能。通过点击放大或缩小按钮，可以改变文本框的高度，提供了更好的用户体验。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>多行文本框高度变化</title>
6<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
7<script type="text/javascript">
8
$(document).ready(function()
{
9
var $comment = $("#comment");//获取评论框
10
$(".bigger").click(function(){//判断是否处于动画
11 if(!$comment.is(":animated")){
12 if($comment.height()<500){
13 $comment.animate({height:"+=50"},400);
14
}
15 }
16 });//“放大”按钮绑定单击事件
17 $(".small").click(function(){//判断是否处于动画
18 if(!$comment.is(":animated")){
19 if($comment.height()>50){
20 $comment.animate({height:"-=50"},400)
21 }
22 }
23 });//"缩小"按钮绑定单击事件
24
})
25</script>
26<style type="text/css">
27.msg_caption span{ background:#ccc; display:inline-block; width:60px; text-align:center; height:28px; line-height:28px; cursor:pointer;}
28</style>
29</head>
30<body>
31<form>
32<div class="msg">
33 <div class="msg_caption">
34 <span class="bigger">放大</span>
35 <span class="small">缩小</span>
36 </div>
37 <div>
38 <textarea id="comment" rows="8" cols="20">
39 多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框
40 </textarea>
41 </div>
42</div>
43</form>
44</body>
45</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>多行文本框高度变化</title>6
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>7
<script type="text/javascript">8
$(document).ready(function(){9
var $comment = $("#comment");//获取评论框10
$(".bigger").click(function(){//判断是否处于动画11
if(!$comment.is(":animated")){12
if($comment.height()<500){13
$comment.animate({height:"+=50"},400);14
} 15
} 16
});//“放大”按钮绑定单击事件17
$(".small").click(function(){//判断是否处于动画18
if(!$comment.is(":animated")){19
if($comment.height()>50){20
$comment.animate({height:"-=50"},400)21
} 22
} 23
});//"缩小"按钮绑定单击事件24
}) 25
</script>26
<style type="text/css">27
.msg_caption span{ background:#ccc; display:inline-block; width:60px; text-align:center; height:28px; line-height:28px; cursor:pointer;}28
</style>29
</head>30
<body>31
<form>32
<div class="msg">33
<div class="msg_caption">34
<span class="bigger">放大</span>35
<span class="small">缩小</span>36
</div>37
<div>38
<textarea id="comment" rows="8" cols="20">39
多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框40
</textarea>41
</div>42
</div>43
</form>44
</body>45
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
