js ol.ui.dropdown

<!-- lang: js -->
/**
 * 生成个性化的下拉菜单，配合css可以做出不同的效果。
 * 1.方法摘要:
 * (1)dropdown(selector:String,options:Object) 为指定的元素生成下拉菜单
 * (2)bind(selector:String,action:String,fun:Function) 在弹出菜单中绑定动作
 * (3)show() 打开菜单
 * (4)hide() 隐藏菜单
 * 2.参数设置:
 * (1)event: 
 * [type:String 默认值:"hover" 是否必填:可选]
 * 指定要生成下拉菜单的元素的响应事件，目前支持两种事件：
    hover：鼠标悬浮打开菜单 
    click：点击打开打开菜单
 * (2)menu: 
 * [type:String 默认值:紧邻selector的下一个节点 是否必填:可选]
 * 子菜单jQuery选择表达式，默认为紧邻selector的对象
 * 3.使用说明:
 * (1)为需要生成下拉菜单的元素，添加html代码，用于构建下来菜单的内容，可以是一个包含任何内容的div，例如下面的a标签当作下拉菜单，a后的div就是下拉菜单的内容
 * <a href ="javascript:;" class="dropdown">其实我是一个下拉菜单</a>
   <div class="dropdown center">
   <a href="javascript:;" onclick="ol.Search.Position.Apply.Add();" class="apply_direct active">直接应聘</a>
   <a href="javascript:;" onclick="ol.Search.Position.Apply.Add();" class="apply_withletter">附求职信应聘</a>
 * </div>
 * 注意下拉菜单的内容必须放在下拉元素的后面，并且是同级
 * (2)根据需要定义下拉菜单及其内容的样式，例如：
 * div.dropdown{position:absolute; top:0px; display:none; white-space: nowrap; z-index:220;}
 * div.dropdown a{color:#000; display:block; text-align:left;line-height:25px; height:25px; text-decoration:none;font-weight:normal;}
 * div.dropdown a:hover{text-decoration:none;}
 * (3)调用js代码
 * new ol.ui.dropdown(jQuery("a.dropdown"),{event:"click"});
 */
(function(){

    var _default={
        event:"hover",//[hover、click]
        menu:null//菜单selector
    };
    /*
     * options:
     * {
     * event:"hover"/"click"
     * menu:
     * }
     * 
     */
    cv.ui.dropdown=function(selector,options)
    {
        var self=this;
        self.hideTimer=null;//定时器
        self._objItem;//操作对象
        self._menuItem;//下拉的菜单
        self._onMenu=false;
        self._events={};//事件
        self._isShow=false;
        //隐藏菜单
        self._hideMenu=function()
        {
            self.hideTimer=setTimeout(self.hide, 100);
        }
        //初始化
        self.init=function(){
            var $=jQuery;
            options  = $.extend({},_default, options);
            /*
             * options中有event 事件支持hover和click
             */
            if(options.event=="hover")options.event="mouseover";
            else options.event="click";

            self._objItem=$(selector);
            /*
             * options中有menu 如果有menu 取menu,如果没有取近邻的
             */
            self._menuItem=options.menu?$(options.menu):self._objItem.next();

            self._objItem.unbind(options.event).bind(options.event,function(v){
                clearTimeout(self.hideTimer);//清除定时器
                self.show();
            });

            self._menuItem.find(".dropdown_item").bind("click",function(){
                setTimeout(self.hide);
            });
        }
        self.bind=function(selector,action,fun){
            self._menuItem.find(selector).bind(action,fun);
        }
        /*
         * 如果是显示的话  添加样式 hover
         * 
         */
        self.show=function(){
            switch(options.event)
            {
                case "mouseover":
                    self._objItem.unbind("mouseout").bind("mouseout",function(v){
                        self._hideMenu();
                        self._objItem.addClass("hover");
                    });
                    self._menuItem.unbind("mouseover").bind("mouseover",function(){
                        clearTimeout(self.hideTimer);
                        self._menuItem.css("display","block");
                    }).unbind("mouseout").bind("mouseout",function(){
                        self._hideMenu();
                    });
                    break;
                case "click":
                    if(self._isShow){
                        self.hide();
                        return;
                    }else   {
                        self._events["menu_click"]=function(){
                            self._onMenu=true;
                        };
                        self._events["document_click"]=function(event){
                            if (event.button!=0) return true;
                            if(self._onMenu===false)
                            {
                                self.hide();
                            }
                            self._onMenu=false;
                        };
                        setTimeout(function(){
                            self._menuItem.bind("click",self._events["menu_click"]);
                            jQuery(document).bind("click",self._events["document_click"]);
                        },1);
                    }
                    break;
            }//switch end
            self._objItem.addClass("hover");
            self._menuItem.css("display","block");
            self._isShow=true;
        }
        /*
         * 隐藏的时候 selecter去掉hover样式
         * 弹出的时候 selecter加上hover样式
         */

        self.hide=function(){
            if(self._events["document_click"])jQuery(document).unbind("click",self._events["document_click"]);
            if(self._events["menu_click"])self._menuItem.unbind("click",self._events["menu_click"]);
            self._objItem.removeClass("hover");
            self._menuItem.hide();
            self._isShow=false;
            self._onMenu=false;
        }
        this.init();
    };
})();