`

单行文本框、多行文本框及滚动条的应用

jQueryJavaScriptCSSUPHTML 
阅读更多

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
 .focus{
  border: 1px solid #f00;
  background: #fcc;
 }
 input, textarea{
  width:12em;
  border: 1px solid #888;
 }

 div{
    padding:2px;
 
 * { margin:0; padding:0;font:normal 12px/17px Arial; }
 .msg {width:300px; margin:100px; }
 .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
 .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
 .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

 
</style>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
  $(":input").focus(function(){
   $(this).addClass("focus");
  }).blur(function(){
   $(this).removeClass("focus");
  });
  

  var $comment=$("#comment");
  $(".bigger").click(function(){
   if(!$comment.is(":animated")){ //判断是否处于动画
    if($comment.height()<500){
     //$comment.height($comment.height()+50);
     $comment.animate({height: "+=50"}, 400);
    }
   }
  })
  
  $(".smaller").click(function(){
   if(!$comment.is(":animated")){
    if($comment.height()>50){
     $comment.animate({height: "-=50"},400);
    }
   }
  })
  
  $(".up").click(function(){
   if(!$comment.is(":animated")){
    $comment.animate({scrollTop: "-=50"},400);
   }
  })
  $(".down").click(function(){
   if(!$comment.is(":animated")){
    $comment.animate({scrollTop: "+=50"},400);
   }
  })
 })
</script>
</head>

<body>

 <form action="#" method="post" id="regForm">
  <fieldset>
   <legend>个人基本信息</legend>
   <div>
    <label for="username">名称：</label>
    <input id="username" type="text">
   </div>
   <div>
    <label for="pass">密码：</label>
    <input id="pass" type="password">
   </div>
   <div>
    <label for="msg">详细信息：</label>
    <textarea id="msg"></textarea>
   </div>
  </fieldset>
  
  <div class="msg_caption">
   <span class="bigger">放大</span>
   <span class="smaller">缩小</span>
   <span class="up">向上</span>
   <span class="down">向下</span>
  </div>
  <div>
   <textarea id="comment" rows="8" cols="80">ssssssssssdsssssssdaffsdfsdfs</textarea>
  </div>
 </form>
</body>

分享到：
| 复选框全选全不选反选
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics