船长 发表于 2009-03-12 11:08 | 分类：jQuery | 阅读数：571 次
当表单被经常使用在协助用户提交数据的情形下，如果这个时候能在用户的输入区域更明显的提示用户，这无疑是一个良好的用户体验
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <script src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js"></script> <style> body{ font-family:Arial, Helvetica, sans-serif; font-size: 13px; } .content{ 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:#f0f0f0; } .out{ background-color:none; } </style> </head> <body> <h3>Sample web form</h3> <div style="color:red">*请再次刷新页面查看效果</div> <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 /> <!- Other rows here --> </div> <input name="Button1" type="button" value="Do some action" /> <script> $(document).ready(function() { $('.left, .content input, .content textarea, .content select').focus(function(){ $(this).parents('.row').addClass("over"); }).blur(function(){ $(this).parents('.row').removeClass("over"); }); }); </script> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
