前面几天再看设计模式，把自己看迷糊了，遂决定动手做一个东西出来，然后在项目实践中发现下拉框是个很实用的东西，以前一直想学一个封装好的函数，但一直都晾在那，恰好就拿这个练手，如果有什么不对的地方，希望和大家一起改进。
下面是github上的地址：https://github.com/mapletao/downdrop
1.结合项目经验，先对本次将要做的事进行一个简单的需求分析以及今天的任务
制定了需要的需求咱们就开始着手做吧。
2，项目创建及结构
首先创建一个index页面，加入需要用到的js以及初始化css，还有需要下拉框样式css，结构入下图
3，html页面内容
在html中我们需要将我们用到的文件导入，以及对下拉框样式的布置
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>下拉框</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/downdrop.css" /> </head> <body> <div style="200px;margin-left: 20px;margin-top:10px;"> <div class="downdrop"> <div class="downdrop-header">请选择</div> <i class="angle"></i> <ul class="downdrop-con"> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> <li data-val="1">选项一</li> </ul> </div> </div> <script src="js/downdrop.js"></script> <script type="text/javascript"> Downdrop(); </script> </body> </html>
４，ＣＳＳ代码内容
根据需求对html内容的渲染了，不多说上代码
.downdrop{ line-height: 30px; position: relative; width: 100%; height: 30px; cursor: pointer; } .downdrop .downdrop-header{ text-indent: .5em; border: 1px solid #ccc; color: #4A4747; } .downdrop .angle{ position: absolute; right: 10px; top: 12px; border-top: 6px solid #504C4C; border-left: 6px solid transparent; border-right: 6px solid transparent; } .downdrop .downdrop-con{ position: relative; left: 0; z-index: 10; top: -1px; width: 100%; max-height: 300px; overflow: auto; border: 1px solid #ccc; border-top: none; } .downdrop-con >li{ border-top: 1px solid #ccc; text-indent: .5em; color: #4A4747; } .downdrop-con >li:hover{ background: #655F5F; color: #fff; }
５，监听绑定事件及优化处理
页面结构已经构造完成，接下来就是写ｊｓ，这也是本次提议的重点。先用外观模式将事件绑定的兼容做好，先创建一个单例对象，相当于自己的小型代码库，以后可以将自己写的代码都封装在这个里面，然后为事件建立一个库，这个库中专门用来处理事件的。二话不说上代码。
var mapletao={ eventUtil:{ //处理iethis指向问题 bindfn:function(fn,ele){ return function(){ return fn.call(ele); } }, //绑定事件 bindEvent:(function(dom,type,fn){ if(window.addEventListener){ return function(dom,type,fn){ dom.addEventListener(type,fn,false) }; }else if(window.attachEvent){ var self=this; return function(dom,type,fn){ fn=self.bindfn(fn,ele); dom.attachEvent('on'+type,fn); }; }else{ return function(dom,type,fn){ dom["on"+type]=fn; }; } })(), // 阻止冒泡 stopPropagation:function(e){ var self=this; if(window.event){ self.stopPropagation=function(e){ window.event.cancelBubble = true; } }else{ self.stopPropagation=function(e){ e.stopPropagation(); } } self.stopPropagation(); }, //阻止默认行为 preventDefault:function(){ var self=this; if(window.event){ self.preventDefault=function(e){ window.event.returnValue = false } }else{ self.preventDefault=function(e){ e.preventDefault(); } } self.preventDefault(); }, //解除事件 removeBind:(function(ele, type, fn) { if (window.removeEventListerner) { // 标准浏览器 return function(dom,type,fn){ ele.removeEventListerner(type, fn, false); }; } else if (window.detachEvent) { // IE浏览器 return function(dom,type,fn){ ele.detachEvent("on" + type, fn); }; } else{ return function(dom,type,fn){ ele["on"+type]=null; }; } })() } }
今天主要是对事件进行了兼容处理，还有页面布局，明天我们会根据性需求对其进行下一步要开发。