<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery聚焦表单高亮 - 网页模板</title>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
width:950px; margin:0 auto; text-align:center;
}
.content, .contentA{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
.ruler{
width:400px; border-bottom:dashed 1px #dcdcdc;
}
tr:focus{
background-color:#fcfcf0;
}
td{
vertical-align:top;
}
.over{
background-color:#e6e2af;
}
.out{
background-color:none;
}
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
$(document).ready(function()
{
$('.content .left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.content').addClass("over");
}).blur(function(){
$(this).parents('.content').removeClass("over");
});
$('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){
$(this).parents('.row').addClass("over");
}).blur(function(){
$(this).parents('.row').removeClass("over");
});
});
</script>
</head>
<body>
<form method="post">
<h2>jquery聚焦表单高亮</h2>
<p>建立一个更好的Web的形式：jQuery上下文背景突出使用</p>
<div style="float:left; margin-right:20px; width:400px;">
<h3>Row highlighting</h3>
<div class="contentA">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
<hr />
<div class="contentA">
<div class="row">
<div class="left">Address</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Postal</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">City</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Country</div>
<div class="right"><select name="Select1" style="width: 195px">
<option></option>
</select></div>
<div class="clear"></div>
</div>
</div>
<hr />
<div class="contentA">
<div class="row">
<div class="left">Account type</div>
<div class="right">
<input checked="checked" name="Radio1" type="radio" />Basic (Free registration)
<br />
<input checked="checked" name="Radio1" type="radio" />Pro 9.99$
<br />
<input checked="checked" name="Radio1" type="radio" />Expert 19.99$
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Some description</div>
<div class="right"><textarea name="TextArea1" cols="22" rows="3"></textarea></div>
<div class="clear"></div>
</div>
</div>
<input name="Button1" type="button" value="Do some action" />
</div>
<div style="float:left; margin-right:20px;">
<h3>Group highlighting</h3>
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
<hr />
<div class="content">
<div class="row">
<div class="left">Address</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Postal</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">City</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Country</div>
<div class="right"><select name="Select1" style="width: 195px">
<option></option>
</select></div>
<div class="clear"></div>
</div>
</div>
<hr />
<div class="content">
<div class="row">
<div class="left">Account type</div>
<div class="right">
<input checked="checked" name="Radio1" type="radio" />Basic (Free registration)
<br />
<input checked="checked" name="Radio1" type="radio" />Pro 9.99$
<br />
<input checked="checked" name="Radio1" type="radio" />Expert 19.99$
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Some description</div>
<div class="right"><textarea name="TextArea1" cols="22" rows="3"></textarea></div>
<div class="clear"></div>
</div>
</div>
<input name="Button1" type="button" value="Do some action" />
</div>
</form>
<div style="text-align:center;clear:both"><br>
<p>适用浏览器：IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery聚焦表单高亮.zip
版权申诉
111 浏览量
2022-11-21
11:32:21
上传
评论
收藏 76KB ZIP 举报
jquery聚焦表单高亮.zip （3个子文件） 
jquery聚焦表单高亮 
jquery聚焦表单高亮.jpg 72KB jiaoben623 
jquery-1.2.6.js 101KB
index.html 6KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- yolo目标检测项目实验
- downloadFile-1.hc
- Centos7.9环境下离线安装开源版Nginx（亲测版）
- C++课程设计：基于Qt的航班信息管理系统
- ADS7822UVerilog驱动，前面传的有点问题
- 基于python的高性能爬虫程序，使用了多线程+缓存+xpath实现的，这里以彼-岸图库为例，实现，仅用于学习交流
- 中分辨率成像光谱仪（MODIS）烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
- 关于学习Python的相关资源网站链接及相关介绍.docx
- （HAL库）基于STM32F103C8T6的温控PID系统[Dht11、ESP8266、无线透传、L298N……]
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
