`

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

阅读更多

<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>

分享到:
评论

相关推荐

    DOS图形界面开发库(GUI)-eCGUI-0.2-Beta-for-DOS-16bit

    TextBox 单行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 EditBox 多行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 HScrollBar 横向 滚动条 VScrollBar 竖向 滚动条 Select...

    DOS图形界面开发库(GUI)-eCGUI-0.3-Beta-for-DOS-16bit

    TextBox 单行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 EditBox 多行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 HScrollBar 横向 滚动条 VScrollBar 竖向 滚动条 Select...

    eCGUI 0.3 for Linux-ARM 嵌入式GUI

    TextBox 单行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 EditBox 多行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 HScrollBar 横向 滚动条 VScrollBar 竖向 滚动条 Select...

    eCGUI 0.3 for Linux-86 嵌入式GUI

    TextBox 单行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 EditBox 多行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 HScrollBar 横向 滚动条 VScrollBar 竖向 滚动条 Select...

    GTK+ FAQ常见问题解答

    6.16 再多行文本框中如何使用水平滚动条? 6.17 怎么改变多行文本框的字体? 6.18 怎么设置多行文本框的光标位置? 7. GDK 介绍 7.1 GDK 是什么?? 7.2 如何使用颜色分配? 8. GLib 介绍 8.1 GLib 是什么? 8.2 ...

    Python Tkinter图形工具使用方法及实例解析

    Entry 单行文本框组件 Text 多行文本框组件 标签组件 Label 标签组件,可以显示图片和文字 Message 标签组件, 可以根据内容将文字换行 菜单 Menu 菜单组件 MenuButton 菜单按钮组件,可以实用Menu代替 滚动...

    textarea不能通过maxlength属性来限制字数的解决方法

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。 ...

    微型嵌入式GUI演示程序

    TextBox 单行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 EditBox 多行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 HScrollBar 横向 滚动条 VScrollBar 竖向 滚动条 ...

    js实现textarea限制输入字数

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。 ...

    Powerbuilder9.0实用教程源代码

    8.7.1 单行文本框控件 219 8.7.2 编辑掩码控件 219 8.7.3 多行文本框控件 221 8.7.4 多信息文本框编辑控件 222 8.8 调节和进度控件 225 8.8.1 水平滚动条控件 225 8.8.2 垂直滚动条控件 225 8.8.3 水平调节...

    java编程基础,应用与实例

    16.4.3 单行文本框(TextField) 255 16.4.4 多行文本框(TextArea) 256 16.4.5 列表框(List) 258 16.4.6 下拉列表框(Choice) 259 16.4.7 复选框(CheckBox) 260 16.4.8 滚动条(Scollbar) 262 16.4.9 画布...

    java万年历课程设计

    //管理视口、可选的垂直和水平滚动条以及可选的行和列标题视口 private JLabel l = new JLabel("小提示:可直接输入年份,提高查询效率!"); private JLabel lt = new JLabel();//系统时间 private JLabel ld =...

    Excel VBA实用技巧大全 附书源码

    04067引用设定了允许滚动区域的单元格区域 04068引用指定了左上角和右下角的单元格区域(之一) 04069引用指定了左上角和右下角的单元格区域(之二) 04070引用指定了左上角和右下角的单元格区域(之三) 04071引用...

    LightGUI一个轻量级的GUI

    自带多种基本的控件,包括静态文本框、按钮、单行和多行编辑框、列表框、进度条、滚动条、图片、等等。 支持自定义控件,控件代码清晰、简明、容易编写。支持组合控件、对话框控件。配合皮肤配置,能快速实现美工...

    java万年历源代码

    //管理视口、可选的垂直和水平滚动条以及可选的行和列标题视口 private JLabel l = new JLabel("小提示:可直接输入年份,提高查询效率!"); private JLabel lt = new JLabel();//系统时间 private JLabel ld =...

Global site tag (gtag.js) - Google Analytics