源码学习-metronic

判断浏览器

isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);
isIE9 = !! navigator.userAgent.match(/MSIE 9.0/);
isIE1 = !! navigator.userAgent.match(/MSIE 10/);

IE浏览器中resize事件执行多次的解决方法

$(window).resize(function() {
    if (resize) {
        clearTimeout(resize);
    }   
    resize = setTimeout(function() {
        console.log('resize');
        handleResponsive();    
    }, 50); // wait 50ms until window resize finishes.
});

提取URL中某个参数

function GetArgsFromHref(sHref, sArgName) 
{ 
    var args = sHref.split("?"); 
    var retval = "";
    if(args[0] == sHref) /*参数为空*/ 
    { 
    return retval; /*无需做任何处理*/ 
    } 
    var str = args[1]; 
    args = str.split("&"); 
        console.log(args);
    for(var i = 0; i < args.length; i ++) 
    { 
    str = args[i]; 
    var arg = str.split("="); 
    if(arg.length <= 1) continue; 
    if(arg[0] == sArgName) retval = arg[1]; 
    } 
    return retval; 
}
/*
使用场景
提取url中的name参数值
*/
var url = window.loaction.href;
GetArgsFormHref(str,"name");

通知IE以最高级别的使用模式渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge">

那些css

• CSS :before 、CSS :after 伪元素

  content:attr(data-icon);
  }

• CSS2 听觉属性
  居然之前都没有听说这些css属性。。。小菜鸟啊小菜鸟，飞飞飞~~~

听觉样式表可把语音合成与音响效果相组合，使用户可以听到信息，而无需进行阅读。

如：

/*设置或检索声音是否给出。*/
.unspeak{ speak: none;}

• 字体抗锯齿

-webkit-font-smoothing：antialiased；
-moz-osx-font-smoothing: grayscale;

• webkit 支持overflow区域滚动条样式

    /*滚动条整体部分*/
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    /*滚动条外层轨道部分*/
    ::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.1);
        -webkit-border-radius: 5px;
    }
    /*滚动条滑块部分*/
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
        -webkit-border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

• pointer-events

Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit.
pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

touch事件区别应用于IE和Webkit内核的浏览器（jquery-slimscroll.js）

 if ('ontouchstart' in window && window.navigator.msPointerEnabled) {
              me.css("-ms-touch-action", "none");//禁止触摸缩放
}

是否支持touch

isTouchDevice = function(){
    try {
            document.createEvent("TouchEvent");
            return true;
        } catch (e) {
            return false;
        }
}

新的 image-set CSS 函数

@media only screen and (max-width: 480px) {
.hero-img {
background: url(gull-720x225.jpg); /*fallback for user
agents that don't support
image-set.*/
background: -Webkit-image-set(
url(gull-360x112.jpg) 1x,
url(gull-720x225.jpg) 1.5x,
url(gull-720x225.jpg) 2x
);
}
}

等于

@media only screen and (min-device-pixel-ratio : 1.5) {
.hero-img {
background: url(gull-720x225.jpg);
}
}