《JQuery组件基于Bootstrap的DropDownList(完整版)_.docx》由会员分享，可在线阅读，更多相关《JQuery组件基于Bootstrap的DropDownList(完整版)_.docx（9页珍藏版）》请在三一文库上搜索。
1、JQuery组件基于Bootstrap的DropDownList(完整版)_ 在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中，实现了DropDownList的JQuery组件，但是留有圆满。就是当下拉菜单消失滚动条的时候，滚动条会掩盖菜单右侧的两个圆角。使得下拉菜单左侧有2个圆角，右侧没有，看上去不是很完善。如下图所示： 本文的内容就是如何复原右侧的圆角 先看看原本的下拉菜单的HTML结构： ul class=dropdown-menu dropdown-menu-right role=menu lia href=#Action/a/li lia
2、href=#Another action/a/li lia href=#Something else here/a/li li class=divider/li lia href=#Separated link/a/li /ul 从上面的结构可以看出，由ul标签实现下拉菜单的外观（通过引用dropdown-menu样式），由li标签实现菜单项（包括菜单、分隔符、组标题）。来看看ul和li标签对应的CSS： .dropdown-menu position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: lef
3、t; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow:
4、 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); .dropdown-menu li a display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; .dropdown-menu li a:hover, .dropdown-menu li a:focus color: #262626; text-d
5、ecoration: none; background-color: #f5f5f5; 由于a的样式是通过.dropdown-menu li a来实现的，故要实现a的外观必需是在含有样式dropdown-menu的ul里面的li的里面的a的。 于是，动了一个念头，在HTML结构里的ul里面的li里再嵌套一个包含样式dropdown-menu的ul，ul里面是li，li里面是a。 但是从上面的CSS可以看出，嵌套在里面的ul也会实现菜单的外观（圆角、投影、浮动等），故在该ul的标签里强制添加style属性，把一些样式强制性的去除（改成inherit，采纳默认样式），这些样式包括display、p
6、osition、top、float、padding、border、border-radius、-webkit-box-shadow、box-shadow。 再说说MaxHeight。本次修改后挺直采纳CSS的样式max-height，而削减对菜单高度的推断。会有疑问，假如扫瞄器不支持max-height怎么办？一是不支持max-height的扫瞄器比较少（IE6等），二是假如扫瞄器不支持max-height，也就不能很好的支持Bootstrap。故不必考虑扫瞄器是否支持max-height属性。由于里外有2个ul标签，我们需要对里面的ul标签应用max-height属性，故用UL=Obj.fi
7、nd(ulstyle)语句来找寻里面的ul标签（由于里面的ul含有style属性，而外面的ul没有）。 再说说JQuery的height方法。当调用JQuery的height方法来计算隐蔽元素高度时，估量是先会显示元素，然后计算高度，再隐蔽元素。这会有两个问题。一是显示再隐蔽，速度很快，肉眼看不出，但是扫瞄器不会说谎，有时扫瞄器会额外显示滚动条。二是假如该元素的父元素也是隐蔽的，则height方法会返回0。 完善版的源代码： (function($) jQuery.fn.DropDownList = function(options) var defaults = InputName:Q, B
8、uttonText:示例, 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=i
9、nput-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 ; S = S + liul class=dropdown-menu style=display:inherit;position:inherit;top:0;float:inhe
10、rit;padding:0;border:0px;border-radius:0px;-webkit-box-shadow: inherit;box-shadow: inherit; var SelText,SelData; if (o.Sections!= undefined) $.each(o.Sections,function(n,value) if (n0) S=S + li class=divider/li; if (value.ItemHeader!=undefined) S = S + li class=dropdown-header + value.ItemHeader + /
11、li; CreateItem(value); ); else CreateItem(o); function CreateItem(Items) $.each(Items.Items,function(n,Item) if (Item.ItemData=undefined) Item.ItemData=Item.ItemText; S=S + lia href=# ItemData= + Item.ItemData + + Item.ItemText + /a/li; if (Item.Selected=true) SelText=Item.ItemText;SelData=Item.Item
12、Data; ); S =S + /ul/li/ul/div/div; Obj.html(S); var Input=Obj.find(input); if (SelText!=) SetData(SelText,SelData); Obj.find(a).bind(click, function(e) SetData($(this).html(),$(this).attr(ItemData); ); if (o.ReadOnly=true) Input.bind(cut copy paste keydown, function(e) e.preventDefault();); if (o.MaxHeight0) var UL=Obj.find(ulstyle); UL.css(max-height:o.MaxHeight,overflow:auto); function SetData(Text,Data) Input.val(Text); if (o.onSelect) o.onSelect(o.InputName,Data); ); )(jQuery); 样张： 这样通过两层的ul实现了下拉菜单，并且滚动条也没有掩盖右侧的两个圆角。较之上个版本，比较完善。 以上就是本文的全部内容，盼望对大家的学习有所关心 .