jquery插件制作，下拉菜单

要求输入框点击出现下拉菜单，并实现以下功能：

1.首先点击地点标签页，选择好地点；

2.自动显示相应节点标签页显示节点信息，选择好节点

3.自动显示相应的连接点，选择连接点，连接点被选中并被传送的输入框input控件中

这个控件实际上要在前面的tab的某个子项选中以后，动态更新后面的tab内容，并且跳到后面的tab，如果tab是最后一页，则将选择内容提交到input中。为了通用性，该控件从外部接收json数据，以及调用参数，可以生成对应下拉菜单。该tab菜单支持层次可以任意设置，根据接收到的json数据的层次，以及level_length限制

参数：

data_url：json数据的ajax地址；

level_length:菜单层次，如果菜单为2层，则即使接收到3层的数据，也只显示二层tab。

 

例子：

       点击连接点A的输入框

选择北京

选错了到地区tab页面重新选择上海

选择上海东方广场

选择上海东方广场1号

 

制作了该控件的jquery插件,格式采用bootstrap的。

调用方法:

input控件写成

<input class="form-control dropdown-toggle"id="dropdownMenu" type="text" value="" size="3"/>

在script里面调用

$('#dropdownMenu').endpoint();

方法:对input元素添加一个兄弟节点(after),该兄弟节点即为下拉菜单，兄弟节点各个元素对click事件进行不同响应。

 　　1.关闭input里面的data-toggle,否则，bootstrap有一个全局监控，会在你点击地点后立即关闭下拉菜单

　　2.使用手动的toggle，开启，关闭下拉菜单

 　　3.当同一个页面使用多个该控件的实例时候，为了避免控件之间元素的干扰，需要一个全局变量索引_index，表明是那个实例的，设置点击链接为 href='"#region'+_index+'"';这样各个实例之间不会干扰。

jQuery.parent(expr)           //找父元素

jQuery.parents(expr)          //找到所有祖先元素，不限于父元素

jQuery.children(expr)        //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙

jQuery.contents()            //查找下面的所有内容，包括节点和文本。

jQuery.prev()                //查找上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()             //查找所有之前的兄弟节点

jQuery.next()                //查找下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()             //查找所有之后的兄弟节点

jQuery.siblings()            //查找兄弟节点，不分前后

jQuery.find(expr)            //跟jQuery.filter(expr)完全不一样，jQuery.filter(expr)是从初始的

这个代码经过了好几天的艰辛制作，可以接受json数据，然后生成下拉菜单控件；

接收的数据格式为：

json_data= {
        'tabs':[{'code':'region','name':'地区'},{'code':'node','name':'节点'},{'code':'endpoint','name':'连接点'}],
        'content':[
            {'region':{'code':'bj','name':'北京'},
             'node':{'code':'bjdf','name':'北京东方广场'},
             'endpoint':{'code':'bjdf1','name':'北京东方广场1号'}
             },
            {'region':{'code':'bj','name':'北京'},
             'node':{'code':'bjdf','name':'北京东方广场'},
             'endpoint':{'code':'bjdf2','name':'北京东方广场2号'}
             },
            {'region':{'code':'bj','name':'北京'},
             'node':{'code':'bjyz','name':'北京亦庄广场'},
             'endpoint':{'code':'bjyz1','name':'北京亦庄广场1号'}
             },
            {'region':{'code':'bj','name':'北京'},
             'node':{'code':'bjyz','name':'北京亦庄广场'},
             'endpoint':{'code':'bjyz2','name':'北京亦庄广场2号'}
             },
            {'region':{'code':'sh','name':'上海'},
             'node':{'code':'shdf','name':'上海东方广场'},
             'endpoint':{'code':'shdf1','name':'上海东方广场1号'}
             },
            {'region':{'code':'sh','name':'上海'},
             'node':{'code':'shdf','name':'上海东方广场'},
             'endpoint':{'code':'shdf2','name':'上海东方广场2号'}
             },
            {'region':{'code':'sh','name':'上海'},
             'node':{'code':'shdf','name':'上海东方广场'},
             'endpoint':{'code':'shdf3','name':'上海东方广场3号'}
             },
        ]
    }

菜单的js代码

