下拉框自动显示（类似新浪登录）
2008-11-19 15:26
246 查看
下拉框自动显示（类似新浪登录）;
我是根据新浪的登录改写的一个静态的下拉框自动显示的效果。
cas.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>服务器端登录入口</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</head>
<STYLE type=text/css>#userPosition {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 999; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: absolute; BORDER-RIGHT-WIDTH: 0px
}
#sinaNote {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 0px; Z-INDEX: 999999; BACKGROUND: #ffffff; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=90); PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: #ccc 1px solid; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; TEXT-ALIGN: left; -moz-opacity: .9; opacity: 0.9
}
#sinaNote LI {
CLEAR: both; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px 1px; CURSOR: pointer; COLOR: #666; LINE-HEIGHT: 20px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 20px
}
#sinaNote LI.note {
COLOR: #666; TEXT-ALIGN: left
}
</STYLE>
<SCRIPT language=javascript src="8.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
function chkLogin() {
var username = document.showLogin.username.value;
var password = document.showLogin.password.value;
if (username.length < 1 || username.length > 30) {
alert("用户名非法，请检查!");
return false;
};
if (password.length < 1 || password.length > 30) {
alert("密码非法，请检查!");
return false;
};
document.showLogin.submit();
document.showLogin.password.value = "";
return false;
}
function chkLoginType(username){
username = username.toLowerCase();
};
var sina = {
$ : function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},
isIE : navigator.appVersion.indexOf("MSIE")!=-1?true:false,
addEvent : function(obj,eventType,func){if(obj.attachEvent){obj.attachEvent("on" + eventType,func);}else{obj.addEventListener(eventType,func,false)}},
delEvent : function(obj,eventType,func){
if(obj.detachEvent){obj.detachEvent("on" + eventType,func)}else{obj.removeEventListener(eventType,func,false)}
},
readCookie : function(l){var i="",I=l+"=";if(document.cookie.length>0){offset=document.cookie.indexOf(I);if(offset!=-1){offset+=I.length;end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;i=unescape(document.cookie.substring(offset,end))}};return i},
writeCookie : function(O,o,l,I){var i="",c="";if(l!=null){i=new Date((new Date).getTime()+l*3600000);i="; expires="+i.toGMTString()};if(I!=null){c=";domain="+I};document.cookie=O+"="+escape(o)+i+c}
};
function LoginSelectClickOther(e){
thisObj = e.target?e.target:event.srcElement;
do{
if(thisObj.id == "loginFldselect" || thisObj == document.showLogin.password) return;
if(thisObj.tagName == "BODY"){LoginSelectClose();return;};
thisObj = thisObj.parentNode;
}while(thisObj.parentNode);
};
function clickLoginSelect(){
if(sina.$("loginFldselectop").style.display == "block"){
LoginSelectClose();
}else{
sina.$("loginFldselectop").style.display = "block";
sina.addEvent(document.body,"mousedown",LoginSelectClickOther);
}
};
function LoginSelectClose(){
sina.$("loginFldselectop").style.display = "none";
sina.delEvent(document.body,"mousedown",LoginSelectClickOther);
};
function openLoginType(){
if(document.showLogin.username.value != "" && document.showLogin.username.value.indexOf("@") == -1 ){
sina.$("loginFldselectop").style.display = "block";
sina.addEvent(document.body,"mousedown",LoginSelectClickOther);
}
}
//]]>
</SCRIPT>
<!-- ajaxTab begin --><!-- 如果不使用ajaxTab，请将此段js删除 -->
<SCRIPT type=text/javascript>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'//w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('//b'+e(c)+'//b','g'),k[c]);return p}('11 1a=1b 1K();1a.2c=(1t 1c.1L!=/'1u/')&&(1t 1c.1L.2d!=/'1u/')&&(1t 2e!=/'1u/');1a.2f=16.1j?15:1k;1a.1M=(1N.1O.1P().19("2g")!=-1);1a.2h=(1N.1O.1P().19("2i")!=-1);10(1a.1M){1Q()}13 1Q(){1v.1w.1x("2j",13(){11 a=12.1y;1l(a.1z!=1)a=a.17;14 a});1v.1w.1x("1R",13(){11 a;10(12.1m=="1S")a=12.1T;18 10(12.1m=="1U")a=12.1y;10(!a)14;1l(a.1z!=1)a=a.17;14 a});1v.1w.1x("1V",13(){11 a;10(12.1m=="1U")a=12.1T;18 10(12.1m=="1S")a=12.1y;10(!a)14;1l(a.1z!=1)a=a.17;14 a})}13 1A(a,b){1l(a!=1d){a=a.17;10(a==b)14 15}14 1k}11 1e=1b 1K();11 1n;11 1B;11 1W=0;13 1C(a,b){10(a.19("1f")!=-1||a.19("1D")!=-1)a=a.1X(6);18 10(a.19("2k")!=-1)a=a.1X(4);18 a="";14 b+a}13 2l(){1E(11 i=0;i<1Y.1F;i++){11 d=1c.1G(1Y[i]);1o=d.1H("2m");1E(11 j=0;j<1o.1F;j++){11 e=1o[j];10(e.17.17!=d)2n;11 f=e.1H("a")[0];11 g=f.1p("1Z");11 h=f.1p("20");e.1g=13(a){10(a){12.1h="1f";12.1q=1C(12.1q,"1f")}18{12.1h="1D";12.1q=1C(12.1q,"1D")}};e.21=13(){12.1g(15);12.17.17.1i.1g(1k);12.17.17.1i=12;11 a=12.1H("a")[0];22(a.1p("1Z"),a.1p("20"))};e.2o=13(a){11 b=16.1r?16.1r:a;11 c=b.1R;10(1A(c,12)||c==12)14;10(12.1h=="1f")14;1B=12;23(1n);1n=16.2p("1B.21();",1W)};e.2q=13(a){11 b=16.1r?16.1r:a;11 c=b.1V;10(1A(c,12)||c==12)14;10(12.1h=="1f")14;23(1n)};10(g.19("#2r")!=-1){e.1g(15);d.1i=e;1e[g]=1I(h).1s}18{e.1g(1k)}}10(d.1i==1d)d.1i=1o[0]}}13 24(){11 a;10(16.1J){a=1b 1J();10(a.25){a.25("2s/2t")}}18 10(16.1j){26{a=1b 1j("2u.27")}28(e){26{a=1b 1j("2v.27")}28(e){}}}10(!a){16.2w("2x/'t 2y 1J 2z.");14 1d}14 a}13 29(a,b,c,d){11 e=1b 2A();11 f;11 i;e[0]="";e[1]="A B C D E F G H I J K L M N O P Q R S T U V W X Y Z";e[2]="a b c d e f g h i j k l m n o p q r s t u v w x y z";e[3]="0 1 2 3 4 5 6 7 8 9";10(!b&&!c&&!d){b=15;c=15;d=15}10(b){e[0]+=e[1]}10(c){e[0]+=" "+e[2]}10(d){e[0]+=" "+e[3]}e[0]=e[0].2B(" ");f="";1E(i=0;i<a;i++){f+=e[0][2a.2C(2a.2D()*(e[0].1F-1))]}14(f)}11 2b=29(2E,15,15,15);13 22(a,b){11 c=1I(b);10(1e[a]==1d){11 d=24();d.2F=13(){10(d.2G==4&&(d.1h==2H||16.2I.2J.19("2K")==-1)){c.1s=d.2L;1e[a]=c.1s}};d.2M("2N",a+"?r="+2b,15);d.2O(1d)}18{c.1s=1e[a]}}16.2P=13(){14 15};13 1I(a){14(1c.1G)?1c.1G(a):1c.2Q[a]}',62,177,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||if|var|this|function|return|true|window|parentNode|else|indexOf|Browser|new|document|null|ajccache|active|setActive|status|activetab|ActiveXObject|false|while|type|waitInterval|ulist|getAttribute|className|event|innerHTML|typeof|undefined|Event|prototype|__defineGetter__|target|nodeType|IsChild|tempref|getTBprefixName|normal|for|length|getElementById|getElementsByTagName|getElement|XMLHttpRequest|Object|implementation|isFirefox|navigator|userAgent|toLowerCase|extendEventObject|fromElement|mouseover|relatedTarget|mouseout|toElement|MouseDelayTime|substr|arguments|urn|rel|LoadTab|loadAJAXTab|clearTimeout|getXmlhttp|overrideMimeType|try|XMLHTTP|catch|rnd_str|Math|urlRdm|isMozilla|createDocument|HTMLDocument|isIE|firefox|isOpera|opera|srcElement|over|startajaxtabs|li|continue|onclick|setTimeout|onmouseout|default|text|xml|Msxml2|Microsoft|alert|can|create|object|Array|split|round|random|32|onreadystatechange|readyState|200|location|href|http|responseText|open|GET|send|onerror|all'.split('|'),0,{}))
</SCRIPT>
<BODY bgcolor="#0044AA" id=body>
<p>
<%
/*String error = "";
if (request
.getAttribute("edu.yale.its.tp.cas.badUsernameOrPassword") != null)
error = request.getAttribute(
"edu.yale.its.tp.cas.badUsernameOrPassword").toString();*/
%>
</p>
<p>
</p>
<p>
</p>
<div align="center">
<table width="580" height="228" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" bgcolor="#0044AA" align="center">
<font color="white" face="Arial,Helvetica" size="5"> <b><i>Login
Is Beginning......</i>
</b> </font>
</td>
</tr>
<tr>
<td width="207">
<img src="/cas/images/102369318.jpg" width="200" /> </td>
<td width="361" colspan="2">
<DIV class=tB02>
<FORM name=showLogin onSubmit="return chkLogin()" action=# method=post target=_blank>
<FIELDSET class=loginFld><DIV class=usernameFld>
<DIV class=usernameFldlabel><LABEL class=usernameFldTxt>登录名</LABEL></DIV>
<DIV class=usernameFldinput>
<INPUT id=username onblur=chkLoginType(this.value) name=username autocomplete="off">
</DIV>
</DIV>
<DIV class=passwordFld>
<DIV class=passwordFldlabel><LABEL class=passwordFldTxt>密码</LABEL></DIV>
<DIV class=passwordFldinput>
<INPUT id=password type=password name=password>
</DIV></DIV>
<DIV class=bottonFld>
<INPUT id=bottonFldsubmit type=submit align=absMiddle value=登录></DIV></FIELDSET>
</FORM>
</DIV>
</td>
</tr>
<input type="hidden" name="lt"
value="<%//=request.getAttribute("edu.yale.its.tp.cas.lt")%>" />
</table>
</div>
<SCRIPT language=javascript defer type=text/javascript>
//只要复制过去改下下面参数就可以了 :)
function initUserName(){
passcardOBJ.init(
// FlashSoft 注意,最好这个input的autocomplete设定为off
// 需要有下拉框的input对象
document.getElementById("username"),
{
// 鼠标经过字体颜色
overfcolor: "#666",
// 鼠标经过背景颜色
overbgcolor: "#d6edfb",
// 鼠标离开字体颜色
outfcolor: "#000000",
// 鼠标离开背景颜色
outbgcolor: ""
},
// 输入完成后,自动需要跳到的input对象[备选]
document.getElementById("password"));
}
initUserName();
</SCRIPT>
</BODY>
</html>
-------------------
8.js:
(function () {
/**
* 判断浏览器类型
* add by xs @ 2008-3-4
*/
var _ua = navigator.userAgent.toLowerCase();
var $IE = /msie/.test(_ua);
var $moz = /gecko/.test(_ua);
var $Safari = /safari/.test(_ua);
/**
* 根据元素的id获取对应节点的引用
* @author stan | chaoliang@staff.sina.com.cn
* @param {String} id 节点的id或者节点本身
*/
function $E(id) {
return typeof(id) == 'string' ? _viewWindow.document.getElementById(id) : id;
}
/**
* 取得页面的scrollPos
* @return {Array} 滚动条居顶 居左值
* @author chaoliang@staff.sina.com.cn
* fangchao@staff.sina.com.cn
* @update 08.02.13
*/
var getScrollPos = function(oDocument) {
oDocument = oDocument || document;
return [
Math.max(oDocument.documentElement.scrollTop, oDocument.body.scrollTop),
Math.max(oDocument.documentElement.scrollLeft, oDocument.body.scrollLeft),
Math.max(oDocument.documentElement.scrollWidth, oDocument.body.scrollWidth),
Math.max(oDocument.documentElement.scrollHeight, oDocument.body.scrollHeight)
];
};
/**
* 获取指定节点的样式
* @method getStyle
* @param {HTMLElement | Document} el 节点对象
* @param {String} property 样式名
* @return {String} 指定样式的值
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @global $getStyle
* @exception
* getStyle(document.body, "left");
* $getStyle(document.body, "left");
*/
var getStyle = function (el, property) {
switch (property) {
// 透明度
case "opacity":
var val = 100;
try {
val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
}
catch(e) {
try {
val = el.filters('alpha').opacity;
}catch(e){}
}
return val;
// 浮动
case "float":
property = "styleFloat";
default:
var value = el.currentStyle? el.currentStyle[property]: null;
return ( el.style[property] || value );
}
};
if($moz) {
getStyle = function (el, property) {
// 浮动
if(property == "float") {
property = "cssFloat";
}
// 获取集合
try{
var computed = document.defaultView.getComputedStyle(el, "");
}
catch(e) {
traceError(e);
}
return el.style[property] || computed? computed[property]: null;
};
}
/**
* 获取节点对象的距文档的XY值
* @method getXY
* @param {HTMLElement } el 节点对象
* @return {Array} x,y的数组对象
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @global $getXY
* @exception
* getXY($E("input"));
* $getXY($E("input"));
*/
var getXY = function (el) {
if ((el.parentNode == null || el.offsetParent == null || getStyle(el, "display") == "none") && el != document.body) {
return false;
}
var parentNode = null;
var pos = [];
var box;
var doc = el.ownerDocument;
// IE
box = el.getBoundingClientRect();
var scrollPos = getScrollPos(el.ownerDocument);
return [box.left + scrollPos[1], box.top + scrollPos[0]];
// IE end
parentNode = el.parentNode;
while (parentNode.tagName && !/^body|html$/i.test(parentNode.tagName)) {
if (getStyle(parentNode, "display").search(/^inline|table-row.*$/i)) {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
parentNode = parentNode.parentNode;
}
return pos;
};
if($moz) {
getXY = function (el) {
if ((el.parentNode == null || el.offsetParent == null || getStyle(el, "display") == "none") && el != document.body) {
return false;
}
var parentNode = null;
var pos = [];
var box;
var doc = el.ownerDocument;
// FF
pos = [el.offsetLeft, el.offsetTop];
parentNode = el.offsetParent;
var hasAbs = getStyle(el, "position") == "absolute";
if (parentNode != el) {
while (parentNode) {
pos[0] += parentNode.offsetLeft;
pos[1] += parentNode.offsetTop;
if ($Safari && !hasAbs && getStyle(parentNode,"position") == "absolute" ) {
hasAbs = true;
}
parentNode = parentNode.offsetParent;
}
}
if ($Safari && hasAbs) {
pos[0] -= el.ownerDocument.body.offsetLeft;
pos[1] -= el.ownerDocument.body.offsetTop;
}
parentNode = el.parentNode;
// FF End
while (parentNode.tagName && !/^body|html$/i.test(parentNode.tagName)) {
if (getStyle(parentNode, "display").search(/^inline|table-row.*$/i)) {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
parentNode = parentNode.parentNode;
}
return pos;
};
}
/**
* 获取Event对象
* @method getEvent
* @return {Event} event对象
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @exception
* getEvent();
*/
var getEvent = function () {
return window.event;
};
if($moz) {
getEvent = function () {
var o = arguments.callee.caller;
var e;
var n = 0;
while(o != null && n < 40){
e = o.arguments[0];
if (e && (e.constructor == Event || e.constructor == MouseEvent)) {
return e;
}
n ++;
o = o.caller;
}
return e;
};
}
/**
* 禁止Event事件冒泡
* @method stopEvent
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @exception
* stopEvent();
*/
var stopEvent = function() {
var ev = getEvent();
ev.cancelBubble = true;
ev.returnValue = false;
};
if($moz) {
stopEvent = function() {
var ev = getEvent();
ev.preventDefault();
ev.stopPropagation();
};
}
Function.prototype.bind3 = function(object, args) {
args = args == null? []: args;
var __method = this;
return function() {
__method.apply(object, args);
}
};
/**
* 在指定节点上绑定相应的事件
* @method addEvent2
* @param {String} elm 需要绑定的节点id
* @param {Function} func 事件发生时相应的函数
* @param {String} evType 事件的类型如:click, mouseover
* @update 08.02.23
* @author Stan | chaoliang@staff.sina.com.cn
* FlashSoft | fangchao@staff.sina.com.cn
* @example
* //鼠标点击testEle则alert "clicked"
* $addEvent2("testEle",function () {
* alert("clicked")
* },'click');
*/
function addEvent2 (elm, func, evType, useCapture) {
var elm = $E(elm);
if(typeof useCapture == 'undefined') useCapture = false;
if(typeof evType == 'undefined') evType = 'click';
if (elm.addEventListener) {
elm.addEventListener(evType, func, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, func);
return true;
}
else {
elm['on' + evType] = func;
}
};
/**
初始化的一些变量
@author FlashSoft | fangchao@staff.sina.com.cn
*/
var _inputNode;
var _rndID = parseInt(Math.random() * 100);
/** 当前显示的菜单集合 */
var _showMenuItems = [];
/** 当前显示的菜单索引 */
var _selectMenuIndex = -1;
/** 被选中行的文字 */
var _selectMenuText = "";
var _viewWindow = window;
var passcardOBJ = {
// 鼠标经过背景颜色
overfcolor: "#999",
// 鼠标经过背景颜色
overbgcolor: "#e8f4fc",
// 鼠标离开字体颜色
outfcolor: "#000000",
// 鼠标离开背景颜色
outbgcolor: "",
menuStatus: {
// 是否显示Sina邮箱
"sina.com": true,
// 是否显示VIP邮箱
"vip.sina.com": true,
// 是否显示2008
"2008.sina.com": true,
// 是否显示263
"263.sina.com": true
}
}
/**
* 动态生成提示框
* add by xs @ 2008-3-4
*/
passcardOBJ.createNode = function(){
var d = _viewWindow.document;
var div = d.createElement('div');
div.innerHTML = '<ul class="passCard" id="sinaNote" style="display:none;"></ul>'
d.body.appendChild(div);
}
/**
快捷键选择菜单
@author FlashSoft | fangchao@staff.sina.com.cn
*/
passcardOBJ.arrowKey = function (keyCodeNum) {
if(keyCodeNum == 38) {// --
if(_selectMenuIndex <= 0)_selectMenuIndex = _showMenuItems.length;
_selectMenuIndex --;
passcardOBJ.selectLi(_selectMenuIndex);
}
if(keyCodeNum == 40) {// ++
if(_selectMenuIndex >= _showMenuItems.length - 1)_selectMenuIndex = -1;
_selectMenuIndex ++;
passcardOBJ.selectLi(_selectMenuIndex);
}
};
passcardOBJ.showList = function(e)//显示列表
{
_selectMenuText = "";
var keyCodeNum = getEvent().keyCode;
if(keyCodeNum == 38 || keyCodeNum == 40) {
passcardOBJ.arrowKey(keyCodeNum);
return false;
}
if (!$E('sinaNote'))
passcardOBJ.createNode();
var username = $E(e).value;
var menuList = {
};
var atIndex = username.indexOf("@");
var InputCase = "";
var InputStr = "";
if(atIndex > -1) {
InputCase = username.substr(atIndex + 1);
InputStr = username.substr(0, atIndex);
}
_showMenuItems = [];
_selectMenuIndex = 0;
_showMenuItems[_showMenuItems.length] = "sinaNote_MenuItem_Title_" + _rndID;
for(var key in this.menuStatus) {
this.menuStatus[key] = true;
if(InputCase != "" && InputCase != key.substr(0, InputCase.length)) {
this.menuStatus[key] = false;
}
else {
_showMenuItems[_showMenuItems.length] = "sinaNote_MenuItem_" + key + "_" + _rndID;
}
}
var listcontent = '<li class="note">请选择登录类型</li>';
listcontent += '<li id="sinaNote_MenuItem_Title_'+_rndID+'">' + username + '</li>';
var itemLabel;
for(var key in this.menuStatus) {
if(this.menuStatus[key] == true) {
if(InputStr == "") {
itemLabel = username + "@" + key;
}
else {
itemLabel = InputStr + "@" + key;
}
listcontent += '<li id="sinaNote_MenuItem_' + key + '_' + _rndID + '" title="'+itemLabel+'">' + itemLabel + '</li>';
}
}
$E("sinaNote").innerHTML = listcontent;
for (var i = 0; i < username.length; i++) {
if (username.charCodeAt(i) < 0xA0) {
$E("sinaNote").style.display = "";
this.selectList(e);
}
else {
this.hideList();
}
}
/**
* 自动适应文本框的位置，及宽度
* add by xs @ 2008-3-3
*/
var el = $E(e);
var note = $E("sinaNote");
/**
Iframe在父窗体的位置
@author FlashSoft | fangchao@staff.sina.com.cn
*/
var frameLeft = 0;
var frameTop = 0;
var framePos;
if(_viewWindow != window) {
framePos = getXY(window.frameElement)
frameLeft = framePos[0];
frameTop = framePos[1];
}
var inputWidth = el.offsetWidth;
if(inputWidth < 200) {
inputWidth = 200;
}
note.style.width = inputWidth - 2 + 'px';
var inputXY = getXY(el);
note.style.left = (inputXY[0] - ($IE ? 2 : -1) + frameLeft) + 'px';
note.style.top = (inputXY[1] + el.offsetHeight - ($IE ? 2 : -1) + frameTop) + 'px';
}
passcardOBJ.selectList = function(e)//选择列表
{
var unames = $E("sinaNote").getElementsByTagName("li");
for (var i = 1; i < unames.length; i++) {
unames[1].style.backgroundColor = passcardOBJ.overbgcolor;
unames[1].style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
unames[i].onmousedown = function(){
$E(e).value = this.innerHTML;
stopEvent();
}
unames[i].onmouseover = function(){
if (i != 1) {
unames[1].style.backgroundColor = passcardOBJ.outbgcolor;
unames[1].style.color = passcardOBJ.overfcolor;//鼠标经过字体颜色
}
this.style.backgroundColor = passcardOBJ.overbgcolor;//鼠标经过背景颜色
this.style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
}
unames[i].onmouseout = function(){
this.style.backgroundColor = passcardOBJ.outbgcolor;//鼠标离开背景颜色
this.style.color = passcardOBJ.overfcolor;//鼠标离开字体颜色
unames[1].style.backgroundColor = passcardOBJ.overbgcolor;//鼠标经过背景颜色
unames[1].style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
}
}
}
/**
选中指定ID的li
@author | fangchao@staff.sina.com.cn
*/
passcardOBJ.selectLi = function (nIndex) {
var menuNode;
$E("sinaNote_MenuItem_Title_"+_rndID).style.backgroundColor = passcardOBJ.outbgcolor;//鼠标离开背景颜色
$E("sinaNote_MenuItem_Title_"+_rndID).style.color = passcardOBJ.overfcolor;//鼠标离开字体颜色
for(var i = 0; i < _showMenuItems.length; i ++ ) {
menuNode = $E(_showMenuItems[i]);
menuNode.style.backgroundColor = passcardOBJ.outbgcolor;//鼠标离开背景颜色
menuNode.style.color = passcardOBJ.overfcolor;//鼠标离开字体颜色
}
$E(_showMenuItems[nIndex]).style.backgroundColor = passcardOBJ.overbgcolor;//鼠标经过背景颜色
$E(_showMenuItems[nIndex]).style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
_selectMenuText = $E(_showMenuItems[nIndex]).innerHTML;
}
passcardOBJ.hideList = function()//隐藏列表
{
/**
* 如果没有找到页面中相应的对象，则自动创建
* add by xs @ 2008-3-3
*/
if (!$E('sinaNote'))
passcardOBJ.createNode();
$E("sinaNote").style.display = "none";
}
passcardOBJ.init = function (oNode, oColors, oFocusNode, oWindowTarget) {
for(var key in oColors) {
this[key] = oColors[key];
}
addEvent2(document, passcardOBJ.hideList, "click");
addEvent2(oNode, passcardOBJ.hideList, "blur");
addEvent2(oNode, passcardOBJ.showList.bind3(this, [oNode]), "keyup");
addEvent2(oNode, function (e) {
var keyCodeNum = getEvent().keyCode;
if(keyCodeNum == 13 || keyCodeNum == 9) {
if(_selectMenuText != "") {
oNode.value = _selectMenuText;
}
if(oFocusNode != null) oFocusNode.focus();
stopEvent();
}
}, "keydown");
if(oWindowTarget) _viewWindow = oWindowTarget;
}
window.passcardOBJ = passcardOBJ;
})();
我是根据新浪的登录改写的一个静态的下拉框自动显示的效果。
cas.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>服务器端登录入口</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</head>
<STYLE type=text/css>#userPosition {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 999; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: absolute; BORDER-RIGHT-WIDTH: 0px
}
#sinaNote {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 0px; Z-INDEX: 999999; BACKGROUND: #ffffff; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=90); PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: #ccc 1px solid; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; TEXT-ALIGN: left; -moz-opacity: .9; opacity: 0.9
}
#sinaNote LI {
CLEAR: both; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px 1px; CURSOR: pointer; COLOR: #666; LINE-HEIGHT: 20px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 20px
}
#sinaNote LI.note {
COLOR: #666; TEXT-ALIGN: left
}
</STYLE>
<SCRIPT language=javascript src="8.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
function chkLogin() {
var username = document.showLogin.username.value;
var password = document.showLogin.password.value;
if (username.length < 1 || username.length > 30) {
alert("用户名非法，请检查!");
return false;
};
if (password.length < 1 || password.length > 30) {
alert("密码非法，请检查!");
return false;
};
document.showLogin.submit();
document.showLogin.password.value = "";
return false;
}
function chkLoginType(username){
username = username.toLowerCase();
};
var sina = {
$ : function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},
isIE : navigator.appVersion.indexOf("MSIE")!=-1?true:false,
addEvent : function(obj,eventType,func){if(obj.attachEvent){obj.attachEvent("on" + eventType,func);}else{obj.addEventListener(eventType,func,false)}},
delEvent : function(obj,eventType,func){
if(obj.detachEvent){obj.detachEvent("on" + eventType,func)}else{obj.removeEventListener(eventType,func,false)}
},
readCookie : function(l){var i="",I=l+"=";if(document.cookie.length>0){offset=document.cookie.indexOf(I);if(offset!=-1){offset+=I.length;end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;i=unescape(document.cookie.substring(offset,end))}};return i},
writeCookie : function(O,o,l,I){var i="",c="";if(l!=null){i=new Date((new Date).getTime()+l*3600000);i="; expires="+i.toGMTString()};if(I!=null){c=";domain="+I};document.cookie=O+"="+escape(o)+i+c}
};
function LoginSelectClickOther(e){
thisObj = e.target?e.target:event.srcElement;
do{
if(thisObj.id == "loginFldselect" || thisObj == document.showLogin.password) return;
if(thisObj.tagName == "BODY"){LoginSelectClose();return;};
thisObj = thisObj.parentNode;
}while(thisObj.parentNode);
};
function clickLoginSelect(){
if(sina.$("loginFldselectop").style.display == "block"){
LoginSelectClose();
}else{
sina.$("loginFldselectop").style.display = "block";
sina.addEvent(document.body,"mousedown",LoginSelectClickOther);
}
};
function LoginSelectClose(){
sina.$("loginFldselectop").style.display = "none";
sina.delEvent(document.body,"mousedown",LoginSelectClickOther);
};
function openLoginType(){
if(document.showLogin.username.value != "" && document.showLogin.username.value.indexOf("@") == -1 ){
sina.$("loginFldselectop").style.display = "block";
sina.addEvent(document.body,"mousedown",LoginSelectClickOther);
}
}
//]]>
</SCRIPT>
<!-- ajaxTab begin --><!-- 如果不使用ajaxTab，请将此段js删除 -->
<SCRIPT type=text/javascript>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'//w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('//b'+e(c)+'//b','g'),k[c]);return p}('11 1a=1b 1K();1a.2c=(1t 1c.1L!=/'1u/')&&(1t 1c.1L.2d!=/'1u/')&&(1t 2e!=/'1u/');1a.2f=16.1j?15:1k;1a.1M=(1N.1O.1P().19("2g")!=-1);1a.2h=(1N.1O.1P().19("2i")!=-1);10(1a.1M){1Q()}13 1Q(){1v.1w.1x("2j",13(){11 a=12.1y;1l(a.1z!=1)a=a.17;14 a});1v.1w.1x("1R",13(){11 a;10(12.1m=="1S")a=12.1T;18 10(12.1m=="1U")a=12.1y;10(!a)14;1l(a.1z!=1)a=a.17;14 a});1v.1w.1x("1V",13(){11 a;10(12.1m=="1U")a=12.1T;18 10(12.1m=="1S")a=12.1y;10(!a)14;1l(a.1z!=1)a=a.17;14 a})}13 1A(a,b){1l(a!=1d){a=a.17;10(a==b)14 15}14 1k}11 1e=1b 1K();11 1n;11 1B;11 1W=0;13 1C(a,b){10(a.19("1f")!=-1||a.19("1D")!=-1)a=a.1X(6);18 10(a.19("2k")!=-1)a=a.1X(4);18 a="";14 b+a}13 2l(){1E(11 i=0;i<1Y.1F;i++){11 d=1c.1G(1Y[i]);1o=d.1H("2m");1E(11 j=0;j<1o.1F;j++){11 e=1o[j];10(e.17.17!=d)2n;11 f=e.1H("a")[0];11 g=f.1p("1Z");11 h=f.1p("20");e.1g=13(a){10(a){12.1h="1f";12.1q=1C(12.1q,"1f")}18{12.1h="1D";12.1q=1C(12.1q,"1D")}};e.21=13(){12.1g(15);12.17.17.1i.1g(1k);12.17.17.1i=12;11 a=12.1H("a")[0];22(a.1p("1Z"),a.1p("20"))};e.2o=13(a){11 b=16.1r?16.1r:a;11 c=b.1R;10(1A(c,12)||c==12)14;10(12.1h=="1f")14;1B=12;23(1n);1n=16.2p("1B.21();",1W)};e.2q=13(a){11 b=16.1r?16.1r:a;11 c=b.1V;10(1A(c,12)||c==12)14;10(12.1h=="1f")14;23(1n)};10(g.19("#2r")!=-1){e.1g(15);d.1i=e;1e[g]=1I(h).1s}18{e.1g(1k)}}10(d.1i==1d)d.1i=1o[0]}}13 24(){11 a;10(16.1J){a=1b 1J();10(a.25){a.25("2s/2t")}}18 10(16.1j){26{a=1b 1j("2u.27")}28(e){26{a=1b 1j("2v.27")}28(e){}}}10(!a){16.2w("2x/'t 2y 1J 2z.");14 1d}14 a}13 29(a,b,c,d){11 e=1b 2A();11 f;11 i;e[0]="";e[1]="A B C D E F G H I J K L M N O P Q R S T U V W X Y Z";e[2]="a b c d e f g h i j k l m n o p q r s t u v w x y z";e[3]="0 1 2 3 4 5 6 7 8 9";10(!b&&!c&&!d){b=15;c=15;d=15}10(b){e[0]+=e[1]}10(c){e[0]+=" "+e[2]}10(d){e[0]+=" "+e[3]}e[0]=e[0].2B(" ");f="";1E(i=0;i<a;i++){f+=e[0][2a.2C(2a.2D()*(e[0].1F-1))]}14(f)}11 2b=29(2E,15,15,15);13 22(a,b){11 c=1I(b);10(1e[a]==1d){11 d=24();d.2F=13(){10(d.2G==4&&(d.1h==2H||16.2I.2J.19("2K")==-1)){c.1s=d.2L;1e[a]=c.1s}};d.2M("2N",a+"?r="+2b,15);d.2O(1d)}18{c.1s=1e[a]}}16.2P=13(){14 15};13 1I(a){14(1c.1G)?1c.1G(a):1c.2Q[a]}',62,177,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||if|var|this|function|return|true|window|parentNode|else|indexOf|Browser|new|document|null|ajccache|active|setActive|status|activetab|ActiveXObject|false|while|type|waitInterval|ulist|getAttribute|className|event|innerHTML|typeof|undefined|Event|prototype|__defineGetter__|target|nodeType|IsChild|tempref|getTBprefixName|normal|for|length|getElementById|getElementsByTagName|getElement|XMLHttpRequest|Object|implementation|isFirefox|navigator|userAgent|toLowerCase|extendEventObject|fromElement|mouseover|relatedTarget|mouseout|toElement|MouseDelayTime|substr|arguments|urn|rel|LoadTab|loadAJAXTab|clearTimeout|getXmlhttp|overrideMimeType|try|XMLHTTP|catch|rnd_str|Math|urlRdm|isMozilla|createDocument|HTMLDocument|isIE|firefox|isOpera|opera|srcElement|over|startajaxtabs|li|continue|onclick|setTimeout|onmouseout|default|text|xml|Msxml2|Microsoft|alert|can|create|object|Array|split|round|random|32|onreadystatechange|readyState|200|location|href|http|responseText|open|GET|send|onerror|all'.split('|'),0,{}))
</SCRIPT>
<BODY bgcolor="#0044AA" id=body>
<p>
<%
/*String error = "";
if (request
.getAttribute("edu.yale.its.tp.cas.badUsernameOrPassword") != null)
error = request.getAttribute(
"edu.yale.its.tp.cas.badUsernameOrPassword").toString();*/
%>
</p>
<p>
</p>
<p>
</p>
<div align="center">
<table width="580" height="228" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" bgcolor="#0044AA" align="center">
<font color="white" face="Arial,Helvetica" size="5"> <b><i>Login
Is Beginning......</i>
</b> </font>
</td>
</tr>
<tr>
<td width="207">
<img src="/cas/images/102369318.jpg" width="200" /> </td>
<td width="361" colspan="2">
<DIV class=tB02>
<FORM name=showLogin onSubmit="return chkLogin()" action=# method=post target=_blank>
<FIELDSET class=loginFld><DIV class=usernameFld>
<DIV class=usernameFldlabel><LABEL class=usernameFldTxt>登录名</LABEL></DIV>
<DIV class=usernameFldinput>
<INPUT id=username onblur=chkLoginType(this.value) name=username autocomplete="off">
</DIV>
</DIV>
<DIV class=passwordFld>
<DIV class=passwordFldlabel><LABEL class=passwordFldTxt>密码</LABEL></DIV>
<DIV class=passwordFldinput>
<INPUT id=password type=password name=password>
</DIV></DIV>
<DIV class=bottonFld>
<INPUT id=bottonFldsubmit type=submit align=absMiddle value=登录></DIV></FIELDSET>
</FORM>
</DIV>
</td>
</tr>
<input type="hidden" name="lt"
value="<%//=request.getAttribute("edu.yale.its.tp.cas.lt")%>" />
</table>
</div>
<SCRIPT language=javascript defer type=text/javascript>
//只要复制过去改下下面参数就可以了 :)
function initUserName(){
passcardOBJ.init(
// FlashSoft 注意,最好这个input的autocomplete设定为off
// 需要有下拉框的input对象
document.getElementById("username"),
{
// 鼠标经过字体颜色
overfcolor: "#666",
// 鼠标经过背景颜色
overbgcolor: "#d6edfb",
// 鼠标离开字体颜色
outfcolor: "#000000",
// 鼠标离开背景颜色
outbgcolor: ""
},
// 输入完成后,自动需要跳到的input对象[备选]
document.getElementById("password"));
}
initUserName();
</SCRIPT>
</BODY>
</html>
-------------------
8.js:
(function () {
/**
* 判断浏览器类型
* add by xs @ 2008-3-4
*/
var _ua = navigator.userAgent.toLowerCase();
var $IE = /msie/.test(_ua);
var $moz = /gecko/.test(_ua);
var $Safari = /safari/.test(_ua);
/**
* 根据元素的id获取对应节点的引用
* @author stan | chaoliang@staff.sina.com.cn
* @param {String} id 节点的id或者节点本身
*/
function $E(id) {
return typeof(id) == 'string' ? _viewWindow.document.getElementById(id) : id;
}
/**
* 取得页面的scrollPos
* @return {Array} 滚动条居顶 居左值
* @author chaoliang@staff.sina.com.cn
* fangchao@staff.sina.com.cn
* @update 08.02.13
*/
var getScrollPos = function(oDocument) {
oDocument = oDocument || document;
return [
Math.max(oDocument.documentElement.scrollTop, oDocument.body.scrollTop),
Math.max(oDocument.documentElement.scrollLeft, oDocument.body.scrollLeft),
Math.max(oDocument.documentElement.scrollWidth, oDocument.body.scrollWidth),
Math.max(oDocument.documentElement.scrollHeight, oDocument.body.scrollHeight)
];
};
/**
* 获取指定节点的样式
* @method getStyle
* @param {HTMLElement | Document} el 节点对象
* @param {String} property 样式名
* @return {String} 指定样式的值
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @global $getStyle
* @exception
* getStyle(document.body, "left");
* $getStyle(document.body, "left");
*/
var getStyle = function (el, property) {
switch (property) {
// 透明度
case "opacity":
var val = 100;
try {
val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
}
catch(e) {
try {
val = el.filters('alpha').opacity;
}catch(e){}
}
return val;
// 浮动
case "float":
property = "styleFloat";
default:
var value = el.currentStyle? el.currentStyle[property]: null;
return ( el.style[property] || value );
}
};
if($moz) {
getStyle = function (el, property) {
// 浮动
if(property == "float") {
property = "cssFloat";
}
// 获取集合
try{
var computed = document.defaultView.getComputedStyle(el, "");
}
catch(e) {
traceError(e);
}
return el.style[property] || computed? computed[property]: null;
};
}
/**
* 获取节点对象的距文档的XY值
* @method getXY
* @param {HTMLElement } el 节点对象
* @return {Array} x,y的数组对象
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @global $getXY
* @exception
* getXY($E("input"));
* $getXY($E("input"));
*/
var getXY = function (el) {
if ((el.parentNode == null || el.offsetParent == null || getStyle(el, "display") == "none") && el != document.body) {
return false;
}
var parentNode = null;
var pos = [];
var box;
var doc = el.ownerDocument;
// IE
box = el.getBoundingClientRect();
var scrollPos = getScrollPos(el.ownerDocument);
return [box.left + scrollPos[1], box.top + scrollPos[0]];
// IE end
parentNode = el.parentNode;
while (parentNode.tagName && !/^body|html$/i.test(parentNode.tagName)) {
if (getStyle(parentNode, "display").search(/^inline|table-row.*$/i)) {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
parentNode = parentNode.parentNode;
}
return pos;
};
if($moz) {
getXY = function (el) {
if ((el.parentNode == null || el.offsetParent == null || getStyle(el, "display") == "none") && el != document.body) {
return false;
}
var parentNode = null;
var pos = [];
var box;
var doc = el.ownerDocument;
// FF
pos = [el.offsetLeft, el.offsetTop];
parentNode = el.offsetParent;
var hasAbs = getStyle(el, "position") == "absolute";
if (parentNode != el) {
while (parentNode) {
pos[0] += parentNode.offsetLeft;
pos[1] += parentNode.offsetTop;
if ($Safari && !hasAbs && getStyle(parentNode,"position") == "absolute" ) {
hasAbs = true;
}
parentNode = parentNode.offsetParent;
}
}
if ($Safari && hasAbs) {
pos[0] -= el.ownerDocument.body.offsetLeft;
pos[1] -= el.ownerDocument.body.offsetTop;
}
parentNode = el.parentNode;
// FF End
while (parentNode.tagName && !/^body|html$/i.test(parentNode.tagName)) {
if (getStyle(parentNode, "display").search(/^inline|table-row.*$/i)) {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
parentNode = parentNode.parentNode;
}
return pos;
};
}
/**
* 获取Event对象
* @method getEvent
* @return {Event} event对象
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @exception
* getEvent();
*/
var getEvent = function () {
return window.event;
};
if($moz) {
getEvent = function () {
var o = arguments.callee.caller;
var e;
var n = 0;
while(o != null && n < 40){
e = o.arguments[0];
if (e && (e.constructor == Event || e.constructor == MouseEvent)) {
return e;
}
n ++;
o = o.caller;
}
return e;
};
}
/**
* 禁止Event事件冒泡
* @method stopEvent
* @author FlashSoft | fangchao@staff.sina.com.cn
* @update 08.02.23
* @exception
* stopEvent();
*/
var stopEvent = function() {
var ev = getEvent();
ev.cancelBubble = true;
ev.returnValue = false;
};
if($moz) {
stopEvent = function() {
var ev = getEvent();
ev.preventDefault();
ev.stopPropagation();
};
}
Function.prototype.bind3 = function(object, args) {
args = args == null? []: args;
var __method = this;
return function() {
__method.apply(object, args);
}
};
/**
* 在指定节点上绑定相应的事件
* @method addEvent2
* @param {String} elm 需要绑定的节点id
* @param {Function} func 事件发生时相应的函数
* @param {String} evType 事件的类型如:click, mouseover
* @update 08.02.23
* @author Stan | chaoliang@staff.sina.com.cn
* FlashSoft | fangchao@staff.sina.com.cn
* @example
* //鼠标点击testEle则alert "clicked"
* $addEvent2("testEle",function () {
* alert("clicked")
* },'click');
*/
function addEvent2 (elm, func, evType, useCapture) {
var elm = $E(elm);
if(typeof useCapture == 'undefined') useCapture = false;
if(typeof evType == 'undefined') evType = 'click';
if (elm.addEventListener) {
elm.addEventListener(evType, func, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, func);
return true;
}
else {
elm['on' + evType] = func;
}
};
/**
初始化的一些变量
@author FlashSoft | fangchao@staff.sina.com.cn
*/
var _inputNode;
var _rndID = parseInt(Math.random() * 100);
/** 当前显示的菜单集合 */
var _showMenuItems = [];
/** 当前显示的菜单索引 */
var _selectMenuIndex = -1;
/** 被选中行的文字 */
var _selectMenuText = "";
var _viewWindow = window;
var passcardOBJ = {
// 鼠标经过背景颜色
overfcolor: "#999",
// 鼠标经过背景颜色
overbgcolor: "#e8f4fc",
// 鼠标离开字体颜色
outfcolor: "#000000",
// 鼠标离开背景颜色
outbgcolor: "",
menuStatus: {
// 是否显示Sina邮箱
"sina.com": true,
// 是否显示VIP邮箱
"vip.sina.com": true,
// 是否显示2008
"2008.sina.com": true,
// 是否显示263
"263.sina.com": true
}
}
/**
* 动态生成提示框
* add by xs @ 2008-3-4
*/
passcardOBJ.createNode = function(){
var d = _viewWindow.document;
var div = d.createElement('div');
div.innerHTML = '<ul class="passCard" id="sinaNote" style="display:none;"></ul>'
d.body.appendChild(div);
}
/**
快捷键选择菜单
@author FlashSoft | fangchao@staff.sina.com.cn
*/
passcardOBJ.arrowKey = function (keyCodeNum) {
if(keyCodeNum == 38) {// --
if(_selectMenuIndex <= 0)_selectMenuIndex = _showMenuItems.length;
_selectMenuIndex --;
passcardOBJ.selectLi(_selectMenuIndex);
}
if(keyCodeNum == 40) {// ++
if(_selectMenuIndex >= _showMenuItems.length - 1)_selectMenuIndex = -1;
_selectMenuIndex ++;
passcardOBJ.selectLi(_selectMenuIndex);
}
};
passcardOBJ.showList = function(e)//显示列表
{
_selectMenuText = "";
var keyCodeNum = getEvent().keyCode;
if(keyCodeNum == 38 || keyCodeNum == 40) {
passcardOBJ.arrowKey(keyCodeNum);
return false;
}
if (!$E('sinaNote'))
passcardOBJ.createNode();
var username = $E(e).value;
var menuList = {
};
var atIndex = username.indexOf("@");
var InputCase = "";
var InputStr = "";
if(atIndex > -1) {
InputCase = username.substr(atIndex + 1);
InputStr = username.substr(0, atIndex);
}
_showMenuItems = [];
_selectMenuIndex = 0;
_showMenuItems[_showMenuItems.length] = "sinaNote_MenuItem_Title_" + _rndID;
for(var key in this.menuStatus) {
this.menuStatus[key] = true;
if(InputCase != "" && InputCase != key.substr(0, InputCase.length)) {
this.menuStatus[key] = false;
}
else {
_showMenuItems[_showMenuItems.length] = "sinaNote_MenuItem_" + key + "_" + _rndID;
}
}
var listcontent = '<li class="note">请选择登录类型</li>';
listcontent += '<li id="sinaNote_MenuItem_Title_'+_rndID+'">' + username + '</li>';
var itemLabel;
for(var key in this.menuStatus) {
if(this.menuStatus[key] == true) {
if(InputStr == "") {
itemLabel = username + "@" + key;
}
else {
itemLabel = InputStr + "@" + key;
}
listcontent += '<li id="sinaNote_MenuItem_' + key + '_' + _rndID + '" title="'+itemLabel+'">' + itemLabel + '</li>';
}
}
$E("sinaNote").innerHTML = listcontent;
for (var i = 0; i < username.length; i++) {
if (username.charCodeAt(i) < 0xA0) {
$E("sinaNote").style.display = "";
this.selectList(e);
}
else {
this.hideList();
}
}
/**
* 自动适应文本框的位置，及宽度
* add by xs @ 2008-3-3
*/
var el = $E(e);
var note = $E("sinaNote");
/**
Iframe在父窗体的位置
@author FlashSoft | fangchao@staff.sina.com.cn
*/
var frameLeft = 0;
var frameTop = 0;
var framePos;
if(_viewWindow != window) {
framePos = getXY(window.frameElement)
frameLeft = framePos[0];
frameTop = framePos[1];
}
var inputWidth = el.offsetWidth;
if(inputWidth < 200) {
inputWidth = 200;
}
note.style.width = inputWidth - 2 + 'px';
var inputXY = getXY(el);
note.style.left = (inputXY[0] - ($IE ? 2 : -1) + frameLeft) + 'px';
note.style.top = (inputXY[1] + el.offsetHeight - ($IE ? 2 : -1) + frameTop) + 'px';
}
passcardOBJ.selectList = function(e)//选择列表
{
var unames = $E("sinaNote").getElementsByTagName("li");
for (var i = 1; i < unames.length; i++) {
unames[1].style.backgroundColor = passcardOBJ.overbgcolor;
unames[1].style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
unames[i].onmousedown = function(){
$E(e).value = this.innerHTML;
stopEvent();
}
unames[i].onmouseover = function(){
if (i != 1) {
unames[1].style.backgroundColor = passcardOBJ.outbgcolor;
unames[1].style.color = passcardOBJ.overfcolor;//鼠标经过字体颜色
}
this.style.backgroundColor = passcardOBJ.overbgcolor;//鼠标经过背景颜色
this.style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
}
unames[i].onmouseout = function(){
this.style.backgroundColor = passcardOBJ.outbgcolor;//鼠标离开背景颜色
this.style.color = passcardOBJ.overfcolor;//鼠标离开字体颜色
unames[1].style.backgroundColor = passcardOBJ.overbgcolor;//鼠标经过背景颜色
unames[1].style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
}
}
}
/**
选中指定ID的li
@author | fangchao@staff.sina.com.cn
*/
passcardOBJ.selectLi = function (nIndex) {
var menuNode;
$E("sinaNote_MenuItem_Title_"+_rndID).style.backgroundColor = passcardOBJ.outbgcolor;//鼠标离开背景颜色
$E("sinaNote_MenuItem_Title_"+_rndID).style.color = passcardOBJ.overfcolor;//鼠标离开字体颜色
for(var i = 0; i < _showMenuItems.length; i ++ ) {
menuNode = $E(_showMenuItems[i]);
menuNode.style.backgroundColor = passcardOBJ.outbgcolor;//鼠标离开背景颜色
menuNode.style.color = passcardOBJ.overfcolor;//鼠标离开字体颜色
}
$E(_showMenuItems[nIndex]).style.backgroundColor = passcardOBJ.overbgcolor;//鼠标经过背景颜色
$E(_showMenuItems[nIndex]).style.color = passcardOBJ.outfcolor;//鼠标经过字体颜色
_selectMenuText = $E(_showMenuItems[nIndex]).innerHTML;
}
passcardOBJ.hideList = function()//隐藏列表
{
/**
* 如果没有找到页面中相应的对象，则自动创建
* add by xs @ 2008-3-3
*/
if (!$E('sinaNote'))
passcardOBJ.createNode();
$E("sinaNote").style.display = "none";
}
passcardOBJ.init = function (oNode, oColors, oFocusNode, oWindowTarget) {
for(var key in oColors) {
this[key] = oColors[key];
}
addEvent2(document, passcardOBJ.hideList, "click");
addEvent2(oNode, passcardOBJ.hideList, "blur");
addEvent2(oNode, passcardOBJ.showList.bind3(this, [oNode]), "keyup");
addEvent2(oNode, function (e) {
var keyCodeNum = getEvent().keyCode;
if(keyCodeNum == 13 || keyCodeNum == 9) {
if(_selectMenuText != "") {
oNode.value = _selectMenuText;
}
if(oFocusNode != null) oFocusNode.focus();
stopEvent();
}
}, "keydown");
if(oWindowTarget) _viewWindow = oWindowTarget;
}
window.passcardOBJ = passcardOBJ;
})();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- UITextField 实现下拉显示自动补全列表
- angular2中自动显示下拉列表在火狐浏览器中闪烁的解决方法
- servlet实现自动登录，并显示保存的用户信息
- 仿163填写邮件地址自动显示下拉（无优化版）
- 仿163填写邮件地址自动显示下拉
- Flex中如何实现类似像QQ登录框中那种“记住密码”、“自动登录”功能，还有如何实现文本框中记录最后一次输入的值？
- 表单中的文本框(input)禁止自动完成下拉框显示（兼容ie/firefox/ff）
- python模拟登录新浪微博自动获得调用新浪api所需的code
- 新浪UC端自动登录小工具和分析UC端登录
- 华为交换机在Telnet登录下自动显示接口信息
- 【转】登录后自动显示未读快件
- 类似csdn的2周内自动登录实现
- LUbuntu16.10安装及自动使用root登录(Ubuntu类似)
- 实现手机扫描二维码页面登录，类似web微信-第二篇，关于二维码的自动生成
- android自定义Spinner下拉菜单和AutoCompleteTextView自动显示的(下拉列表框)样式
- js把预定义的html字符串转换为 HTML 实体 htmlspecialchars 输出html实体内容包括标签，而不自动转义标签，只显示内容，类似php的htmlspecialchars
- 控件设计：自动下拉的 ComboBox（类似 IE 地址栏）
- 让Windows 7自动显示详细登录时间
- 仿163填写邮件地址自动显示下拉
- 根据传入值，自动显示标签 select 下拉选项