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

Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap,可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。

 

Bootstrap提供了不少的前端UI组件。带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)

 

关于该组件的详情参看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属性)

 

Snippet官网 Snippet使用实例


  • <script>
  • (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'>";
  •   
  •             //可以由Sections参数或Items参数设置下拉条目,Sections的优先级比Items高
  •             if (o.Sections!== undefined)
  •             {
  •                 $.each(o.Sections,function(n,value){
  •                        
  •                     //从第2节开始,在每节的顶部添加一条分割线
  •                     if (n>0) { S=S + "<li class='divider'></li>"; }
  •  
  •                     //如果设置了ItemHeader参数,则给该节添加标题文本
  •                     if (value.ItemHeader!==undefined) { S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>"; }
  •  
  •                     CreateItem(value);
  •                 });
  •             }
  •             else
  •             {
  •                 CreateItem(o);
  •             }
  •   
  •  
  •             var SelText="";
  •             var SelData="";
  •  
  •             function CreateItem(Items)
  •             {
  •                 $.each(Items.Items,function(n,Item){
  •  
  •                     //如果ItemData参数没有定义,则把ItemText参数传给ItemDate
  •                     if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}
  •  
  •                     S=S + "<li><a href='#'  ItemData='"  + Item.ItemData + "' >" + Item.ItemText + "</a></li>";
  •  
  •                     //如果设置了Selected参数,则获取该条目的ItemDada和ItemText。
  •                     //如果有多个条目设置该参数,则获取的是满足条件最后一个条目
  •                     if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;}
  •                 });
  •             }
  •   
  •   
  •             S =S + "</ul></div></div>";
  •   
  •             Obj.html(S);
  •   
  •             var Input=Obj.find("input");
  •  
  •             //如果有条目设置Selected参数,则调用设置活动条目的函数
  •             if (SelText!="") { SetData(SelText,SelData); }
  •   
  •             //给所有的条目绑定单击事件,单击后调用设置活动条目的函数
  •             Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));});
  •   
  •             //如果ReadOnly参数设置为true,则屏蔽掉文本框的相关事件,使得文本框不能编辑。(而又显示为激活状态)
  •             if (o.ReadOnly==true)
  •             {
  •                 Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});
  •             }
  •   
  •             //设置MaxHeight参数后(大于0),则设置下拉菜单的最大高度,若条目过多,会出现垂直滚动条
  •             if (o.MaxHeight>0)
  •             {
  •                 var UL=Obj.find("ul");
  •                 if (UL.height()>o.MaxHeight)
  •                 {UL.css({'height':o.MaxHeight,'overflow':'auto'});}
  •             }
  •   
  •             function SetData(Text,Data)
  •             {
  •                 Input.val(Text);
  •                 if (o.onSelect) { o.onSelect(o.InputName,Data); }
  •             }
  •                  
  •         });
  •     }
  • })(jQuery);
  •  
  • </script>

下面是几个用法实例:对Id为DropDownList的div元素运用组件,则在该div内部添加一个DropDownList组件

 

1、用Items属性实现下拉菜单(所有菜单项都在一个组里,没有组标题,没有分割线)

 

Snippet官网 Snippet使用实例


  • function ShowData(InputName,Data)
  • {
  •     alert(InputName + ":" + Data); 
  • }
  •  
  • $("#DropDownList").DropDownList(
  •     {
  •         InputName:"Q",
  •         ButtonName:"参考",
  •         onSelect : function(I,Data)
  •             {
  •                 ShowData(I,Data);
  •             },
  •  
  •         Items:[
  •             {ItemText:"示例1",ItemData:"Demo1",Selected:true},
  •             {ItemText:"示例2",ItemData:"Demo2"},
  •             {ItemText:"示例3",ItemData:"Demo3"}
  •         ]
  •     });

效果图:

 

 

2、用Sections属性实现下拉菜单(菜单组之间有分割线,菜单组可以设置组标题)

 

Snippet官网 Snippet使用实例


  • function ShowData(InputName,Data)
  • {
  •     alert(InputName + ":" + Data); 
  • }
  •  
  • $("#DropDownList").DropDownList(
  •     {
  •         InputName:"Q",
  •         ButtonText:"参考",
  •         onSelect : function(I,Data)
  •             {
  •                 ShowData(I,Data);
  •             },
  •  
  •         Sections:[
  •             {
  •                 ItemHeader:"全部",
  •                 Items:[
  •                     {ItemText:"全部",ItemData:"All"}
  •                 ]
  •             },
  •             {
  •                 Items:[
  •                     {ItemText:"示例1",ItemData:"Demo1",Selected:true},
  •                     {ItemText:"示例2"}
  •                 ]
  •             }
  •         ]
  •     });

效果图:

 

3、实现全国省份直辖市的下拉选择,要设置MaxHeight属性

 