/* =========================================================
 * endpoint.js
 * =========================================================
 * Copyright 2016 xuyamin yamin_xu@163.com
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

(function ($) {
    //这里放入插件代码
    var endpoint_index=1;//实例索引，以便于生成的html块中的id不同
    $.fn.endpoint = function(options) { //定义插件的名称，这里为endpoint
        var dft = {
            //以下为该插件的属性及其默认值
            version: "0.1", //版本
            data_url: "/account/endpoint", //json链接
            level_length:2 //菜单层次,如果是三层，显示三层菜单，如果二层，显示二层菜单
        };
        var ops = $.extend(dft,options);//加入外部属性
        json_data=$.ajax({url:dft['data_url'],dataType: "json", async:false});
        var tab_data=$.parseJSON(json_data.responseText);//data的格式 {'tabs':[],'content':{ {},{}}}
        var levels=tab_data['tabs'];
        if (dft.level_length){levels=levels.slice(0,dft.level_length)}
        var style = ''; //调用默认的样式
        var _this=this;
        var _index=endpoint_index;
        var path1=[];//记录已经选择的路径，应该是level1的code，level2的code，level3的code
        endpoint_index=endpoint_index+1;
        var dropdown_tabs='<div class="dropdown-menu" aria-labelledby="'+$(this).attr('id')+'">'+
            '<ul class="nav nav-tabs" role="tablist">';
        for (var i = 0; i < levels.length; i++){
            item =levels[i];
            dropdown_tabs+='<li role="presentation"><a href="#'+item['code']+_index+'" aria-controls="home"'+' value="'+item['code']+'" role="tab" data-toggle="tab">'+item['name']+'</a></li>'
        }
        dropdown_tabs+='</ul>'+
        '<div class="tab-content">';

        for (var i = 0; i < levels.length; i++){
            //建立空的标签页内容
            item =levels[i];
            dropdown_tabs+='<div role="tabpanel" class="tab-pane" id="'+item['code']+_index+'" >';
            dropdown_tabs+='</div>'
        }
        dropdown_tabs+='</div>'+'</div>';

        function get_active_tab(){
            //获取当前active的tab的名字
            active_tab=$(_this).next().find('ul>li[class="active"]>a')
            return active_tab.attr('value')
        }

        function filter_array(choosed_code){
            //该函数根据目前的choosed_code,筛选出content
            filter_str="";
            current_tab=get_active_tab();
            content=tab_data['content'];
            var list=content.filter(function (item){
                return item[current_tab]['code']==choosed_code
            });
            return list
        }

        function get_level_content(tab_code,content){
            //content为经过过滤的列表,返回某个tab页面下面所有项目，不可重复
            var list=[];
            var dict={};
            for (var i = 0; i < content.length; i++){
                item=content[i];
                if (!dict[item[tab_code]['code']]){
                    list.push({'code':item[tab_code]['code'],'name':item[tab_code]['name']});
                    dict[item[tab_code]['code']]=true
                }

            }
            return list
        }
        function tab_content(tab_code,content){
            //该函数根据content,创建一个tab页;content是经过筛选过的
            content_page='<div role="tabpanel" class="tab-pane active" id="'+tab_code+_index+'" >';
            content_list=get_level_content(tab_code,content);
            for (var i = 0; i < content_list.length; i++){
                item=content_list[i];
                content_page+='<a value="'+item['code']+'">'+item['name']+'</a><br>'
            }
            content_page+='</div>';
            //找到相应的标签页，将其内容替换
            $(_this).next().find('#'+tab_code+_index).prop('outerHTML', content_page);
        }
        function get_next_tab(tab_code){
            //根据目前code获取下个code,到最后一页则返回空
            find_next=false;
            next_tab_code=false;
            for (var i = 0; i < levels.length; i++){
                item=levels[i];
                if (item['code']==tab_code) {find_next=true;continue;}
                if (find_next) {next_tab_code=item['code'];break;}
            }
            return next_tab_code
        }

        function choose(choosed_code){
            //在当前tab下选择了某个标签，获取下个tab，以及下个tab的内容，并将其组合
            current_tab=get_active_tab();//当前的tab页
            next_tab=get_next_tab(current_tab);
            content_list=filter_array(choose_code);
            if (next_tab)
            {//有下个tab
                tab_content(next_tab,content_list);//刷新下个页面的内容
                return next_tab;//返回选中tab

            }
            else{//没有下个tab
                return false
            }

        }
        $(this).after(dropdown_tabs); //下拉菜单载入
        $(this).click(function(){
            //点击input时候,初始化第一个标签
            tab_code=levels[0]['code'];
            content_list=tab_data['content'];
            tab_content(tab_code,content_list);
            reg_click(tab_code);
            $(this).next().toggle();
            $(this).next().find('a[href="#'+tab_id+'"]').tab('show');
        });

        function reg_click(tab_code){
            //注册某个tab的click响应事件
            tab_id=tab_code+_index;
            $(_this).next().find('#'+tab_id).find('a').click(function(e){
                choose_code=$(this).attr('value');
                next_tab=choose(choose_code);//
                next_tab_id=next_tab+_index;
                if (next_tab) {
                    reg_click(next_tab);//重新注册一下click事件，因为该tab该被生成}
                    $(this).parents('.dropdown-menu').children('.nav-tabs').find('a[href="#'+next_tab_id+'"]').tab('show');
                }

                else{
                    //最后一个标签页
                    $(this).parents('.dropdown-menu').prev().val($(this).text());
                    $(this).parents('.dropdown-menu').toggle();
                }
            })
        }
    }
})(jQuery);