以前看到alibaba上的注册右边的提示信息效果很不错,总想拿过来自己用.
参考建行的代码.
主要思想是:
在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变
.tip_on, .tip_off
代码如下
<!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>
<title>中国建设银行 个人网上银行</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link href="/V5/css5/before_login.css" _fcksavedurl=""/V5/css5/before_login.css"" _fcksavedurl=""/V5/css5/before_login.css"" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
.tip_off {
background:#fff url(tip_off.gif) 4px 6px no-repeat;
padding:5px 3px 2px 15px;
color:#777;
}
.tip_on {
border:1px solid #090;
background:#e9fde9 url(tip_on.gif) 4px 6px no-repeat;
padding:4px 3px 1px 14px;
color:#444;
}
</style>
<body bottommargin="0" bgproperties="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0">
<form name="jhform" method="post" action="/app/B2CMainPlatV5?CCB_IBSVersion=V5" target="_parent" οnsubmit="return jiamiMima();return go1();">
<div id="Page_content">
<div class="reg_title"></div>
<div class="Area_content">
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="text_user" width="150" height="50" class="text_content login_big"> 用户昵称/证件号码：</td>
<td width="255" height="50" class="text_content"><input name="USERID" type="text" size="20" minLength="1" maxLength="20" title="用户昵称/证件号码"
οnfοcus="hidekeyboard=true;login_2.className='tip_on'" οnblur="login_2.className='tip_off'" value=''/></td>
<td width="280" height="50" class="text_content">
<div id="login_2" class="tip_off">输入您在注册网上银行时使用的证件号码或您设置登陆方式的网上银行用户名(昵称) / 证件号码</div>
</td>
</tr>
<tr>
<td width="120" height="50" class="text_content login_big">登录密码：</td>
<input type="hidden" name="TXCODE" value="100101">
<input type="hidden" name="CCB_PWD_MAP_GIGEST" value="">
<input type="hidden" name="errURL" value="/app/V5/CN/STY1/login.jsp">
<td height="50" class="text_content"><input name="LOGPASS" type="password" size="20" minLength="6" maxLength="12" οnfοcus="hidekeyboard=true;login_3.className='tip_on'" title="登录密码" οnblur="login_3.className='tip_off'" />
</td>
<td width="280" height="50" class="text_content">
<div id="login_3" class="tip_off">输入您设置的网上银行登录密码</div>
</td>
</tr>
<tr>
<td width="120" height="50" class="text_content login_big">附加码：</td>
<td height="50" class="text_content">
<input name="PT_CONFIRM_PWD" type="text" οnfοcus="hidekeyboard=true;login_4.className='tip_on'" οnblur="login_4.className='tip_off'" minLength="1" maxLength="5" title="附加码" /></td>
<td width="280" height="50" class="text_content">
<div id="login_4" class="tip_off">输入右侧图片中的字符 </div></td>
</td></tr>
</table>
</form>
</body>
</html>
效果图：[img]http://msdn.iteye.com/upload/picture/pic/4069/461c0d9b-00af-4bb2-bdaa-83b370bfdbcc.jpg[/img]
PS：个人感觉还不错，后面的文字的背景色会随着前面的焦点位置的改变而改变，保存下来看看。
文章转自：http://blog.youkuaiyun.com/kemy88/archive/2007/03/01/1517698.aspx
参考建行的代码.
主要思想是:
在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变
.tip_on, .tip_off
代码如下
<!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>
<title>中国建设银行 个人网上银行</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link href="/V5/css5/before_login.css" _fcksavedurl=""/V5/css5/before_login.css"" _fcksavedurl=""/V5/css5/before_login.css"" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
.tip_off {
background:#fff url(tip_off.gif) 4px 6px no-repeat;
padding:5px 3px 2px 15px;
color:#777;
}
.tip_on {
border:1px solid #090;
background:#e9fde9 url(tip_on.gif) 4px 6px no-repeat;
padding:4px 3px 1px 14px;
color:#444;
}
</style>
<body bottommargin="0" bgproperties="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0">
<form name="jhform" method="post" action="/app/B2CMainPlatV5?CCB_IBSVersion=V5" target="_parent" οnsubmit="return jiamiMima();return go1();">
<div id="Page_content">
<div class="reg_title"></div>
<div class="Area_content">
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="text_user" width="150" height="50" class="text_content login_big"> 用户昵称/证件号码：</td>
<td width="255" height="50" class="text_content"><input name="USERID" type="text" size="20" minLength="1" maxLength="20" title="用户昵称/证件号码"
οnfοcus="hidekeyboard=true;login_2.className='tip_on'" οnblur="login_2.className='tip_off'" value=''/></td>
<td width="280" height="50" class="text_content">
<div id="login_2" class="tip_off">输入您在注册网上银行时使用的证件号码或您设置登陆方式的网上银行用户名(昵称) / 证件号码</div>
</td>
</tr>
<tr>
<td width="120" height="50" class="text_content login_big">登录密码：</td>
<input type="hidden" name="TXCODE" value="100101">
<input type="hidden" name="CCB_PWD_MAP_GIGEST" value="">
<input type="hidden" name="errURL" value="/app/V5/CN/STY1/login.jsp">
<td height="50" class="text_content"><input name="LOGPASS" type="password" size="20" minLength="6" maxLength="12" οnfοcus="hidekeyboard=true;login_3.className='tip_on'" title="登录密码" οnblur="login_3.className='tip_off'" />
</td>
<td width="280" height="50" class="text_content">
<div id="login_3" class="tip_off">输入您设置的网上银行登录密码</div>
</td>
</tr>
<tr>
<td width="120" height="50" class="text_content login_big">附加码：</td>
<td height="50" class="text_content">
<input name="PT_CONFIRM_PWD" type="text" οnfοcus="hidekeyboard=true;login_4.className='tip_on'" οnblur="login_4.className='tip_off'" minLength="1" maxLength="5" title="附加码" /></td>
<td width="280" height="50" class="text_content">
<div id="login_4" class="tip_off">输入右侧图片中的字符 </div></td>
</td></tr>
</table>
</form>
</body>
</html>
效果图：[img]http://msdn.iteye.com/upload/picture/pic/4069/461c0d9b-00af-4bb2-bdaa-83b370bfdbcc.jpg[/img]
PS：个人感觉还不错，后面的文字的背景色会随着前面的焦点位置的改变而改变，保存下来看看。
文章转自：http://blog.youkuaiyun.com/kemy88/archive/2007/03/01/1517698.aspx
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
