JS实现点击文本框弹出DIV层

ghyghoo8

浏览: 192784 次
性别:
来自: 杭州

最近访客更多访客>>

深水蓝

痞夫balabala

BIUBIUBlU

kingkwj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS J#

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>new page</title>
<script type="text/javascript" language="javascript">
function crertdiv(_parent,_element,_id,_css){//创建层
                var newObj = document.createElement(_element);
                if(_id && _id!="")newObj.id=_id;
                if(_css && _css!=""){
                        newObj.setAttribute("style",_css);
                        newObj.style.cssText = _css;
                }
                if(_parent && _parent!=""){
                        var theObj=getobj(_parent);
                        var parent = theObj.parentNode;
                        if(parent.lastChild == theObj){
                                theObj.appendChild(newObj);
                        } 
                        else{
                                theObj.insertBefore(newObj, theObj.nextSibling);
                        }
                }
                else        document.body.appendChild(newObj);
}
function getobj(o){//获取对象
                return document.getElementById(o)
}
var swtemp=0,objtemp;
function showdiv(inputid,inputlist){//显示层
        if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}
        var text_list=inputlist.split(",")
                if (!getobj(inputid+"mydiv")){//若尚未创建就建之
                        var divcss="font-size:12px;color:#00f;position:absolute;left:"+(getobj(inputid).offsetLeft+0)+"px;top:"+(getobj(inputid).offsetTop+25)+"px;border:1px solid red"
                        crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"
                        //alert(document.getElementById("mydiv").outerHTML)
                        crertdiv(inputid+"mydiv","ul",inputid+"myul");//创建ul        
                        for (var i=0,j=text_list.length;i<j;i++){//创建"text_list"li
                                crertdiv(inputid+"myul","li",inputid+"li"+i,"background:#fff");
                                getobj(inputid+"li"+i).innerHTML=text_list;
                        }
                        crertdiv(inputid+"myul","li",inputid+"li"+j,"color:#f00;background:#fff");//创建"clear"li
                        getobj(inputid+"li"+j).innerHTML="clear";
                        getobj(inputid+"mydiv").innerHTML +="<style type='text/css'>#"+inputid+"mydiv ul {padding:0px;margin:0;}#"+inputid+"mydiv ul li{list-style-type:none;padding:5px;margin:0;float:left;CURSOR: pointer;}</style>"
                        for (var i=0;i<=j;i++){
                                        getobj(inputid+"li"+i).onmouseover=function(){this.style.background="#eee";clearTimeout(timer)}
                                        getobj(inputid+"li"+i).onmouseout=function(){this.style.background="#fff"}
                        }
                }
                var newdiv=getobj(inputid+"mydiv")
                newdiv.onclick=function(){hiddiv(event,inputid);}
                newdiv.onmouseout=function(){Mout(this)}
                newdiv.onmouseover=function(){clearTimeout(timer)}
                getobj(inputid).onmouseout=function(){Mout(newdiv)}
                newdiv.style.display="block";
                swtemp=1;
                objtemp=inputid;
}
var timer
function Mout(o){
timer=setTimeout(function(){o.style.display="none";},300)
                swtemp=0;
}
function hiddiv(e,inputid){
    e=e||window.event;
    ev=e.target||e.srcElement;
    v=ev.innerText||ev.textContent;
    if (v!="clear")getobj(inputid).value=v;else getobj(inputid).value=""
                getobj(inputid+"mydiv").style.display="none";
}
</script>
</head>
<body>
<br>
<br>
<br>
<br>
....利用定义标签赋值....（onclick）....<input id="mytext" type="text"onclick="showdiv(this.id,this.list)" list="文本框,弹出层,值赋"/>
<br>
<br>
<script>
var list="文本框2,弹出层2,值赋2,文本框2-1,弹出层2-1,值赋2-1"
</script>
....利用定义JS变量赋值...（onclick）....<input id="mytext2" type="text" onClick="showdiv(this.id,list)"/>
<input type="hidden" value="点击,弹出,显示,消失,实现" id="list">
....利用隐藏域值赋值....（onmouseover）.....<input id="mytext3" type="text" onMouseOver="showdiv(this.id,getobj('list').value)"/>
</body>
</html>

分享到：

持久化与持久层 | 调用父窗口的方法

2009-10-12 15:40
浏览 8733
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现点击文本框弹出DIV层

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现点击文本框弹出DIV层

评论

发表评论

相关推荐

Titanium开发遇到的一个‘isn't already in the context’ 错误

一个页面的倒计时代码

初学异步编程

IE的for循环bug

一个轮播滚动的js

javascript的继承

【转】jquery中的数组过滤筛选-$.grep()

能拖动，能调整大小的jqDnR

facebox的一点小bug

jquery源码

关于thickbox的一些问题解决

自用省市级联及定位

自用jquery的div定位

[转]深入理解Javascript闭包

jQuery对象与dom对象的转换

JSON定义

js 的 继承

email校验

href="#"与href="javascript:void(0)"的区别

调用父窗口的方法

最近访客更多访客>>

js 的继承