soncy的七分责任田，种点瓜果蔬菜和杂草

赞助商广告

文章归档

最近文章

分类目录

功能

javascript+css模拟下拉框(更新)

发表于 2010年03月13日 soncy 1,489次阅读

前面写了一个javascript+css模拟下拉框，但是代码太难看了，所以重写了一下代码：

  1. Function.prototype.method = function(name,func){
  2.     if(!this.prototype[name]){
  3.         this.prototype[name] = func;
  4.     }
  5. };
  6.  
  7.  
  8. function CsSelect(_data,_element){
  9.     this._element = _element;
  10.     if(typeof _element == "string"){
  11.         this._element = document.getElementById(_element);
  12.     }
  13.     this._value = "";
  14.     this.data = _data;
  15.              this.change = function(){};//下拉框选取值更改，外部重定义
  16.     this._closeEventStatus = false;
  17.     this._selectEventStatus = false;
  18.     this._create();
  19. }
  20.  
  21. //创建下拉框DOM
  22. CsSelect.method("_create",function(){
  23.     var self = this;
  24.     if(typeof this.data == "undefined" || this.data.length < 1) return;
  25.     var _htmlArr = [];
  26.  
  27.     this._CsSelect = document.createElement("div");
  28.     this._CsSelect.className = "csSelect";
  29.  
  30.     this._CsStitle = document.createElement("div");
  31.     this._CsStitle.className = "csStitle";
  32.  
  33.     this._CsStitle.innerHTML = this.data[0][1];
  34.     this._element.value = this.data[0][0];
  35.  
  36.     this._CsSelect.appendChild(this._CsStitle);
  37.     this._CsSlist = document.createElement("ul");
  38.     this._CsSlist.className = "csSlist";
  39.  
  40.     for(var i =0;i < self.data.length;i++){
  41.         var _tempData = self.data[i];
  42.         var _optValue = _tempData[0];//获取value值
  43.         var _optText = _tempData[1];//获取text值
  44.         _htmlArr.push('<li><a href="#" value="');
  45.         _htmlArr.push(_optValue);
  46.         _htmlArr.push('">');
  47.         _htmlArr.push(_optText);
  48.         _htmlArr.push('</a></li>');
  49.     }
  50.  
  51.     this._CsSlist.innerHTML = _htmlArr.join("");
  52.     this._CsSelect.appendChild(this._CsSlist);
  53.  
  54.     this._element.style.display = "none";
  55.     this._insertAfter(this._CsSelect,this._element);
  56.  
  57.  
  58.     //事件注册
  59.     self._CsStitle.onclick = this._selfClick();
  60.    
  61. });
  62.  
  63.  
  64. //点击展开和收起
  65. CsSelect.method("_selfClick",function(){
  66.     var self = this;
  67.     return function(){
  68.         var _CsSlist = self._CsSlist;
  69.  
  70.         var _Clist = document.getElementsByTagName("ul");
  71.  
  72.         for(var i = 0;i < _Clist.length;i++){
  73.             if(_Clist[i].className.indexOf("csSlist") > -1 && _Clist[i] != self._CsSlist){
  74.                 _Clist[i].style.display = "none";
  75.             }
  76.         }
  77.  
  78.         if(_CsSlist.style.display != "block"){
  79.             _CsSlist.style.visibility = "hidden";
  80.             _CsSlist.style.display = "block";
  81.  
  82.             if(_CsSlist.offsetHeight > 200){
  83.                 _CsSlist.style.height = "200px";
  84.             }
  85.  
  86.             _CsSlist.style.visibility = "inherit";
  87.         }else{
  88.             _CsSlist.style.display = "none";
  89.             _CsSlist.style.height = "auto";
  90.         }
  91.  
  92.          self._select();
  93.          self._closeEvent();
  94.     }
  95. });
  96.  
  97.  
  98. //选择下拉框内容
  99. CsSelect.method("_select",function(){
  100.     if(this._selectEventStatus) return;
  101.     var self = this;
  102.     var _csList = this._CsSlist.getElementsByTagName("a");
  103.     for(var i = 0;i < _csList.length;i ++){
  104.         _csList[i].onclick = function(event){
  105.             var ev = event || window.event;
  106.             var el = ev.srcElement || ev.target;
  107.             self._CsStitle.innerHTML = el.innerHTML;
  108.             self._element.value = el.getAttribute("value");
  109.             self._CsSlist.style.display = "none";
  110.             self.change();
  111.             return false;
  112.         }
  113.     }
  114.     this._selectEventStatus = true;
  115. });
  116.  
  117.  
  118.  
  119.  
  120. CsSelect.method("_insertAfter",function(newElement,targetElement){
  121.     var parent = targetElement.parentNode;
  122.     if(parent.lastChild == targetElement){
  123.         parent.appendChild(newElement);
  124.     }else{
  125.         parent.insertBefore(newElement,targetElement.nextSibling);
  126.     }
  127. });
  128.  
  129.  
  130. //隐藏组件
  131. CsSelect.method("hide",function(){
  132.     this._CsSelect.style.display = "none";
  133. });
  134.  
  135. //显示组件
  136. CsSelect.method("show",function(){
  137.     this._CsSelect.style.display = "block";
  138. });
  139.  
  140.  
  141. //设置下拉框默认显示项
  142. CsSelect.method("setValue",function(value){
  143.     var _idx = 0;
  144.     for(var i = 0;i < this.data.length;i++){
  145.         if(this.data[i].join("").indexOf(value) > -1){
  146.             _idx = i;
  147.         }
  148.     }
  149.     this._CsStitle.innerHTML = this.data[_idx][1];
  150.     this._element.value = this.data[_idx][0];
  151. });
  152.  
  153.  
  154. //获取下拉框当前值
  155. CsSelect.method("getValue",function(){
  156.     return this._element.value;
  157. });
  158.  
  159. //点击除下拉框的其他地方，收起下拉框
  160. CsSelect.method("_closeEvent",function(){
  161.  
  162.     if(this._closeEventStatus) return;
  163.  
  164.     if(window.addEventListener){ 
  165.         document.addEventListener("click" , function(event){
  166.             var ev = event || window.event;
  167.             var el = ev.srcElement || ev.target;
  168.             if(el.className == "csStitle") return;
  169.             var _Clist = document.getElementsByTagName("ul");
  170.             for(var i = 0;i < _Clist.length;i++){
  171.                 if(_Clist[i].className.indexOf("csSlist") > -1){
  172.                     _Clist[i].style.display = "none";
  173.                 }
  174.             }
  175.         },false);
  176.     }else{
  177.         document.attachEvent("onclick" , function(event){
  178.             var ev = event || window.event;
  179.             var el = ev.srcElement || ev.target;
  180.             if(el.className == "csStitle") return;
  181.             var _Clist = document.getElementsByTagName("ul");
  182.             for(var i = 0;i < _Clist.length;i++){
  183.                 if(_Clist[i].className.indexOf("csSlist") > -1){
  184.                     _Clist[i].style.display = "none";
  185.                 }
  186.             }
  187.         });
  188.     }
  189.  
  190.     this._closeEventStatus = true;
  191. });
javascript , , 1 条评论

感谢您的浏览，如果您喜欢本站，可以通过Rss订阅本站,如需转载，请注明出处,谢谢!

1条评论 RSS 图标

GEZ鸽子 发表于2010年03月13日21:18

坐个沙发！

[回复]

发表评论

emoticons
;-):|:x:twisted::smile::shock::sad::roll::razz::oops::o:mrgreen::lol::idea::grin::evil::cry::cool::arrow::???::?::!:
点击图标添加表情

©2010-2011 soncy. All rights reserved. 转载请注明出处和具体链接. Powered by WordPress.

本站所有原创文章皆采用“署名-非商业性使用-相同方式共享 2.5 中国大陆”的创作共用协议。 Theme by Soncy