UDN-企业互联网技术人气社区

板块导航

浏览  : 859
回复  : 2

[jQuery] 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

[复制链接]
西北的风的头像 楼主
  这篇文章主要介绍了创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 的相关资料,需要的朋友可以参考下
  
  Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap,可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。
  
  Bootstrap提供了不少的前端UI组件。带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)
20160602165610105.png
  
  关于该组件的详情参看Bootstrap官网、带下拉菜单的文本框
  
  看到上面的效果图,使我想到WinForm编程中的DropDownList控件。不过,和DropDownList控件相比,还缺少以下内容
  
  1、当点击菜单中的某一项,菜单的文字自动显示在文本框中
  
  2、当点击菜单中的某一项,提供一个函数来获得相关的数据(可以是菜单的文字,也可以是相关的文本)
  
  3、文本框不能编辑,只能通过点击菜单来更改内容
  
  4、能设置下拉菜单的最大高度,使得菜单项过多时,能出现滚动条。(想想看,30条目将会占满整个屏幕是多么恐怖的事)
  
  当然,Bootstrap只提供了前端UI的外观,上面的这几条都可以通过编码来完成
  
  基于码农的精神,自力更生,自己写一个DropDownList的JQuery组件。
  
  先规划好这个JQuery组件的属性:
  
  InputName:文本框的name和id属性,默认值是“Q”;
  
  ButtonText:右侧按钮的文字,默认值是“示例”;
  
  ReadOnly:文本框的可编辑性属性。默认是true,也就是不能编辑,只能通过点击菜单来改变文字;
  
  MaxHeight:下拉菜单的最高高度。默认值是-1,不设置最高高度,菜单的高度由菜单的条目决定;
  
  onSelect:设置选择菜单条目时调用的函数。默认值是$.noop(),JQuery中的空函数;
  
  Items:菜单条目的集合。每个菜单项提供ItemText属性(菜单文字)、ItemData属性(相关数据)、Selected属性(默认选择项,有多个,算最后一个)
  
  Sections:菜单组的几何。每个组包含ItemHeader属性(组标题文字)、Items属性(该组菜单条目的集合)。每个组之间有一条分割线。该属性的优先级高于Items属性(如果仅仅设置了Items,则意味着只有一个菜单组,没有分割线,没有组标题文字)。
  
  DropDownList的组件代码如下,由于是基于JQuery,故要把该代码置于JQuery引用代码之下:
  
  代码比较简单,主要就是依据属性值来拼接HTML代码,下面简单的说明一下:
  
  ReadOnly的实现:由于不是通过设置文本框的ReadOnly属性(会改变文本框的外观),因此采用绑定屏蔽掉文本框的cut、copy、paste、keydown事件来实现。
  
  MaxHeight的实现:判断下拉菜单(元素UL)的高度是否超过MaxHeight,若超过则设置CSS属性Height和Overflow
  
  onSelect函数:要自己实现一个函数,参数有两个值,第一个值是文本框的名字,第二个是当前点中的菜单项的相关数据(ItemData属性)
  1. <script>
  2. (function($){
  3. jQuery.fn.DropDownList = function(options) {
  4. //设置插件的默认属性  
  5. var defaults ={   
  6. InputName:"Q",   
  7. ButtonText:"示例",   
  8. ReadOnly:true,   
  9. MaxHeight:-1,   
  10. onSelect:$.noop(),  
  11. }  
  12. var options = $.extend(defaults,options);  
  13. return this.each(function(){   
  14. var o=options;   
  15. var Obj=$(this);   
  16. var S="<div class='input-group'>";   
  17. S = S + "<input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "' />";   
  18. S = S + "<div class='input-group-btn'>";   
  19. S = S + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>" + o.ButtonText + "<span class='caret'></span></button>";   
  20. S = S + "<ul class='dropdown-menu dropdown-menu-right' role='menu'>";
  21.    //可以由Sections参数或Items参数设置下拉条目,Sections的优先级比Items高   
  22. if (o.Sections!== undefined)   
  23. {    $.each(o.Sections,function(n,value){           
  24. //从第2节开始,在每节的顶部添加一条分割线     
  25. if (n>0) { S=S + "<li class='divider'></li>"; }     
  26. //如果设置了ItemHeader参数,则给该节添加标题文本     
  27. if (value.ItemHeader!==undefined) { S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>"; }     
  28. CreateItem(value);   
  29. });   
  30. }   
  31. else   
  32. {   
  33. CreateItem(o);   
  34. }   
  35. var SelText="";   
  36. var SelData="";   
  37. function CreateItem(Items)   
  38. {   
  39. $.each(Items.Items,function(n,Item){   
  40. //如果ItemData参数没有定义,则把ItemText参数传给ItemDate     
  41. if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}     
  42. S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";     
  43. //如果设置了Selected参数,则获取该条目的ItemDada和ItemText。     
  44. //如果有多个条目设置该参数,则获取的是满足条件最后一个条目     
  45. if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;}   
  46. });   
  47. }     
  48. S =S + "</ul></div></div>";   
  49. Obj.html(S);   
  50. var Input=Obj.find("input");   
  51. //如果有条目设置Selected参数,则调用设置活动条目的函数   
  52. if (SelText!="") { SetData(SelText,SelData); }   
  53. //给所有的条目绑定单击事件,单击后调用设置活动条目的函数   
  54. Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));});   
  55. //如果ReadOnly参数设置为true,则屏蔽掉文本框的相关事件,使得文本框不能编辑。(而又显示为激活状态)  
  56. if (o.ReadOnly==true)   
  57. {   
  58. Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});   
  59. }   
  60. //设置MaxHeight参数后(大于0),则设置下拉菜单的最大高度,若条目过多,会出现垂直滚动条  
  61. if (o.MaxHeight>0)   
  62. {   
  63. var UL=Obj.find("ul");   
  64. if (UL.height()>o.MaxHeight)   
  65. {UL.css({'height':o.MaxHeight,'overflow':'auto'});}
  66. }   
  67. function SetData(Text,Data)   
  68. {   
  69. Input.val(Text);   
  70. if (o.onSelect)
  71. { o.onSelect(o.InputName,Data);
  72. }  
  73. }     
  74. });
  75. }
  76. })(jQuery);
  77. </script>
