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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
js中url对象化管理分析
Dec 29 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 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 应用程序安全防范技术研究
2009/09/25 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
JavaScript版代码高亮
2006/06/26 Javascript
经验几则 推荐
2006/09/05 Javascript
定义select的边框颜色
2008/04/28 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python实现的防DDoS脚本
2011/02/08 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
python开发入门——set的使用
2020/09/03 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
中科软笔试题和面试题
2014/10/07 面试题
高级销售员求职信
2013/10/25 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
公司承诺函范文
2015/01/21 职场文书