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


Posted in Javascript onJune 02, 2016

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

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

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

关于该组件的详情参看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"}  
] 
});

效果图:

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

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"
}    
]   
}  
] 
});

效果图:

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

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的下拉菜单的DropDownList的JQuery插件

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

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

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JS中promise化微信小程序api
Apr 12 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
Vue仿百度搜索功能
Dec 28 Vue.js
关于Javascript闭包与应用的详解
Apr 22 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 #Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 #Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 #Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 #Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 #Javascript
Jquery获取第一个子元素简单实例
Jun 02 #Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 #Javascript
You might like
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
Javascript基础教程之for循环
2015/01/18 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
办加油卡单位介绍信
2014/01/09 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
办理房产过户的委托书
2014/09/14 职场文书
接待员岗位职责
2015/02/13 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
全新239军机修复记
2022/04/05 无线电