Bootstrap Chinese web (http://www.bootcss.com/) Recommended project has flat UI (http://www.bootcss.com/p/flat-ui/), very beautiful, and few unexpectedly have a select drop-down box.
I open example directly (flat-ui-master/docs/examples/select.html) is OK, but put on my website is not.
Using chrome debugging has been analyzed because:
$ (' [data-toggle= ' select '] '). Select2 ();
This line of code cannot be read, as long as it is introduced. Select2 is a function of the flat UI, defined in Flat-ui.js:
$.fn.select2 = function () {var args = Array.prototype.slice.call (arguments, 0), opts, S Elect2, method, value, multiple, Allowedmethods = ["Val", "Destroy", "opened", "open", "close", "FOC US "," isFocused "," Container "," dropdown "," Onsortstart "," Onsortend "," Enable "," Disable "," ReadOnly "," Positiondropdown "," Data "," search "], valuemethods = [" Opened "," isFocused "," Container "," dropdown "], Propertymethods = ["Val", "Data"], Methodsmap = {search: "Externalsearch"}; This.each (function () {if (args.length = = = 0 | | typeof (Args[0]) = = = = "Object") {opts = Args.len Gth = = 0? {}: $.extend ({}, args[0]); Opts.element = $ (this); if (opts.element.get (0). tagname.tolowercase () = = = "Select") {multiple = Opts.element.prop ("multiple"); } else {multiple = Opts.multiple | | false; if ("tags" in opts) {opts.multiple = multiple = true;} } Select2 = multiple? New window. Select2["Class"].multi (): New window. Select2["Class"].single (); Select2.init (opts); } else if (typeof (Args[0]) = = = "string") {if (IndexOf (Args[0], allowedmethods) < 0) { Throw "Unknown Method:" + args[0]; } value = undefined; Select2 = $ (this). Data ("Select2"); if (select2 = = = undefined) return; Method=args[0]; if (method = = = "Container") {value = Select2.container; } else if (method = = = "Dropdown") {value = Select2.dropdown; } else {if (Methodsmap[method]) method = Methodsmap[method]; Value = Select2[method].apply (Select2, Args.slice (1)); } if (IndexOf (Args[0], valuemethods) >= 0 | | (IndexOf (Args[0], propertymethods) >= 0 && args.length = 1)) {return false;//abort the iteration, ready to return first matched value} } else {throw "Invalid arguments to Select2 plugin:" + args; } }); return (value = = undefined)? This:value; };
But IE8 still can't, the reason is still in check.
After a morning study, I found that the flat UI was not good, and I had to take the time to solve the IE8 problem, but I didn't have enough time. It seems that you can only give up or use the jquery UI more appropriately.
Summarize some of the flat UI's Select usage methods:
<!--Loading Bootstrap <link href= "Scripts/flat-ui-master/dist/css/vendor/bootstrap.min.css" rel= " Stylesheet ">--> <!--Loading Flat UI <link href=" Scripts/flat-ui-master/dist/css/flat-ui.css " Rel= "stylesheet" >--> <!--HTML5 Shim, for ie6-8 support of HTML5 elements. All other JS at the end of file. - <!--[if Lt IE 8]> <script src= "Scripts/flat-ui-master/dist/js/vendor/html5shiv.js" >< /script> <script src= "Scripts/flat-ui-master/dist/js/vendor/respond.min.js" ></script> <! [endif]-->
<select data-toggle= "Select" class= "Form-control select Select-danger Mrs MBM" > <option value= "Everyday" &G t; real-time </option> <option value= "Billing" > Billing </option> </select>
<!--jQuery (necessary for Bootstrap ' s JavaScript plugins) <script src= "scripts/flat-ui-master/dist/js/ Vendor/jquery.min.js "></script> <!--Include all compiled plugins (below), or include individual files As needed <script src= "scripts/flat-ui-master/dist/js/flat-ui.js" ></script> <script>$ ( ' [data-toggle= ' select '] '). Select2 ();</script>
Attention:
1, must first introduce the bootstrap, and then introduce the flat UI;
2, [If LT ie 8] The original official is [if LT ie 9], I use IE8 will be guaranteed wrong, need to change to 8, otherwise will error flat-ui-master/dist/js/vendor/respond.min.js denied access;
3, this style is select.html in the style, and I above a little difference;
The source of this article: Ouyida3 's CSDN Blog
2015.3.4
Bootstrap Flat UI's Select drop-down box displays problem resolution