创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

站长资源 2024/11/30 佚名

2 0 1

Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap，可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。

Bootstrap提供了不少的前端UI组件。带下拉菜单的文本框就是其中之一，效果图如下（真要自己完全设计，还得费一番功夫）

关于该组件的详情参看Bootstrap官网、带下拉菜单的文本框

看到上面的效果图，使我想到WinForm编程中的DropDownList控件。不过，和DropDownList控件相比，还缺少以下内容

1、当点击菜单中的某一项，菜单的文字自动显示在文本框中

2、当点击菜单中的某一项，提供一个函数来获得相关的数据（可以是菜单的文字，也可以是相关的文本）

3、文本框不能编辑，只能通过点击菜单来更改内容

4、能设置下拉菜单的最大高度，使得菜单项过多时，能出现滚动条。（想想看，30条目将会占满整个屏幕是多么恐怖的事）

当然，Bootstrap只提供了前端UI的外观，上面的这几条都可以通过编码来完成

基于码农的精神，自力更生，自己写一个DropDownList的JQuery组件。

先规划好这个JQuery组件的属性：

InputName：文本框的name和id属性，默认值是“Q”；

ButtonText：右侧按钮的文字，默认值是“示例”；

ReadOnly：文本框的可编辑性属性。默认是true，也就是不能编辑，只能通过点击菜单来改变文字；

MaxHeight：下拉菜单的最高高度。默认值是-1，不设置最高高度，菜单的高度由菜单的条目决定；

onSelect：设置选择菜单条目时调用的函数。默认值是$.noop()，JQuery中的空函数；

Items：菜单条目的集合。每个菜单项提供ItemText属性（菜单文字）、ItemData属性（相关数据）、Selected属性（默认选择项，有多个，算最后一个）

Sections：菜单组的几何。每个组包含ItemHeader属性（组标题文字）、Items属性（该组菜单条目的集合）。每个组之间有一条分割线。该属性的优先级高于Items属性（如果仅仅设置了Items，则意味着只有一个菜单组，没有分割线，没有组标题文字）。

DropDownList的组件代码如下，由于是基于JQuery，故要把该代码置于JQuery引用代码之下：

代码比较简单，主要就是依据属性值来拼接HTML代码，下面简单的说明一下：

ReadOnly的实现：由于不是通过设置文本框的ReadOnly属性（会改变文本框的外观），因此采用绑定屏蔽掉文本框的cut、copy、paste、keydown事件来实现。

MaxHeight的实现：判断下拉菜单（元素UL）的高度是否超过MaxHeight，若超过则设置CSS属性Height和Overflow

onSelect函数：要自己实现一个函数，参数有两个值，第一个值是文本框的名字，第二个是当前点中的菜单项的相关数据（ItemData属性）

<script>
(function($){ 
jQuery.fn.DropDownList = function(options) {
//设置插件的默认属性  
var defaults ={   
InputName:"Q",   
ButtonText:"示例",   
ReadOnly:true,   
MaxHeight:-1,   
onSelect:$.noop(),  
}  
var options = $.extend(defaults,options);  
return this.each(function(){   
var o=options;   
var Obj=$(this);   
var S="<div class='input-group'>";   
S = S + "<input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "' />";   
S = S + "<div class='input-group-btn'>";   
S = S + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>" + o.ButtonText + "<span class='caret'></span></button>";   
S = S + "<ul class='dropdown-menu dropdown-menu-right' role='menu'>"; 
   //可以由Sections参数或Items参数设置下拉条目，Sections的优先级比Items高   
if (o.Sections!== undefined)   
{    $.each(o.Sections,function(n,value){           
//从第2节开始，在每节的顶部添加一条分割线     
if (n>0) { S=S + "<li class='divider'></li>"; }     
//如果设置了ItemHeader参数，则给该节添加标题文本     
if (value.ItemHeader!==undefined) { S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>"; }     
CreateItem(value);    
});   
}   
else   
{    
CreateItem(o);   
}    
var SelText="";   
var SelData="";   
function CreateItem(Items)   
{    
$.each(Items.Items,function(n,Item){    
//如果ItemData参数没有定义，则把ItemText参数传给ItemDate     
if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}     
S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";     
//如果设置了Selected参数，则获取该条目的ItemDada和ItemText。     
//如果有多个条目设置该参数，则获取的是满足条件最后一个条目     
if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;}   
});   
}     
S =S + "</ul></div></div>";   
Obj.html(S);    
var Input=Obj.find("input");   
//如果有条目设置Selected参数，则调用设置活动条目的函数   
if (SelText!="") { SetData(SelText,SelData); }    
//给所有的条目绑定单击事件，单击后调用设置活动条目的函数   
Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));});   
//如果ReadOnly参数设置为true，则屏蔽掉文本框的相关事件，使得文本框不能编辑。（而又显示为激活状态）  
if (o.ReadOnly==true)   
{    
Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});   
}    
//设置MaxHeight参数后（大于0），则设置下拉菜单的最大高度，若条目过多，会出现垂直滚动条  
if (o.MaxHeight>0)   
{    
var UL=Obj.find("ul");    
if (UL.height()>o.MaxHeight)    
{UL.css({'height':o.MaxHeight,'overflow':'auto'});} 
}    
function SetData(Text,Data)   
{    
Input.val(Text);    
if (o.onSelect) 
{ o.onSelect(o.InputName,Data); 
}  
}     
}); 
}
})(jQuery);
</script>