复制代码

  下面是几个用法实例:对Id为DropDownList的div元素运用组件,则在该div内部添加一个DropDownList组件
  
  1、用Items属性实现下拉菜单(所有菜单项都在一个组里,没有组标题,没有分割线)
  1. function ShowData(InputName,Data)
  2. {
  3. alert(InputName + ":" + Data);
  4. }
  5. $("#DropDownList").DropDownList(
  6. {  
  7. InputName:"Q",  
  8. ButtonName:"参考",  
  9. onSelect : function(I,Data)   
  10. {   
  11. ShowData(I,Data);   
  12. },  
  13. Items:[   
  14. {ItemText:"示例1",ItemData:"Demo1",Selected:true},   
  15. {ItemText:"示例2",ItemData:"Demo2"},   
  16. {ItemText:"示例3",ItemData:"Demo3"}  
  17. ]
  18. });
复制代码

  效果图:
20160602165610106.png
  
  2、用Sections属性实现下拉菜单(菜单组之间有分割线,菜单组可以设置组标题)
  1. function ShowData(InputName,Data)
  2. {
  3. alert(InputName + ":" + Data);
  4. }$("#DropDownList").DropDownList(
  5. {  InputName:"Q",  
  6. ButtonText:"参考",  
  7. onSelect : function(I,Data)   
  8. {   
  9. ShowData(I,Data);   
  10. },  
  11. Sections:[   
  12. {   
  13. ItemHeader:"全部",   
  14. Items:[     
  15. {ItemText:"全部",ItemData:"All"}   
  16. ]   
  17. },   
  18. {   
  19. Items:[   
  20. {ItemText:"示例1",ItemData:"Demo1",Selected:true},  
  21. {ItemText:"示例2"
  22. }   
  23. ]   
  24. }  
  25. ]
  26. });
复制代码
 
  效果图:
