基於Bootstrap裏面的Button dropdown打造自定義select

時間 2019-12-01

標籤基於 bootstrap 裏面 button dropdown 打造自定義 select 欄目 Bootstarp 简体版

原文原文鏈接

最近工做很是的忙，在對一個系統進行改版。項目後臺是MVC1.0開發的，可是前端部分已經改過幾個版本，而已以前的設計師很強大，又作設計又作前端開發。而已很時尚和前沿，使用了一直都很熱門的Bootstrap工具包，有不少把它定義爲Web前端CSS框架。說實話，以前只知道它是Twitter公司出品，界面作的比較好看。可是沒有在實際項目中使用，以前公司新來的同事會這個，準備在公司官網項目中使用，由於我不會，而已Leader對這個也不感冒，因此就沒有用。而已她說配合Less一塊兒作項目，能夠提升開發效率，而已能夠把系統作的更漂亮和美觀，而已對自適應設計支持比較好。javascript

項目需求是將HTML原生的select標籤替換爲下圖所示的下拉框效果。我通常看到這種需求，要改變原生的html標籤，就不太喜歡弄。雖然也知道經過ui和li標籤，加上Javascript代碼能夠實現和select同樣的功能，可是以前也沒有嘗試去寫過，到時bug和瀏覽器兼容性有問題，和PM溝通，是否是不要改這個select，就用原生的select，PM說是爲減低用戶干擾，讓用戶不要太在乎這個選擇項。我以爲也是這個道理，首先長的不想select那麼誇張，其次那個下拉箭頭有點小，用戶也不會太刻意去點擊。其實點擊那個文字也是會把下面下拉列表打開的。css

(HTML原生select標籤) (最終效果圖)html

select原始功能是能夠點擊右側的下拉箭頭能夠打開下拉列表，給用戶選擇。用戶選擇一個選項，文本框裏面的值要變成對應的option的內容，而且能夠獲取到option的value值。另一個很重要的功能是option有一個selected屬性。若是某個option有selected=」selected」，那麼下拉框默認會選中當前這個option。前端

Bootstrap提供Button Dropdown是爲了來作漂亮的菜單，壓根不是想作select的功能。當我搜索看到它時，我還覺得Bootstrap能夠提供相似button dropdown樣式的select組件。不過我是妄想，沒有這個組件，必須組件實現。其實有過用ul和li寫select標籤的經驗，寫這個也不是很困難。html5

<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裏面的樣式，因此咱們須要在這個頁面單獨放一些樣式。java

<!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的效果。可是我改過以後，仍是出現了。明天繼續查找一下。jquery

添加1行樣式覆蓋，bootstrap.css裏面自己的樣式。web

<style type="text/css"> .btn-group.open .dropdown-toggle { -webkit-box-shadow:none; box-shadow:none; } </style>

注意事項：在實例化的過程當中，咱們傳入的是一個jQuery選擇器的對象，因此若是一個頁面有不少自定義的dropdown，會使用類別。那在實例化的過程要修改一下代碼哦！bootstrap

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。