Bootstrap Flat UI的select下拉框显示问题解决

bootstrap中文网(http://www.bootcss.com/)里推荐项目有Flat
UI(http://www.bootcss.com/p/flat-ui/),非常漂亮,而且少有的竟然具有select下拉框。

<!DOCTYPE html> 
<html lang=”en”><!–意思是告诉浏览器我的定义语言为英语–> 
    <head> 
        <meta charset=”utf-8″><!–意思是告诉浏览器我网页的编码信息是UTF-8–> 
      <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>   
        <meta name=”viewport” content=”width=device-width, initial-scale=1″>
       <!–与移动端屏幕适配–>
        <title>Bootstrap的HTML标准模板</title>    
        <!– Bootstrap –> 
        <link href=”css/bootstrap.min.css” rel=”stylesheet”> 
        <!–你自己的样式文件 –> 
        <link href=”css/your-style.css” rel=”stylesheet”>         
        <!– 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 –> 
        <!–[if lt IE 9]> 
        <script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt
        <script src=”https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt
        <![mgm娱乐场,endif]–> 
    </head> 
    <body> 
        <h1>Hello, world!</h1> 
         
        <!– 如果要使用Bootstrap的js插件,必须先调入jQuery –> 
        <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt
        <!– 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 –> 
        <script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;  
    </body> 
</html> 
 

mgm娱乐场 1

以下是名词解释:

我直接打开example(Flat-UI-master/docs/examples/select.html)都是可以的,但是放到我的网站里则不行。

content=”IE=edge” : 永远以最新的IE版本模式来显示网页

使用chrome调试经过分析,原因是:

我们来简单解释一下其中几条的重要代码:

$('[data-toggle="select"]').select2();

bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可。

这行代码读不到,只要引入即可。select2是Flat
UI的函数,在flat-ui.js中定义:

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    $.fn.select2 = function () {          var args = Array.prototype.slice.call(arguments, 0),             opts,             select2,             method, value, multiple,             allowedMethods = ["val", "destroy", "opened", "open", "close", "focus", "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.length === 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;     };

同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码:

不过ie8还是不行,原因还在核查中。
经过一上午研究,发现flat
ui还是不好用,我还得需要花时间解决ie8的问题,但是我的时间并不充裕。看来只能放弃,还是沿用jQuery
ui更合适一些。

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

总结一些flat ui的select使用方法:

 

相关文章