基于Bootstrap里面的Button dropdown打造自定义select

时间：2022-12-30 20:40:29

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

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

基于Bootstrap里面的Button dropdown打造自定义select(HTML原生select标签)  基于Bootstrap里面的Button dropdown打造自定义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的效果。但是我改过之后，还是出现了。明天继续查找一下。

基于Bootstrap里面的Button dropdown打造自定义select

添加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/ 百度虽然也有了，但是版本有点老，也不去更新。

基于Bootstrap里面的Button dropdown打造自定义select

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下拉选择框&lpar;不用其他标签模拟&rpar;

    今天群里有人问到怎么自定义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&num;开发微信门户及应用&lpar;46&rpar;-基于Bootstrap的微信门户应用管理系统功能介绍

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

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

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

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

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

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

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

随机推荐

  1. Netty 实现聊天功能

    Netty 是一个 Java NIO 客户端服务器框架,使用它可以快速简单地开发网络应用程序,比如服务器和客户端的协议.Netty 大大简化了网络程序的开发过程比如 TCP 和 UDP 的 socke ...

  2. 深度浅出immutable&period;js

    这篇文章将讲述immutable.js的基本语法和用法. 1.fromJs()  Deeply converts plain JS objects and arrays to Immutable Ma ...

  3. uva 524 prime ring problem——yhx

      Prime Ring Problem  A ring is composed of n (even number) circles as shown in diagram. Put natural ...

  4. 李洪强iOS开发之OC语言基础知识

    OC语言基础知识 一.面向对象 OC语言是面向对象的,c语言是面向过程的,面向对象和面向过程只是解决问题的两种思考方式,面向过程关注的是解决问题涉及的步骤,面向对象关注的是设计能够实现解决问题所需功能 ...

  5. Redis &plus; Jedis &plus; Spring整合遇到的异常（转）

    项目中需要用到缓存,经过比较后,选择了redis,客户端使用jedis连接,也使用到了spring提供的spring-data-redis.配置正确后启动tomcat,发现如下异常: Caused b ...

  6. USB调试不能弹出授权窗口 unauthorized 的解决办法

    今天把 AndroidStudio 1.5 给卸载了,重新安装 2.1版本,据说速度快了很多,结果手机一直没法授权调试,授权USB调试信任PC设备的窗口始终没看到,网上找了好多方法,什么驱动.重启.各 ...

  7. oracle系列笔记&lpar;1&rpar;---查询数据

    查询数据 1. 查询(select .. form ..)    (1)普通查询 select * from employees --代表查询employees表中所有数据 select last_n ...

  8. word中一页中添加两种不同的页码

    ,在文档编写的过程中,可能一个页面需要编写两个不同的页码,举个例子,在页脚有一个页码是整个文档的页码,页眉有一个页码,是每个章节的页码: 设置如下: 此处选中这个图标是为了能够看到分节符和其他的符号 ...

  9. koa文档参考

    koa文档 简介 koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除 ...

  10. MyEclipse项目的BUG修复错误类型

    一.The type java.lang.CharSequence cannot be resolved. It is indirectly referenced from required .cla ...

相关文章