基于Bootstrap里面的Button dropdown打造自定义select
最近工作非常的忙，在对一个系统进行改版。项目后台是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的更多相关文章
- bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作
在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popov ...
- 【Android】监听viewpager子页面里面的Button按钮
最近做项目遇到Viewpager+Fragment滑动页面,要监听子页面中的按钮,在网上查了些解决办法: 办法一: 这种方法是在适配器初始化中进行监听,有人亲测通过,但是我继承FragmentPage ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- C#开发微信门户及应用(46)-基于Bootstrap的微信门户应用管理系统功能介绍
在前面介绍很多的微信框架,基本上都采用EasyUI的界面来搭建的微信框架,如随笔<C#开发微信门户及应用(8)-微信门户应用管理系统功能介绍>介绍的一样,不过随着微信的H5应用越来越多,因 ...
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
- 【Android开发日记】之入门篇（十四）——Button控件+自定义Button控件
好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...
- 基于Bootstrap的对话框插件bootstrap-dialog
写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
随机推荐
- PHP图形操作之生成图像验证码
简单的验证码其实就是在图片中输出了几个字符,通过imagestring函数就能实现. 但是在处理上,为了使验证码更加的安全,防止其他程序自动识别,因此常常需要对验证码进行一些干扰处理,通常会采用绘制一 ...
- qgis自定义坐标系与qgis.db问题
将编译好的qgis库整理,屏蔽获取删除环境变量中的路径,测试qgis.exe程序功能 如出现如上提示: 原因:是未找到qgis.db文件,无法拷贝到系统默认的C:/Users/Administrato ...
- ASP.NET Razor - html中使用if else
参考: http://www.runoob.com/aspnet/razor-cs-loops.html <select id="task_isfirst" class=&q ...
- Total Commander解压位置
TC解压到当前文件夹下 TC也是用了一段时间,现在勉强也算用习惯了,今天在解压文件的时候感觉步骤麻烦,之前解压都是解压到另一个窗口,所以一直是ALT+8同步窗口,然后解压文件.但一般解压文件都是解压到 ...
- 验证mongodb主从复制过程~记录操作
接 mongodb的安装:http://www.cnblogs.com/myrunning/p/4319367.html 1.1创建数据目录 在这里我们将不使用mongodb的配置文件启动mongod ...
- 计数排序和桶排序（Java实现）
目录 比较和非比较的区别 计数排序 计数排序适用数据范围 过程分析 桶排序 网络流传桶排序算法勘误 桶排序适用数据范围 过程分析 比较和非比较的区别 常见的快速排序.归并排序.堆排序.冒泡排序等属于比 ...
- 如何设置mysql远程访问及防火墙设置
笔者在一个实际的项目中需要MYSQL远程访问. 情景: 安装好Mysql, 本地访问正常,很奇怪局域的机器都无法访问该服务器上的MYSQL数据库. 经过资料查找 原来Mysql默认是不可以通过远程机器 ...
- POI
一.简介 POI(Point of Interest),中文可以翻译为“兴趣点”.在地理信息系统中,一个POI可以是一栋房子.一个商铺.一个邮筒.一个公交站等. 1.POI检索 百度地图SDK提供三种 ...
- Quartz 2D在ios中的使用简述一：坐标体系
Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境,官方文档:Quartz 2D Programming Guide. 一.坐标体系 这样的坐标体系就导致我们使用Quart ...
- Linux堆溢出漏洞利用之unlink
Linux堆溢出漏洞利用之unlink 作者:走位@阿里聚安全 0 前言 之前我们深入了解了glibc malloc的运行机制(文章链接请看文末▼),下面就让我们开始真正的堆溢出漏洞利用学习吧.说实话 ...