jquery插件制作,下拉菜单

时间:2024-01-20 09:11:45

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

1.首先点击地点标签页,选择好地点;

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

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

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

参数:

data_url:json数据的ajax地址;

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

例子:

点击连接点A的输入框

jquery插件制作,下拉菜单

选择北京

jquery插件制作,下拉菜单

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

jquery插件制作,下拉菜单

选择上海东方广场

jquery插件制作,下拉菜单

选择上海东方广场1号

jquery插件制作,下拉菜单

制作了该控件的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);