Snippet官网 Snippet使用实例


  • function ShowData(InputName,Data)
  • {
  •     alert(InputName + ":" + Data); 
  • }
  •  
  • $("#DropDownList").DropDownList(
  •     {
  •         InputName:"Q",
  •         ButtonText:"参考",
  •         MaxHeight:310,
  •         onSelect : function(I,Data)
  •             {
  •                 ShowData(I,Data);
  •             },
  •  
  •         Sections:[
  •             {
  •                 ItemHeader:"直辖市",
  •                 Items:[
  •                     {ItemText:"北京",ItemData:"Beijing"},
  •                     {ItemText:"上海",ItemData:"Shanghai",Selected:true},
  •                     {ItemText:"天津",ItemData:"Tianjin"},
  •                     {ItemText:"重庆",ItemData:"Chongqing"}
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"华东地区",
  •                 Items:[
  •                     {ItemText:"山东",ItemData:"Shandong"},
  •                     {ItemText:"江苏",ItemData:"Jiangsu"},
  •                     {ItemText:"安徽",ItemData:"Anhui"},
  •                     {ItemText:"浙江",ItemData:"Zhejiang"},
  •                     {ItemText:"福建",ItemData:"Fujian"}
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"华南地区",
  •                 Items:[
  •                     {ItemText:"广东",ItemData:"Guangdong"},
  •                     {ItemText:"广西",ItemData:"Guangxi"},
  •                     {ItemText:"海南",ItemData:"Hainan"}
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"华中地区",
  •                 Items:[
  •                     {ItemText:"湖北",ItemData:"Hubei"},
  •                     {ItemText:"湖南",ItemData:"Hunan"},
  •                     {ItemText:"河南",ItemData:"Henan"},
  •                     {ItemText:"江西",ItemData:"Jiangxi"}
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"华北地区",
  •                 Items:[
  •                     {ItemText:"河北",ItemData:"Hebei"},
  •                     {ItemText:"山西",ItemData:"Shanxi"},
  •                     {ItemText:"内蒙古",ItemData:"Neimenggu"}
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"西北地区",
  •                 Items:[
  •                     {ItemText:"宁夏",ItemData:"Ningxia"},
  •                     {ItemText:"新疆",ItemData:"Xinjiang"},
  •                     {ItemText:"青海",ItemData:"Qinghai"},
  •                     {ItemText:"陕西",ItemData:"Shaanxi"},
  •                     {ItemText:"甘肃",ItemData:"Gansu"},
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"西南地区",
  •                 Items:[
  •                     {ItemText:"四川",ItemData:"Sichuan"},
  •                     {ItemText:"云南",ItemData:"Yunnan"},
  •                     {ItemText:"贵州",ItemData:"Guizhou"},
  •                     {ItemText:"西藏",ItemData:"Xizang"}
  •                 ]
  •             },
  •             {
  •                 ItemHeader:"东北地区",
  •                 Items:[
  •                     {ItemText:"辽宁",ItemData:"Liaoning"},
  •                     {ItemText:"吉林",ItemData:"Jilin"},
  •                     {ItemText:"黑龙江",ItemData:"Heilongjiang"}
  •                 ]
  •             }
  •         ]
  •     });

效果图:

 

唯一的遗憾就是有滚动条的时候,滚动条会覆盖下拉菜单右侧的两个圆角,如果真要完美的话,可能要对Bootstrap中的源代码进行修改了。

时间: 2024-10-27 02:08:17

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件的相关文章

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件_javascript技巧

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框 看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的某一项,菜单

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)_javascript技巧

效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

基于bootstrap如何把下拉菜单于标签页对应连接起来

问题描述 基于bootstrap如何把下拉菜单于标签页对应连接起来 基于bootstrap如何把下拉菜单于标签页对应连接起来 Toggle navigation ??H. Peng Home(current) 特点 Where 元谋 丽江 大理 西双版纳 元谋 丽江 大理 西双版纳 <script> $(document).read(function(){ $("#bs-example-navbar-collapse-1 .dropdown-menu a").click(f

Bootstrap实现下拉菜单效果_javascript技巧

下拉菜单用于显示链接列表的可切换.有上下文的菜单. 1.案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码. <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> D

bootstrap dropdown下拉菜单无法显示

问题描述 使用bootstrap的下拉菜单在页面上不能显示出来,我用的是firefox浏览器,F12的HTML窗口发现.dropdown-menu元素及其子元素都是灰的,这是怎么回事啊? 解决方案 看是否缺少样式什么的<!-- Single button --><div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle

JS组件Bootstrap实现下拉菜单效果代码_javascript技巧

Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以切换下拉菜单(Dropdown)插件的隐藏内容:

Bootstrap每天必学之级联下拉菜单_javascript技巧

本文将介绍自定义的bootstrap级联下拉菜单,主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery.ajax.springMVC等等知识点,可谓包罗万象! 首先,请允许我代表该自定义组件做一番小小的介绍. "hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的.我

BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案_javascript技巧

最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="

使用 JavaScript 创建 FrontPage 下拉菜单

frontpage|javascript|菜单|创建|下拉 摘要: 当您在 Internet 上进行浏览时,到处都在使用各种类型的下拉菜单,但如果您曾经尝试创建过一种类型的下拉菜单的话,就会了解此过程可能并非总是非常简单.本文解释了创建您自己的下拉菜单所需的脚本和样式. 下拉菜单简介 Internet 上几乎每个站点都存在某种种类的下拉菜单.您可能会发现,简单的下拉菜单会在网页的上部水平排列,复杂些的会级联子菜单,有些使用带有鼠标停留效果的图形,还有一些在网页的左侧或右侧竖直排列.如果您想过在自