20160602165610107.png
  
  3、实现全国省份直辖市的下拉选择,要设置MaxHeight属性
 
  1. function ShowData(InputName,Data)
  2. {
  3. alert(InputName + ":" + Data);
  4. }
  5. $("#DropDownList").DropDownList(
  6. {  
  7. InputName:"Q",  
  8. ButtonText:"参考",  
  9. MaxHeight:310,  
  10. onSelect : function(I,Data)   
  11. {   
  12. ShowData(I,Data);   
  13. },  
  14. Sections:[   
  15. {   
  16. ItemHeader:"直辖市",   
  17. Items:[     
  18. {ItemText:"北京",ItemData:"Beijing"},     
  19. {ItemText:"上海",ItemData:"Shanghai",Selected:true},     
  20. {ItemText:"天津",ItemData:"Tianjin"},     
  21. {ItemText:"重庆",ItemData:"Chongqing"}   
  22. ]   
  23. },   
  24. {   
  25. ItemHeader:"华东地区",   
  26. Items:
  27. [     
  28. {ItemText:"山东",ItemData:"Shandong"},     
  29. {ItemText:"江苏",ItemData:"Jiangsu"},     
  30. {ItemText:"安徽",ItemData:"Anhui"},     
  31. {ItemText:"浙江",ItemData:"Zhejiang"},     
  32. {ItemText:"福建",ItemData:"Fujian"}   
  33. ]  
  34. },   
  35. {  
  36. ItemHeader:"华南地区",   
  37. Items:[     
  38. {ItemText:"广东",ItemData:"Guangdong"},     
  39. {ItemText:"广西",ItemData:"Guangxi"},     
  40. {ItemText:"海南",ItemData:"Hainan"}   
  41. ]   
  42. },   
  43. {   
  44. ItemHeader:"华中地区",   
  45. Items:[     
  46. {ItemText:"湖北",ItemData:"Hubei"},     
  47. {ItemText:"湖南",ItemData:"Hunan"},     
  48. {ItemText:"河南",ItemData:"Henan"},     
  49. {ItemText:"江西",ItemData:"Jiangxi"}   
  50. ]   
  51. },   
  52. {   
  53. ItemHeader:"华北地区",   
  54. Items:[     
  55. {ItemText:"河北",ItemData:"Hebei"},     
  56. {ItemText:"山西",ItemData:"Shanxi"},     
  57. {ItemText:"内蒙古",ItemData:"Neimenggu"}   
  58. ]   
  59. },   
  60. {   
  61. ItemHeader:"西北地区",   
  62. Items:[     
  63. {ItemText:"宁夏",ItemData:"Ningxia"},     
  64. {ItemText:"新疆",ItemData:"Xinjiang"},     
  65. {ItemText:"青海",ItemData:"Qinghai"},     
  66. {ItemText:"陕西",ItemData:"Shaanxi"},     
  67. {ItemText:"甘肃",ItemData:"Gansu"},   
  68. ]   
  69. },   
  70. {   
  71. ItemHeader:"西南地区",   
  72. Items:[     
  73. {ItemText:"四川",ItemData:"Sichuan"},     
  74. {ItemText:"云南",ItemData:"Yunnan"},   
  75. {ItemText:"贵州",ItemData:"Guizhou"},   
  76. {ItemText:"西藏",ItemData:"Xizang"}   
  77. ]   
  78. },   
  79. {   
  80. ItemHeader:"东北地区",   
  81. Items:[     
  82. {ItemText:"辽宁",ItemData:"Liaoning"},     
  83. {ItemText:"吉林",ItemData:"Jilin"},     
  84. {ItemText:"黑龙江",ItemData:"Heilongjiang"}   
  85. ]   
  86. }  
  87. ]
  88. });
复制代码

  效果图:
 
QQ截图20161216153913.png
 
  唯一的遗憾就是有滚动条的时候,滚动条会覆盖下拉菜单右侧的两个圆角,如果真要完美的话,可能要对Bootstrap中的源代码进行修改了。
  
  以上内容是小编给大家介绍的创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件的全部内容,希望对大家有所帮助!

相关帖子

发表于 2016-12-16 15:40:18 | 显示全部楼层
Very Good!
使用道具 举报

回复

发表于 2016-12-24 04:07:59 来自手机 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部