带你学习JQuery：表单的改进
来源：互联网 发布：电脑文件复原软件 编辑：程序博客网 时间：2024/05/18 00:42
表单是我们在做J2EE项目长要处理的一个元素，一个良好的用户界面出了漂亮的美工设计，很好的用户体验也是必不可少的
下面我们一点一点改善用户体验，首先从表单开始
当我的输入框获得焦点后，我的输入框要特殊显示，比如边框变宽，背景颜色改变等，足以区分，下面就实现这个功能。
首先要有表单
<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" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>
当获得焦点后，改变背景颜色，失去焦点时，再变为原来颜色
这就需要简单的JQuery代码来实现了
定义样式：
<style type="text/css">
body{
font:normal 12px/17px Arial;
}
div{
padding:2px;
}
input, textarea {
width: 12em;
border: 1px solid #888;
}
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
引入JQuery
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
})
</script>
整体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
font:normal 12px/17px Arial;
}
div{
padding:2px;
}
input, textarea {
width: 12em;
border: 1px solid #888;
}
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
})
</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" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>
</body>
</html>
- 带你学习JQuery：表单的改进
- 带你学习JQuery：表单验证
- 带你学习JQuery：AJax_Load()
- 带你学习JQuery:Struts2+Json+JQuery
- 带你学习JQuery：下拉框的处理
- jquery mobile带表单参数的changePage
- jQuery带格式验证的注册表单
- jquery.ajax()上传带文件的表单
- 带你学习Jquery（二）：选择器
- 带你学习Jquery（三）：选择器
- 带你学习JQuery：事件绑定bind
- 带你学习JQuery：合成事件
- 带你学习JQuery：事件属性
- 带你学习JQuery：表格处理
- 带你学习JQuery：网页选项卡
- 带你学习JQuery：网页换肤
- 带你快速进入--Jquery的世界
- jquery自带表单验证
- string
- 第5天：Java中JTable的入门用法
- ListBox实现多选
- Java 模式 之 静态代理
- QT右键菜单的创建及相关问题解决
- 带你学习JQuery：表单的改进
- 34小时预订超30万 小米手机10月开始供货
- 自定义组件
- 三位技术牛人同一天离开微软
- Linux子系统系列-网络
- VC中使用XMLRPC
- javascript图片上传格式验证，缩略图预览呈现，兼容IE，FIREFOX
- 《卡片分类：可用类别设计》 (澳)Donna 清华大学出版社
- ASP.NET MVC view与controller传值方式（这篇比上篇好）
