最近工作非常的忙，在对一个系统进行改版。项目后台是MVC1.0开发的，但是前端部分已经改过几个版本，而已之前的设计师很强大，又做设计又做前端开发。而已很时尚和前沿，使用了一直都很热门的Bootstrap工具包，有很多把它定义为Web前端CSS框架。说实话，之前只知道它是Twitter公司出品，界面做的比较好看。但是没有在实际项目中使用，之前公司新来的同事会这个，准备在公司官网项目中使用，因为我不会，而已Leader对这个也不感冒，所以就没有用。而已她说配合Less一起做项目，可以提高开发效率，而已可以把系统做的更漂亮和美观，而已对自适应设计支持比较好。

项目需求是将HTML原生的select标签替换为下图所示的下拉框效果。我一般看到这种需求，要改变原生的html标签，就不太喜欢弄。虽然也知道通过ui和li标签，加上Javascript代码可以实现和select一样的功能，但是之前也没有尝试去写过，到时bug和浏览器兼容性有问题，和PM沟通，是不是不要改这个select，就用原生的select，PM说是为减低用户干扰，让用户不要太在意这个选择项。我觉得也是这个道理，首先长的不想select那么夸张，其次那个下拉箭头有点小，用户也不会太刻意去点击。其实点击那个文字也是会把下面下拉列表打开的。

(HTML原生select标签)  (最终效果图)

select原始功能是可以点击右侧的下拉箭头可以打开下拉列表，给用户选择。用户选择一个选项，文本框里面的值要变成对应的option的内容，并且可以获取到option的value值。另外一个很重要的功能是option有一个selected属性。如果某个option有selected=”selected”，那么下拉框默认会选中当前这个option。

 

Bootstrap提供Button Dropdown是为了来做漂亮的菜单，压根不是想做select的功能。当我搜索看到它时，我还以为Bootstrap可以提供类似button dropdown样式的select组件。不过我是妄想，没有这个组件，必须组件实现。其实有过用ul和li写select标签的经验，写这个也不是很困难。

  1. <div class="dropdown" style="margin-top:30px;">
  2.       <a style="font-size:14px;" class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.         Text 1
  4.         <span class="caret"></span>
  5.       </a>
  6.       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  7.         <li role="presentation" value=><a role="menuitem" tabindex="1" href="#">Text 1</a></li>
  8.         <li role="presentation"><a role="menuitem" tabindex="2" href="#">Text 2</a></li>
  9.         <li role="presentation"><a role="menuitem" tabindex="3" href="#">Text 3</a></li>
  10.       </ul>
  11.     </div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

这个是Button Dropdown的基本代码。因为它本身会应用css样式，而已我们后面要改bootstrap.min.css里面的样式，所以我们需要在这个页面单独放一些样式。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap 101 Template</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  6.     <!-- Bootstrap -->
  7.     <link href="css/bootstrap.css" rel="stylesheet">
  8.     <style type="text/css">
  9.     .btn-group.open .dropdown-toggle
  10.     {
  11.         -webkit-box-shadow:none;
  12.         box-shadow:none;
  13.     }
  14.     </style>
  15.  
  16.     <!--[if lt IE 9]>
  17.       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  18.       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  19.     <![endif]-->
  20.   </head>
  21.   <body>
  22.     <p>原始的select标签</p>
  23.     <select>
  24.         <option value="1">Text 1</option>
  25.         <option value="2">Text 2</option>
  26.         <option value="3">Text 3</option>
  27.     </select>
  28.     <div id="dropdown1" class="dropdown" style="margin-top:30px;">
  29.       <div class="btn-group">
  30.       <a style="font-size:14px;" class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  31.         <!--选中option之后，要在这里显示选中值，类似原始select里面的文本框-->
  32.         <span class="placeholder">Text 1</span>
  33.         <span class="caret"></span>
  34.       </a>
  35.       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  36.         <li role="presentation" value="1"><a role="menuitem" tabindex="1" href="javascript:void(0);">Text 1</a></li>
  37.         <li role="presentation" value="2"><a role="menuitem" tabindex="2" href="javascript:void(0);">Text 2</a></li>
  38.         <li role="presentation" value="3"><a role="menuitem" tabindex="3" href="javascript:void(0);">Text 3</a></li>
  39.       </ul>
  40.       </div>
  41.     </div>
  42.  
  43.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  44.     <script src="js/jquery-1.10.2.js"></script>
  45.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  46.     <script src="js/bootstrap.min.js"></script>
  47.     <script type="text/javascript">
  48.  
  49.         function customDropDown(ele){
  50.             this.dropdown=ele;
  51.             this.placeholder=this.dropdown.find(".placeholder");
  52.             this.options=this.dropdown.find("ul.dropdown-menu > li");
  53.             this.val='';
  54.             this.index=-1;//默认为-1;
  55.             this.initEvents();
  56.         }
  57.         customDropDown.prototype={
  58.             initEvents:function(){
  59.                 var obj=this;
  60.                 //这个方法可以不写，因为点击事件被Bootstrap本身就捕获了，显示下面下拉列表
  61.                 obj.dropdown.on("click",function(event){
  62.                     $(this).toggleClass("active");
  63.                 });
  64.  
  65.                 //点击下拉列表的选项
  66.                 obj.options.on("click",function(){
  67.                     var opt=$(this);
  68.                     obj.text=opt.find("a").text();
  69.                     obj.val=opt.attr("value");
  70.                     obj.index=opt.index();
  71.                     obj.placeholder.text(obj.text);
  72.                 });
  73.             },
  74.             getText:function(){
  75.                 return this.text;
  76.             },
  77.             getValue:function(){
  78.                 return this.val;
  79.             },
  80.             getIndex:function(){
  81.                 return this.index;
  82.             }
  83.         }
  84.         $(document).ready(function(){
  85.             var mydropdown=new customDropDown($("#dropdown1"));
  86.         });
  87.     </script>
  88.   </body>
  89. </html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

