基于Bootstrap里面的Button dropdown打造自定義select
最近工作非常的忙，在對一個系統(tǒng)進行改版。項目后臺是MVC1.0開發(fā)的，但是前端部分已經(jīng)改過幾個版本，而已之前的設(shè)計師很強大，又做設(shè)計又做前端開發(fā)。而已很時尚和前沿，使用了一直都很熱門的Bootstrap工具包，有很多把它定義為Web前端CSS框架。說實話，之前只知道它是Twitter公司出品，界面做的比較好看。但是沒有在實際項目中使用，之前公司新來的同事會這個，準備在公司官網(wǎng)項目中使用，因為我不會，而已Leader對這個也不感冒，所以就沒有用。而已她說配合Less一起做項目，可以提高開發(fā)效率，而已可以把系統(tǒng)做的更漂亮和美觀，而已對自適應(yīng)設(shè)計支持比較好。
項目需求是將HTML原生的select標簽替換為下圖所示的下拉框效果。我一般看到這種需求，要改變原生的html標簽，就不太喜歡弄。雖然也知道通過ui和li標簽，加上Javascript代碼可以實現(xiàn)和select一樣的功能，但是之前也沒有嘗試去寫過，到時bug和瀏覽器兼容性有問題，和PM溝通，是不是不要改這個select，就用原生的select，PM說是為減低用戶干擾，讓用戶不要太在意這個選擇項。我覺得也是這個道理，首先長的不想select那么夸張，其次那個下拉箭頭有點小，用戶也不會太刻意去點擊。其實點擊那個文字也是會把下面下拉列表打開的。
image(HTML原生select標簽) image(最終效果圖)
(HTML原生select標簽)
select原始功能是可以點擊右側(cè)的下拉箭頭可以打開下拉列表，給用戶選擇。用戶選擇一個選項，文本框里面的值要變成對應(yīng)的option的內(nèi)容，并且可以獲取到option的value值。另外一個很重要的功能是option有一個selected屬性。如果某個option有selected=”selected”，那么下拉框默認會選中當前這個option。
Bootstrap提供Button Dropdown是為了來做漂亮的菜單，壓根不是想做select的功能。當我搜索看到它時，我還以為Bootstrap可以提供類似button dropdown樣式的select組件。不過我是妄想，沒有這個組件，必須組件實現(xiàn)。其實有過用ul和li寫select標簽的經(jīng)驗，寫這個也不是很困難。
<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的基本代碼。因為它本身會應(yīng)用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>
點擊過程中會出現(xiàn)一個背景。通過Chrome查看元素，是寫box-shodow的效果。但是我改過之后，還是出現(xiàn)了。明天繼續(xù)查找一下。
添加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官網(wǎng) http://getbootstrap.com/components/#btn-dropdowns
- 詳解bootstrap用dropdown-menu實現(xiàn)上下文菜單
- bootstrap如何讓dropdown menu按鈕式下拉框長度一致
- Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼
- Bootstrap CSS組件之下拉菜單(dropdown)
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- JQuery組件基于Bootstrap的DropDownList（完整版）
- 創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
- Bootstrap模塊dropdown實現(xiàn)下拉框響應(yīng)
- JS組件Bootstrap dropdown組件擴展hover事件
- Bootstrap 下拉菜單.dropdown的具體使用方法
相關(guān)文章
這篇文章主要為大家詳細介紹了Echarts實現(xiàn)多條折線可拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript原型繼承_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細介紹了JavaScript原型繼承的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)批量重命名文件,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學(xué)習一下2024-12-12
javascript while語句和do while語句的區(qū)別分析
這篇文章通過實例代碼較詳細的給大家介紹了javascript while語句和do while語句的區(qū)別，感興趣的朋友一起看看吧2007-12-12
大多數(shù)開發(fā)者都了解這兩個?Es6?中的新增內(nèi)置模塊，可是你也許并不清楚為什么?Proxy?一定要配合?Reflect?使用，本文主要介紹了js中為什么Proxy一定要配合Reflect使用，感興趣的可以了解一下2022-04-04
javascript圓盤抽獎程序?qū)崿F(xiàn)原理和完整代碼例子
這篇文章主要介紹了javascript圓盤抽獎程序?qū)崿F(xiàn)原理和完整代碼例子,需要的朋友可以參考下2014-06-06
這款時世界末日倒計時源代碼，程序上有JS控制器,是用于網(wǎng)頁中顯示的倒計時器，自己可以設(shè)定世界末日的開始時間，網(wǎng)頁倒計時世界末日源代碼直接復(fù)制就可以用2012-12-12
這篇文章主要介紹了ES6 Object.assign()的用法及其使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-01-01
ES6標準新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。那么下面這篇文章主要給大家介紹了箭頭函數(shù)中this的相關(guān)資料，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
下面小編就為大家?guī)硪黄赽ootstrap-datetimepicker.js不支持IE8的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11