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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
新手简单了解vue
May 29 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
vue设置一开始进入的页面教程
Oct 28 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
js实现可拖动DIV的方法
2013/12/17 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
浅析Python中的多重继承
2015/04/28 Python
Python单元和文档测试实例详解
2019/04/11 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python 获取项目根路径的代码
2019/09/27 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python脚本和网页有何区别
2020/07/02 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
大课间活动实施方案
2014/03/06 职场文书
婚前协议书
2014/04/15 职场文书
初中生评语大全
2014/04/24 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
关于运动会的口号
2014/06/07 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2014年法院工作总结
2014/11/24 职场文书
文明单位申报材料
2014/12/23 职场文书
高中历史教学反思
2016/02/19 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