基于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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
javascript显示选择目录对话框的代码
Nov 10 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
js里的prototype使用示例
Nov 19 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP打印输出函数汇总
2016/08/28 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python实现识别相似图片小结
2016/02/22 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
半年思想汇报
2013/12/30 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
收银员岗位职责
2014/02/07 职场文书
公司业务员岗位职责
2014/03/18 职场文书
中考标语大全
2014/06/05 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014年保密工作总结
2014/11/22 职场文书
2019个人工作总结
2019/06/21 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
实操Python爬取觅知网素材图片示例
2021/11/27 Python