I've been very busy with work recently and am revising a system. The project background was developed by MVC1.0, but the front-end part has been modified several versions, and the previous designers are very powerful, and they are both designing and front-end development. It is already very fashionable and cutting-edge, and uses the always popular Bootstrap toolkit, and there are many that define it as a Web front-end CSS framework. To be honest, I only knew before that it was produced by Twitter and the interface was better. But it was not used in actual projects. My new colleagues from the company did this before and planned to use it in the company's official website project. Because I don't know, the leader is not interested in this, so it is useless. She said that cooperating with Less to work on projects can improve development efficiency, and can make the system more beautiful and beautiful, but it also supports adaptive design better.
The project requirement is to replace the HTML native select tag with the drop-down box effect shown in the figure below. I usually see this kind of demand. If I want to change the native html tags, I don’t like it. Although I also know that the same functions as select can be achieved through the ui and li tags and Javascript code, I have never tried to write them before. If there is any problem with the compatibility of the bug and browser, I will communicate with PM. Should I not change this select? I will use the native select. PM said that it is to reduce user interference and let users not pay too much attention to this option. I think this is the same. First of all, it doesn’t look as exaggerated as the select. Secondly, the drop-down arrow is a bit small, so the user won’t click too deliberately. In fact, clicking on that text will also open the drop-down list below.
image(HTML native select tag) image(final rendering)
(HTML native select tag)
The original function of select is to click the drop-down arrow on the right to open the drop-down list and give the user a selection. When the user selects an option, the value in the text box should be changed to the corresponding option content, and the value value of the option can be obtained. Another very important function is that option has a selected property. If an option has selected="selected", the drop-down box will select the current option by default.
Bootstrap provides Button Dropdown to make beautiful menus, and it is not a function to choose. When I searched and saw it, I thought Bootstrap could provide a select component similar to the button dropdown style. But I am delusional. Without this component, the component must be implemented. In fact, I have had experience writing select tags with ul and li, so it is not very difficult to write this.
<div style="margin-top:30px;"><a style="font-size:14px;" type="button" id="dropdownMenu1" data-toggle="dropdown">Text 1<span></span></a><ul 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>
This is the basic code of Button Dropdown. Because it will apply the css style itself, we need to change the style in bootstrap.min.css later, so we need to put some styles on this page.
<!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>Original select tag</p><select><option value="1">Text 1</option><option value="2">Text 2</option><option value="3">Text 3</option></select><div id="dropdown1"" style="margin-top:30px;"><div><a style="font-size:14px;" type="button" id="dropdownMenu1" data-toggle="dropdown"><!--After selecting the option, the selected value should be displayed here, similar to the text box in the original select--> <span>Text 1</span><span></span></a><ul 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><!-- 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;//Default is -1;this.initEvents();}customDropDown.prototype={initEvents:function(){var obj=this;//This method can be not written because the click event is captured by Bootstrap itself. The drop-down list below is displayed obj.dropdown.on("click",function(event){$(this).toggleClass("active");});//Click the options of the drop-down list 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>A background will appear during the click process. Viewing elements through Chrome is the effect of writing box-shodow. But after I corrected it, it still appeared. Let's continue searching tomorrow.
Add 1 line of style overlay, bootstrap.css inside the style itself.
<style type="text/css">.btn-group.open .dropdown-toggle{-webkit-box-shadow:none;box-shadow:none;}</style>Note: During the instantiation process, we pass in an object of a jQuery selector, so if a page has many custom dropdowns, the category will be used. Then you need to modify the code during the instantiation process!
Demo demo address: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap CDN http://www.bootstrapcdn.com/ Although Baidu also has it, the version is a bit old and will not be updated.
Bootstrap official website http://getbootstrap.com/components/#btn-dropdowns