要求输入框点击出现下拉菜单，并实现以下功能：
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);
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
