JavaScript 实现触点式弹出菜单插件

　　之前做项目时经常用到一种触点式弹出菜单或者导航的功能，这个功能的主要应用场景是：web页面中多层分级导航或者子功能目录，但又考虑到页面区域有限，于是就考虑到在鼠标移动到某导航按钮上或者点击时，系统将在该按钮下浮动一个层，展现子导航或者子目录，当用户选择这些子目录/导航时，页面作出相应的操作，这种功能从人机交互和页面布局上都有很好的人性化体验。最近有些闲暇时间，将此功能重新整理并封装，形成一个公共插件，命名为：SelectItem.js，分享如下：

插件的主要实现的功能：

　　1. 功能模块化封装，提供一个对外的初始化接口供应用调用即可，首先需要绑定一个页面触发元素（链接/按钮等），传入元素id；

　　2. 提供子菜单/导航条目的初始化入口，调用方法输入需要初始化的条目数组，以参数方式输入； 

　　3. 提供对外事件接口，如点击子菜单/导航的事件定义等，供调用方自定义事件实现；

　　4. 提供辅助添加功能，如果子菜单是选择信息，而初始化的条目又不符合调用需求，则需提供让给调用方自定义条目的功能，此辅助功能可以根据需要进行屏蔽；

效果图如下：(左侧为带自定义辅助功能的效果，右侧为不带自定义辅助功能的效果)

 

上述效果调用时的代码如下：

AutoDiv("btn", false).InitControl([
                    {
                        key: "12",
                        value: "二个选项(A | B)"
                    },
                    {
                        key: "13",
                        value: "三个选项(A | B | C)"
                    },
                    {
                        key: "14",
                        value: "四个选项(A | B | C | D)"
                    },
                    {
                        key: "15",
                        value: "五个选项(A | B | C | D | E)"
                    },
                    {
                        key: "0",
                        value: "自定义选项类型"
                    }
                ],
                function(value) {
                    //处理选中类型
                    alert(value);
                },
                function() {
                    //打开自定义选项创建窗口
                    alert("new dialog.");
                });
        }

　　可以看出，在页面中引用该js文件，然后对需要触点弹出的页面元素进行插件绑定即可，其中绑定函数AutoDiv("btn", false)有两个参数，第一个参数是需要绑定的页面元素id，第二个参数是个布尔值，需要自定义辅助功能时传递true，否则传递false。绑定好页面元素后，接下来是链式调用过程，函数InitControl有三个参数，第一个参数是需要展现的菜单项，它是一个键值对数组（key为选择项的反馈表示，value为菜单项显示信息）；第二个参数是菜单项选择点击事件的实现，由调用方定义实现，函数有一个参数，即所选菜单项的key值；第三个参数是自定义辅助事件的实现，同样由调用方定义实现。

控件源码如下：

 

/*
 *    write by zhangyu,2013-07-09,v1.0
 *
 *  实现触点式菜单弹出及选择功能
 *
 */

