基于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 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
微信小程序 navbar实例详解
May 11 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
yii上传文件或图片实例
2014/04/01 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js实现时间日期校验
2020/05/26 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python ldap实现登录实例代码
2016/09/30 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
python切割图片的示例
2020/11/12 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
公司授权委托书
2014/10/17 职场文书
股份转让协议书范本
2015/01/27 职场文书
2015年教师节慰问信
2015/03/23 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js