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 相关文章推荐
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python制作爬虫采集小说
2015/10/25 Python
django2 快速安装指南分享
2018/01/05 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python多线程并发及测试框架案例
2019/10/15 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
网上蛋糕店创业计划书
2014/01/24 职场文书
学子宴答谢词
2014/01/25 职场文书
思想品德自我评价
2014/02/04 职场文书
2014年国庆标语
2014/06/30 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
新兵入伍决心书
2015/09/22 职场文书