模拟select
来源:互联网 发布:左程云 算法 编辑:程序博客网 时间:2024/05/16 18:29
只能说是看上去简单 实现起来非常的不容易。。
写的不好 细节太多 没有较好的基本功很难完善好。。 所以模拟的并不好
- <style type="text/css">
.kuang{height:18px; width:80px; border:1px solid #96ADE1}
.input{border:0px; height:16px; width:50px; margin-top:2px; vertical-align:middle; float:left; cursor: pointer;}
.img{float:right;margin-top:1px;cursor: pointer;}
.xia{ border:1px solid #96ADE1; border-top:0px; height:auto; position:absolute}
.xiang{ height:22px; line-height:22px; vertical-align:middle; font-size:12px; padding-left:3px;cursor: pointer;}
</style>
<body><div id="ss" style=" width:200px; float:left"></div ><div id="dd" style=" width:300px; float:left"></div></body>
<script> - var data=["张三","李四","王老五","赵六","孙其","周八","大白痴"]
var element = new Array() - document.onclick=function(){
if(element != "")
{document.body.removeChild(element);element=""}}
function select(id,data,func){
this.id =id //父元素id
this.data=data //数据源
this.func =func //不知道是做什么用的
this.input="" //记录那个破input元素
this.div="" //记录哪个div被选中
} - select.prototype.create =function(){
var self =this
var div =document.createElement("div")
div.className="kuang"
var input =document.createElement("input")
input.className="input"
input.value=self.data[0]
input.jilu=0
input.onblur=function(){self.data[input.jilu]=input.value;if(element!=""){element.getElementsByTagName("div")[input.jilu].innerHTML=input.value}}
self.input=input
input.onclick=function(event){self.createlist(event,this.parentNode)}
var img =document.createElement("img")
img.src="http://album.hi.csdn.net/app_uploads/wtcsy/20081204/225637264.p.gif"
img.className="img"
img.onclick=function(event){self.createlist(event,this.parentNode)}
div.appendChild(input)
div.appendChild(img)
document.getElementById(this.id).appendChild(div)
} - select.prototype.createlist=function(e,obj){
var self =this
e=e||event
e.cancelBubble=true
if(element!="") {document.body.removeChild(element);element=""}
self.isopen=true
var div =document.createElement("div")
div.className="xia"
element=div
if(document.all)
{div.style.width=obj.offsetWidth}
else
{div.style.width=obj.offsetWidth-2}
var left=obj.offsetLeft;
var top =obj.offsetTop;
var height =obj.offsetHeight
while(obj=obj.offsetParent){
left=left+ obj.offsetLeft;
top=top+obj.offsetTop;}
div.style.left=left
div.style.top=top+height
document.body.appendChild(div)
for(var i=0;i<self.data.length;i++)
{var div1 =document.createElement("div")
if(document.all)
{div1.style.width="100%"}
else
{div1.style.width="100%"-3}
if(self.data[i]==self.input.value)
{div1.style.backgroundColor="3B97D3"}
div1.className="xiang"
div1.onmousemove=function(){this.style.backgroundColor="3B97D3"}
div1.onmouseout=function(){this.style.backgroundColor=""};
(function(div1,i){div1.onclick=function(){self.change(div1,i)}})(div1,i)
div1.innerHTML=self.data[i]
div.appendChild(div1)}}
select.prototype.change=function(obj,num){
this.input.value=obj.innerHTML
document.getElementById(this.id).getElementsByTagName("input")[0].jilu=num}
var oo =new select("ss",data,"s")
oo.create()
var hh =new select("dd",data,"s")
hh.create()
</script>
- 模拟select
- 模拟 SELECT
- 如何模拟select控件
- DIV模拟select
- JS 模拟 select
- select鼠标模拟点击
- Div 模拟 Select Demo
- js 模拟select
- jQuery 模拟select
- jquery模拟SELECT框
- div 模拟select
- jquery模拟select
- html select模拟readonly
- jquery-模拟打开select
- 模拟实现select服务器
- 模拟select控件
- div 模拟select
- 模拟select移动(左边不为select,右边为select)
- SIP 应用会话 (SipApplicationSession)
- 在.NET框架应用程序中发送电子邮件
- Embedded Software
- 欧盟通过针对中国产品征惩罚性关税提案
- 无法播放网上flash的解救方法
- 模拟select
- Symbian OS Communications Programming
- Microsoft ® Office 2007 Business Intelligence
- Pro SQL Server 2005 High Availability
- 获取屏幕分辨率
- 字符编码:Unicode/UTF-8/UTF-16/UCS/Endian/BMP/BOM
- 如何获取当前程序文件的路径 Current Path
- Microsoft Exchange Server 2007: A Beginner's Guide
- 很好的地方:toplanguage