最近工作非常的忙，在对一个系统进行改版。项目后台是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标签的经验，写这个也不是很困难。

<div class="dropdown" style="margin-top:30px;">

      <a style="font-size:14px;" class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

        Text 1

        <span class="caret"></span>

      </a>

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation" value=><a role="menuitem" tabindex="1" href="#">Text 1</a></li>

        <li role="presentation"><a role="menuitem" tabindex="2" href="#">Text 2</a></li>

        <li role="presentation"><a role="menuitem" tabindex="3" href="#">Text 3</a></li>

      </ul>

    </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里面的样式，所以我们需要在这个页面单独放一些样式。

<!DOCTYPE html>

<html>

  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">

    <!-- Bootstrap -->

    <link href="css/bootstrap.css" rel="stylesheet">

    <style type="text/css">

    .btn-group.open .dropdown-toggle

    {

        -webkit-box-shadow:none;

        box-shadow:none;

    }

    </style>

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <p>原始的select标签</p>

    <select>

        <option value="1">Text 1</option>

        <option value="2">Text 2</option>

        <option value="3">Text 3</option>

    </select>

    <div id="dropdown1" class="dropdown" style="margin-top:30px;">

      <div class="btn-group">

      <a style="font-size:14px;" class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

        <!--选中option之后，要在这里显示选中值，类似原始select里面的文本框-->

        <span class="placeholder">Text 1</span>

        <span class="caret"></span>

      </a>

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation" value="1"><a role="menuitem" tabindex="1" href="javascript:void(0);">Text 1</a></li>

        <li role="presentation" value="2"><a role="menuitem" tabindex="2" href="javascript:void(0);">Text 2</a></li>

        <li role="presentation" value="3"><a role="menuitem" tabindex="3" href="javascript:void(0);">Text 3</a></li>

      </ul>

      </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery-1.10.2.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

        function customDropDown(ele){

            this.dropdown=ele;

            this.placeholder=this.dropdown.find(".placeholder");

            this.options=this.dropdown.find("ul.dropdown-menu > li");

            this.val='';

            this.index=-1;//默认为-1;

            this.initEvents();

        }

        customDropDown.prototype={

            initEvents:function(){

                var obj=this;

                //这个方法可以不写，因为点击事件被Bootstrap本身就捕获了，显示下面下拉列表

                obj.dropdown.on("click",function(event){

                    $(this).toggleClass("active");

                });

                //点击下拉列表的选项

                obj.options.on("click",function(){

                    var opt=$(this);

                    obj.text=opt.find("a").text();

                    obj.val=opt.attr("value");

                    obj.index=opt.index();

                    obj.placeholder.text(obj.text);

                });

            },

            getText:function(){

                return this.text;

            },

            getValue:function(){

                return this.val;

            },

            getIndex:function(){

                return this.index;

            }

        }

        $(document).ready(function(){

            var mydropdown=new customDropDown($("#dropdown1"));

        });

    </script>

  </body>

</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里面本身的样式。

<style type="text/css">

    .btn-group.open .dropdown-toggle

    {

        -webkit-box-shadow:none;

        box-shadow:none;

    }

    </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. XML的简介及其与HTML的区别及联系

    XML: Extensible Markup Language(可扩展标记语言) HTML:HyperText Markup Language(超文本标记语言) 两者都是由万维网联盟(W3C)推出的S ...

  2. HDU 1907 Nim博弈变形

    1.HDU 1907 2.题意:n堆糖,两人轮流,每次从任意一堆中至少取一个,最后取光者输. 3.总结:有点变形的Nim,还是不太明白,盗用一下学长的分析吧 传送门 分析:经典的Nim博弈的一点变形. ...

  3. bootstrap之排版类

    bootstrap之排版类

  4. 安装Python算法库

    安装Python算法库 主要包括用NumPy和SciPy来处理数据,用Matplotlib来实现数据可视化.为了适应处理大规模数据的需求,python在此基础上开发了Scikit-Learn机器学习算 ...

  5. Struct2 csv文件上传读取中文内容乱码

    网络上搜索下,发现都不适合 最终改写代码: FileInputStream fis = null; InputStreamReader isr = null; BufferedReader br= n ...

  6. navicat 结合快捷键

    ctrl+q 打开查询窗口ctrl+/ 注释sql语句ctrl+shift +/ 解除注释ctrl+r 运行查询窗口的sql语句ctrl+shift+r 只运行选中的sql语句F6 打开一个mysql ...

  7. VS 默认开发环境如何更改

    话不多说,直接上图

  8. for循环中的占位 pass

  9. Mac读取Andriod屏幕截图

    int main(int argc, const char * argv[]) { // insert code here... string str3 = "/Users/Ethan/Do ...

  10. java中文乱码解决之道（二）-----字符编码详解：基础知识 + ASCII + GB**

    在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...