JQuery组件基于Bootstrap的DropDownList(完整版)


Posted in Javascript onJuly 05, 2016

在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾。就是当下拉菜单出现滚动条的时候,滚动条会覆盖菜单右侧的两个圆角。使得下拉菜单左侧有2个圆角,右侧没有,看上去不是很完美。如下图所示:

JQuery组件基于Bootstrap的DropDownList(完整版)

本文的内容就是如何恢复右侧的圆角 

先看看原本的下拉菜单的HTML结构:

<ul class="dropdown-menu dropdown-menu-right" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a 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: left;
 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: 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-decoration: 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、position、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.find("ul[style]")语句来找寻里面的ul标签(因为里面的ul含有style属性,而外面的ul没有)。 

再说说JQuery的height方法。当调用JQuery的height方法来计算隐藏元素高度时,估计是先会显示元素,然后计算高度,再隐藏元素。这会有两个问题。一是显示再隐藏,速度很快,肉眼看不出,但是浏览器不会说谎,有时浏览器会额外显示滚动条。二是如果该元素的父元素也是隐藏的,则height方法会返回0。 

完善版的源代码:

(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' >";
  S = S + "<li><ul class='dropdown-menu ' style='display:inherit;position:inherit;top:0;float:inherit;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 (n>0) {S=S + "<li class='divider'></li>";}
   if (value.ItemHeader!==undefined) {S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</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 + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";
   if (Item.Selected==true) {SelText=Item.ItemText;SelData=Item.ItemData;}
  });
  }
 
  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.MaxHeight>0)
  {
  var UL=Obj.find("ul[style]");
  UL.css({'max-height':o.MaxHeight,'overflow':'auto'});
  }

  function SetData(Text,Data)
  {
  Input.val(Text);
  if (o.onSelect) {o.onSelect(o.InputName,Data);}
  }

 });
 }
})(jQuery);

样张:

 JQuery组件基于Bootstrap的DropDownList(完整版)

这样通过两层的ul实现了下拉菜单,并且滚动条也没有覆盖右侧的两个圆角。较之上个版本,比较完善。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 #Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 #Javascript
Node.js实现文件上传
Jul 05 #Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 #Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 #Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 #Javascript
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
用PHP调用数据库的存贮过程!
2006/10/09 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python学习之面向对象【入门初级篇】
2017/01/21 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
打架检讨书100字
2014/01/08 职场文书
村官工作鉴定评语
2014/01/27 职场文书
xxx同志考察材料
2014/02/07 职场文书
《尊严》教学反思
2014/02/11 职场文书
药店采购员岗位职责
2014/09/30 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
五年级学生评语大全
2014/12/26 职场文书
养成教育工作总结
2015/08/13 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js