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


Posted in Javascript onMay 30, 2016

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

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

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

基于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>

这个是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>

点击过程中会出现一个背景。通过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>

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

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

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

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

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

Javascript 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
Javascript 解疑
Nov 11 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
原生js实现分页效果
Sep 23 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
JavaScript常用判断写法大全(推荐)
May 30 #Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 #Javascript
基于Angularjs实现分页功能
May 30 #Javascript
AngularJs实现分页功能不带省略号的代码
May 30 #Javascript
JS组件Bootstrap Select2使用方法解析
May 30 #Javascript
AngularJs表单验证实例详解
May 30 #Javascript
You might like
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
javascript新手语法小结
2008/06/15 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
js图片上传的封装代码
2017/08/01 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python3安装Pymongo详细步骤
2017/05/26 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python错误处理操作示例
2018/07/18 Python
python批量图片处理简单示例
2019/08/06 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python中threading开启关闭线程操作
2020/05/02 Python
PyTorch的torch.cat用法
2020/06/28 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
非常详细的C#面试题集
2016/07/13 面试题
学术会议欢迎词
2014/01/09 职场文书
行政专员的岗位职责
2014/03/10 职场文书
学习经验交流会主持词
2014/04/01 职场文书
关于责任的演讲稿
2014/05/20 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
恰同学少年观后感
2015/06/08 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS