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 25 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
RequireJS用法简单示例
Aug 20 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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中使用灵巧的体系结构
2006/10/09 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
关于vue面试题汇总
2018/03/20 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
实习生个人的自我评价
2013/12/08 职场文书
毕业生自荐信
2013/12/14 职场文书
建设工程授权委托书
2014/09/22 职场文书