下拉框插件开发（一）

前面几天再看设计模式，把自己看迷糊了，遂决定动手做一个东西出来，然后在项目实践中发现下拉框是个很实用的东西，以前一直想学一个封装好的函数，但一直都晾在那，恰好就拿这个练手，如果有什么不对的地方，希望和大家一起改进。

下面是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;
                    };
                }
            })()
        }
    }

今天主要是对事件进行了兼容处理，还有页面布局，明天我们会根据性需求对其进行下一步要开发。

下拉框插件开发 （一）

下拉框插件开发（一）