一个月前在上一家公司的时候,由于公司内要在9223上做推广,制作一个机票出发城市与到达城市的下拉框放在9223上。
正好当时业余学习时买了本python cookbook,书的前边一部分大量用到了闭包操作(以前js闭包这块是我自己的弱项),看后深有启发,决定结合js在工作中实践一下,如此就有了下边的这段代码。
自我感觉写的还算不错。有一点不满意的地方在于弹出下拉框时,框体与文本框的对齐问题解决的不太理想,基本上换个位置就得重新在代码里手动设置个偏移值,一直没有想到什么好的解决方案,不知道各位有什么好的主意。
好了,不多说,贴下代码~
css的代码:
<style type="text/css">
#oyesgo_city_popping { display: none; position: absolute; z-index: 9999; background-color: rgb(255, 255, 255); width: 254px; height: 140px; border: 1px solid rgb(0, 128, 0);}
#oyesgo_city_popping h3 { border-bottom:1px solid #C4D3E6; color:#5E5E5E; font-size:12px; font-weight:normal; line-height:200%; margin:0 auto; width:94%;}
#oyesgo_city_popping ul { margin-top:7px; overflow:hidden;width:300px; padding-left: 0px; margin-top: 0px;}
#oyesgo_city_popping ul li { float:left; line-height:190%; text-align:center; width:17%; list-style-type:none; font-size:10pt;}
.arr_btn_close{ position: absolute; right: 9px; top: 5px; cursor:pointer; }
</style>
html代码:
<div> 出 发:<input name="depcity" autocomplete="off" style="width: 98px;" id="dep" > 到 达:<input name="arrcity" autocomplete="off" style="width: 98px;" id="arr"> </div> <div name="cityframe" id="oyesgo_city_popping" > <h3>热门城市</h3> <ul></ul> <a title="close" id="oyesgo_city_closewin" class="arr_btn_close">x</a> </div> <input style="display:none;" id="oyesgo_hidden_input">
javascript代码:
<script> //城市框点击事件,显示热门城市div function fun(){ var event = this; var eleobj = document.getElementById('oyesgo_city_popping'); //初始化城市列表li var ulobj = eleobj.getElementsByTagName("ul")[0]; ulobj.innerHTML = ''; var lifacObj = lifactory(event); var allcity = { 'depcity':'北京 上海 广州 深圳 杭州 南京 成都 武汉 青岛 大连 重庆 三亚 郑州 宁波 西安 长沙 昆明 沈阳 厦门 哈尔滨'.split(' '),//出发城市 'arrcity':'北京 上海 广州 深圳 杭州 南京 成都 武汉 青岛 大连 重庆 三亚 郑州 宁波 西安 长沙 巴黎 纽约 东京 新加坡'.split(' ') //到达城市 } cityarry=allcity[event.name]; for (var i=0; i<cityarry.length; i++) { var liobj=lifacObj(cityarry[i],eleobj); ulobj.appendChild(liobj); }; //显示城市选择框 //eleobj.style.display='block'; openCitySelectFrame(event); } //li工厂 function lifactory(ele){ //attachEvent var func=function(name,cityframe){ var liobj=document.createElement("li"); liobj.innerHTML='<a style="cursor:pointer;">'+name+'</a>'; var aobj=liobj.getElementsByTagName('a')[0]; appendEventListener.call(aobj,'click',function(){ //城市点击后,将对应城市名称填入框中 ele.value=name; //城市选择框关闭 closeCitySelectFrame(ele); }); return liobj; }; return func; } //增加事件 function appendEventListener(eventtype,func){ if (this.addEventListener) { this.addEventListener(eventtype, func, false); } else if (this.attachEvent) { eventtype='on'+eventtype; this.attachEvent(eventtype, func); } } //关闭城市选择框 function closeCitySelectFrame(){ try { var cityframe = document.getElementById('oyesgo_city_popping'); cityframe.style.display = 'none'; if (!!cityframe.inputeleobj) { cityframe.inputeleobj.focus(); } //从自定义属性中移除文本框 cityframe.inputeleobj = null; }catch(e){} } //开启城市选择框 function openCitySelectFrame(inputele){ if(!inputele){ return; } var cityframe=document.getElementById('oyesgo_city_popping'); //移动框的左边界与input框的边界一致 try { cityframe.style.left = (inputele.offsetLeft) + 'px'; }catch(e){ cityframe.style.left = inputele.posLeft; } cityframe.style.display='block'; //将文本框对象添加到自定义属性 cityframe.inputeleobj=inputele; } //为城市框添加事件 (function(){ var depele=document.getElementById('dep'); var arrele=document.getElementById('arr'); var elearray=[depele,arrele]; var eleobj=document.getElementById('oyesgo_city_popping'); for (var i=0; i<elearray.length; i++) { elearray[i].οnclick=fun; }; //对弹出框中的小叉号添加关闭事件 var closebutton=document.getElementById('oyesgo_city_closewin'); appendEventListener.call(closebutton,'click',function(){ closeCitySelectFrame(); }); //添加doc click事件 appendEventListener.call(document,'click',function(){ var eleobj=document.activeElement; var namefun={'depcity':true, 'arrcity':true,'cityframe':true}; if(!namefun[eleobj.name]){ closeCitySelectFrame(); } }); })(); </script>
全部加起来,代码行数估摸在130~150行左右吧~ 跨浏览器测试正常(Chrome \firefox \ ie6,7,8)
直接下载附件运行就能看到效果~