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>

jQuery_review之textarea的放大和缩小的jQuery实现,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery_review之textarea的放大和缩小的jQuery实现