function AutoDiv(id, allowNewFlag) {
    //预留退路
    if (!document.getElementById) return false;
    if (!document.createElement) return false;

    //保存当前上下文
    var me = this;

    me.targetControlID;         //定义当前绑定的id及其对象
    me.targetObj = null;
    me.pupDivObj = null;        //定义弹出浮动层对象
    me.callBackFun = null;      //选中事件
    me.callBackNewFun = null;   //自定义回调事件
    me.isFocusIn = false;       //标记浮动层是不是处于鼠标焦点内
    me.allowNewFlag = false;    //标记是否显示自定义选项类型选项
    me.currentIndex = -1;       //当前选中的结果索引
    me.LastIndex = -1;          //上一条选中的结果索引
    
    me.Result;                  //最后结果‘13’、‘14’、‘15’、‘21’、‘31’

    if (id != null && typeof (id) != undefined && id != "") {
        if (!document.getElementById(id)) return false;
        //赋值类的成员
        me.targetControlID = id;
        me.targetObj = document.getElementById(id);
    }

    if (allowNewFlag != null && typeof (allowNewFlag) != undefined && allowNewFlag != "") {

        me.allowNewFlag = allowNewFlag;
    }

    if (me.pupDivObj == null || typeof (me.pupDivObj) == undefined) {

        me.pupDivObj = document.createElement("div");
        me.pupDivObj.setAttribute("class", "pupDiv");
        //加载新建的div对象到文档中去
        var parent = document.getElementById(me.targetControlID).parentNode;
        if (parent != null && typeof (parent) != undefined) {
            parent.appendChild(me.pupDivObj);
        }
    }
    //浮动层弹出展现事件
    me.pubDiv = function() {
        me.pupDivObj.style.display = "block";
        me.pupDivObj.style.backgroundColor = "#ffffff";
        me.pupDivObj.style.position = "absolute";
        me.pupDivObj.style.top = me.targetObj.getBoundingClientRect().top + 20;
        me.pupDivObj.style.left = me.targetObj.getBoundingClientRect().left;
        me.pupDivObj.style.width = "150";
        //绑定内容
        me.pupDivObj.innerHTML = me.GetContentTable();
        //定义行事件
        var result = me.pupDivObj.getElementsByTagName("td");
        if (result.length > 0) {
            //给每个Td动态绑定事件(新建了一个闭包，用来传递参数，否则所有元素的一下三个鼠标事件的参数i会是相同的值)
            for (var i = 0; i < result.length; i++) {
                var bb = new BiBaoOnMouseResult(i, me);
                AddEvent(result[i], "mouseover", bb.OnMouseOverEx);
                AddEvent(result[i], "mouseout", bb.OnMouseOutEx);
                AddEvent(result[i], "click", bb.OnMouseClickEx);
            }
        }
    }
    //类型选项绑定函数
    me.GetContentTable = function() {
        var DivContent = "<table cellSpacing='0' cellPadding='1' align='center' border='0' id='DivContent_Table'>";
        for (var i = 0; i < me.itemList.length - 1; i++) {
            DivContent += "  <tr ReturnValue='" + me.itemList[i].key + "' name='row'>"
                        + "    <td height='15' nowrap>"
                        + "      <div style='width:" + (me.pupDivObj.offsetWidth - 12) + ";' class='listOption' title='" + me.FliterString(me.itemList[i].value) + "'>" + me.FliterString(me.itemList[i].value) + "<div>"
                        + "    </td>"
                        + "  </tr>";
        }
        //添加自定义选项
        if (me.allowNewFlag) {
            DivContent += "  <tr ReturnValue='" + me.itemList[me.itemList.length - 1].key + "' name='line'>"
                        + "    <td nowrap>"
                        + "      <div style='font-size:1px; border-top:solid 1px #dde0e0; height:3px;'></div>"
                        + "    </td>"
                        + "  </tr>"
                        + "  <tr ReturnValue='" + me.itemList[me.itemList.length - 1].key + "' name='row'>"
                        + "    <td height='15' nowrap>"
                        + "      <div style='width:" + (me.pupDivObj.offsetWidth - 12) + ";' class='listOption' title='" + me.FliterString(me.itemList[me.itemList.length - 1].value) + "'>" + me.FliterString(me.itemList[me.itemList.length - 1].value) + "<div>"
                        + "    </td>"
                        + "  </tr>";
        }
        DivContent += "</table>";
        return DivContent;
    }
    //定义过滤函数
    me.FliterString = function(orgString) {
        orgString = orgString.replace(new RegExp("\"", "gi"), "&#34;");
        orgString = orgString.replace(new RegExp("'", "gi"), "&#39;");
        return orgString;
    }
    //绑定触发控件的click事件
    AddEvent(me.targetObj, "click", function() {
        me.pubDiv();
    });
    //绑定浮动层的事件
    AddEvent(me.pupDivObj, "mouseover", function() {
        me.isFocusIn = true;
    });
    AddEvent(me.pupDivObj, "mouseout", function() {
        me.isFocusIn = false;
    });
    //隐藏弹出层
    me.Hide = function() {
        me.pupDivObj.style.display = "none";
        me.currentIndex = -1;
    }
    //下拉菜单的鼠标事件
    me.OnTdMouseOver = function(i) {
        me.currentIndex = i;
        var result = me.pupDivObj.firstChild;
        result.rows[me.currentIndex].style.cursor = "point";
        if (!result || result.rows.length <= 0)
            return;
        if (result.rows[me.currentIndex] != undefined && result.rows[me.currentIndex].name != "line") {

            //取消之前选中项的颜色
            if (result.rows[me.LastIndex] != null) {
                result.rows[me.LastIndex].style.backgroundColor = "#FFFFFF";
                result.rows[me.LastIndex].style.color = "#000000";
            }
            //改变选中项的颜色
            if (result.rows[me.currentIndex] != undefined) {
                result.rows[me.currentIndex].style.backgroundColor = "gray"; //"#3161CE";
                result.rows[me.currentIndex].style.color = "#FFFFFF";
            }
            me.LastIndex = me.currentIndex;
        }
    }
    me.OnTdMouseOut = function(i) {
        var result = me.pupDivObj.firstChild;
        if (!result || result.rows.length <= 0)
            return;
        if (result.rows[me.currentIndex] != undefined && result.rows[me.currentIndex].name != "line") {

            result.rows[me.currentIndex].style.backgroundColor = "#FFFFFF";
            result.rows[me.currentIndex].style.color = "#000000";
        }
    }
    me.OnTdMouseClick = function(i) {
        var evt = evt || window.event;
        var result = me.pupDivObj.firstChild;
        if (!result || result.rows.length <= 0)
            return;
        if (result.rows[me.currentIndex].name != "line") {

            //给输入框赋值
            me.Result = result.rows[me.currentIndex].getAttribute("ReturnValue");
            //隐藏搜索结果
            me.pupDivObj.style.display = "none";
            me.currentIndex = -1;
            //触发外部事件
            if (me.Result == "0") {
                //自定义
                me.callBackNewFun();
            }
            else {
                me.callBackFun(me.Result);
            }
        }
    }
    //绑定控件失去焦点事件
    AddEvent(me.targetObj, "blur", function() {
        if (!me.isFocusIn) {
            me.Hide();
        }
    });
    //初始化事件函数
    me.InitControl = function(itemList, callBackFun, callBackNewFun) {
        //需要绑定的选项
        if (itemList.length > 0) {
            me.itemList = itemList;
        }
        else { me.itemList = []; }
        //初始化选项的点击函数
        if (me.callBackFun == null || typeof (me.callBackFun) == undefined) {
            me.callBackFun = callBackFun;
        }
        //初始化新建选项的点击函数
        if (me.callBackNewFun == null || typeof (me.callBackNewFun) == undefined) {
            me.callBackNewFun = callBackNewFun;
        }
    }
    //添加对象事件
    function AddEvent(target, eventType, callback) {
        DeleteEvent(target, eventType, callback);
        if (target.addEventListener) {
            target.addEventListener(eventType, callback, false);
        }
        else {
            //ie
            target.attachEvent("on" + eventType, function(event) { return callback.call(target, event); });
        }
    }
    //删除对象事件
    function DeleteEvent(target, eventType, callback) {
        if (target.removeEventListener) {
            target.removeEventListener(eventType, callback, true);
        }
        else {
            //ie
            target.detachEvent("on" + eventType, callback);
        }
    }
    //返回对象
    return me;
};
/*
* 新建一个闭包，用于实现鼠标点击搜索结果时的事件，以解决通过训练传递的参数一直是最后一个索引的问题    
*
* writter:zhangyu 2012-01-03
*/
function BiBaoOnMouseResult(i, me) {
    this.OnMouseClickEx = function() {
        me.OnTdMouseClick(i);
    };
    this.OnMouseOverEx = function() {
        me.OnTdMouseOver(i);
    };
    this.OnMouseOutEx = function() {
        me.OnTdMouseOut(i);
    };
}

 

点击这里下载源码