点击过程中会出现一个背景。通过Chrome查看元素，是写box-shodow的效果。但是我改过之后，还是出现了。明天继续查找一下。

添加1行样式覆盖，bootstrap.css里面本身的样式。

  1. <style type="text/css">
  2.     .btn-group.open .dropdown-toggle
  3.     {
  4.         -webkit-box-shadow:none;
  5.         box-shadow:none;
  6.     }
  7.     </style>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

注意事项：在实例化的过程中，我们传入的是一个jQuery选择器的对象，所以如果一个页面有很多自定义的dropdown，会使用类别。那在实例化的过程要修改一下代码哦！

Demo演示地址:http://liminjun.sinaapp.com/demo/customselect/index.html

参考网址：

1.博客园Bootstrap Button Dropdown:http://www.cnblogs.com/aehyok/p/3411626.html

2.Bootstrap CDN http://www.bootstrapcdn.com/ 百度虽然也有了，但是版本有点老，也不去更新。

3.Bootstrap官网 http://getbootstrap.com/components/#btn-dropdowns

基于Bootstrap里面的Button dropdown打造自定义select的更多相关文章

  1. bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作

    在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popov ...

  2. 【Android】监听viewpager子页面里面的Button按钮

    最近做项目遇到Viewpager+Fragment滑动页面,要监听子页面中的按钮,在网上查了些解决办法: 办法一: 这种方法是在适配器初始化中进行监听,有人亲测通过,但是我继承FragmentPage ...

  3. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  4. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  5. 基于Bootstrap的DropDownList的JQuery组件的完善版

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...

  6. C#开发微信门户及应用(46)-基于Bootstrap的微信门户应用管理系统功能介绍

    在前面介绍很多的微信框架,基本上都采用EasyUI的界面来搭建的微信框架,如随笔<C#开发微信门户及应用(8)-微信门户应用管理系统功能介绍>介绍的一样,不过随着微信的H5应用越来越多,因 ...

  7. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  8. 【Android开发日记】之入门篇（十四）——Button控件+自定义Button控件

        好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...

  9. 基于Bootstrap的对话框插件bootstrap-dialog

    写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...

随机推荐

  1. Php：学习笔记（一）：版本选择

    (注:本文来自网络) 超过75%的网站使用了PHP作为开发语言,wordpress,phpmyadmin和其他一些开源项目的盛行,带来了一大批的长尾用户.然而,他们一般安装之后却很少升级.下图是目前P ...

  2. 通读AFN②--AFN的上传和下载功能分析、SessionTask及相应的session代理方法的使用细节

    这一部分主要研究AFN的上传和下载功能,中间涉及到各种NSURLSessionTask的一些创建的解析和HTTPSessionManager对RESTful风格的web应用的支持,同时会穿插一点NSU ...

  3. css选择器万年不变的优先级和权重

    我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会 ...

  4. 用c#创建支持多语言的WinForm应用程序

    实现多语言的方法可能有使用资源文件,或者配置xml两种方法吧.没时间研究过多,学习了一下使用资源文件的方法,成功了. 在.net2.0 中,m$ 为我们提供了一种简单方便的方法, 使用资源文件 1.新 ...

  5. 【codevs】刷题记录→_→（推荐看！）

    注:本文是我原先在csdn内写的一篇博文,现转到这里,两篇博文尽量同时更新. //#include<iostream->shuati> //define 为什么刷  学长☞hzwer ...

  6. Hadoop 和 HDInsight：Windows Azure 中的大数据

    世界的大数据包含一个庞大而充满活力的生态系统,但一个开放源码项目上面有这一切,那就是 Hadoop 的王朝. Hadoop 是事实上的标准的分布式的数据运算.Hadoop 提供了一个 MapReduc ...

  7. NodeJs 开发微信公众号（一）准备工作

    前言 大概是一个月前,自己用业余时间做了一个微信公众号.微信开发,尤其是对后台不熟悉的人来说显得尤其困难.首先要克服的是后台语言(nodejs)的一些不熟悉困难,其次,也是最大的一点困难是在跟微信交互 ...

  8. 理解C# 4 dynamic(3) – DynamicObject的使用

    上篇文章"理解C# 4 dynamic(2) – ExpandoObject的使用" 了解了ExpandoObject的基本使用. 但ExpandoObject的问题就是它是一个万 ...

  9. WPF RichTextBox 做内容展示框 滚动条控制判定是否阅读完成

    一.项目背景: 最近,做项目,因为是金融项目,客户登录交易的时候,有一个提示框,就是告知客户要“入市需谨慎”等等,想必大家都遇到这样的场景,当然,这种提示是没人会看的,不过作为交易所,这样的提示又必不 ...

  10. SecureCRT使用技巧

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com   修改SecureCRT颜色配置 option->Global options –> Termina ...