jQuery_review之textarea的放大和缩小的jQuery实现
浏览数：27 /
时间：2015年06月09日
众所周知，各种浏览器对于HTML、CSS以及原生JS的支持不尽相同。但是jQuery很好地封装了各种浏览器不同的实现，能够很好地解决跨浏览器的CSS问题。下面就是在review表单操作的时候的一个DEMO，记录在这个地方，方便后面做项目的时候查找使用，这个如果添加动画效果会更好，jQuery所有的动画效果都是可以通过animate函数来实现。
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("input[type!='button'],textarea").focus(function(){
$(this).addClass("onfocus");
}).blur(function(){
$(this).removeClass("onfocus");
});
$(".opeTextArea").toggle(function(){
$(this).text("max");
$("textarea").width(400).height(120);
},function(){
$(this).text("min");
$("textarea").width(200).height(60);
});
});
</script>
<style type="text/css">
.onfocus{
border:solid red 2px;
background-color:grey;
}
textarea{
width:200px;
height:60px;
}
.resumeContainer{
width:200px;
}
.opeTextArea{
color:white;
background-color:black;
margin:2px;
padding: 2px 6px;
}
</style>
</head>
<body>
<form action="#" method="get">
<label for="name">name:</label>
<input type="text" name="name"><br/>
<label for="password">password:</label>
<input type="password" name="password"><br/>
<label for="qq">QQ:</label>
<input type="text" name="qq"><br/>
<label for="resume">resume:</label>
<div class="resumeContainer">
<span class="opeTextArea">min</span>
<textarea rows="3" cols="10"></textarea>
</div>
<input type="button" value="submit"><br/>
</form>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