下面是几个用法实例：对Id为DropDownList的div元素运用组件，则在该div内部添加一个DropDownList组件

1、用Items属性实现下拉菜单（所有菜单项都在一个组里，没有组标题，没有分割线）

function ShowData(InputName,Data)
{ 
alert(InputName + ":" + Data); 
}
$("#DropDownList").DropDownList( 
{  
InputName:"Q",  
ButtonName:"参考",  
onSelect : function(I,Data)   
{    
ShowData(I,Data);   
},  
Items:[   
{ItemText:"示例1",ItemData:"Demo1",Selected:true},   
{ItemText:"示例2",ItemData:"Demo2"},   
{ItemText:"示例3",ItemData:"Demo3"}  
] 
});

效果图：

2、用Sections属性实现下拉菜单（菜单组之间有分割线，菜单组可以设置组标题）

function ShowData(InputName,Data)
{ 
alert(InputName + ":" + Data); 
}$("#DropDownList").DropDownList( 
{  InputName:"Q",  
ButtonText:"参考",  
onSelect : function(I,Data)   
{    
ShowData(I,Data);   
},  
Sections:[   
{    
ItemHeader:"全部",    
Items:[     
{ItemText:"全部",ItemData:"All"}    
]   
},   
{    
Items:[    
{ItemText:"示例1",ItemData:"Demo1",Selected:true},  
{ItemText:"示例2"
}    
]   
}  
] 
});

效果图：

3、实现全国省份直辖市的下拉选择，要设置MaxHeight属性

function ShowData(InputName,Data)
{ 
alert(InputName + ":" + Data); 
}
$("#DropDownList").DropDownList( 
{  
InputName:"Q",  
ButtonText:"参考",  
MaxHeight:310,  
onSelect : function(I,Data)   
{    
ShowData(I,Data);   
},  
Sections:[   
{    
ItemHeader:"直辖市",    
Items:[     
{ItemText:"北京",ItemData:"Beijing"},     
{ItemText:"上海",ItemData:"Shanghai",Selected:true},     
{ItemText:"天津",ItemData:"Tianjin"},     
{ItemText:"重庆",ItemData:"Chongqing"}    
]   
},   
{    
ItemHeader:"华东地区",    
Items:
[     
{ItemText:"山东",ItemData:"Shandong"},     
{ItemText:"江苏",ItemData:"Jiangsu"},     
{ItemText:"安徽",ItemData:"Anhui"},     
{ItemText:"浙江",ItemData:"Zhejiang"},     
{ItemText:"福建",ItemData:"Fujian"}    
]  
},   
{  
ItemHeader:"华南地区",    
Items:[     
{ItemText:"广东",ItemData:"Guangdong"},     
{ItemText:"广西",ItemData:"Guangxi"},     
{ItemText:"海南",ItemData:"Hainan"}    
]   
},   
{    
ItemHeader:"华中地区",    
Items:[     
{ItemText:"湖北",ItemData:"Hubei"},     
{ItemText:"湖南",ItemData:"Hunan"},     
{ItemText:"河南",ItemData:"Henan"},     
{ItemText:"江西",ItemData:"Jiangxi"}   
]   
},   
{    
ItemHeader:"华北地区",    
Items:[     
{ItemText:"河北",ItemData:"Hebei"},     
{ItemText:"山西",ItemData:"Shanxi"},     
{ItemText:"内蒙古",ItemData:"Neimenggu"}    
]   
},   
{    
ItemHeader:"西北地区",    
Items:[     
{ItemText:"宁夏",ItemData:"Ningxia"},     
{ItemText:"新疆",ItemData:"Xinjiang"},     
{ItemText:"青海",ItemData:"Qinghai"},     
{ItemText:"陕西",ItemData:"Shaanxi"},     
{ItemText:"甘肃",ItemData:"Gansu"},    
]   
},   
{    
ItemHeader:"西南地区",    
Items:[     
{ItemText:"四川",ItemData:"Sichuan"},     
{ItemText:"云南",ItemData:"Yunnan"},    
{ItemText:"贵州",ItemData:"Guizhou"},    
{ItemText:"西藏",ItemData:"Xizang"}    
]   
},   
{    
ItemHeader:"东北地区",   
Items:[     
{ItemText:"辽宁",ItemData:"Liaoning"},     
{ItemText:"吉林",ItemData:"Jilin"},     
{ItemText:"黑龙江",ItemData:"Heilongjiang"}    
]   
}  
] 
});

效果图：

唯一的遗憾就是有滚动条的时候，滚动条会覆盖下拉菜单右侧的两个圆角，如果真要完美的话，可能要对Bootstrap中的源代码进行修改了。

以上内容是小编给大家介绍的创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件的全部内容，希望对大家有所帮助！

bootstrap下拉菜单

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

jQuery EasyUI 入门必看

jQuery Ajax页面局部加载方法汇总

评论“创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

jQuery EasyUI 入门必看

jQuery Ajax页面局部加载方法汇总

评论“创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存