Anymoore

标签： 技术

  • 通过JS在IE中使用HTML5元素

    通过JS 创建此对于IE未知的HTML5元素,再在CSS定义样式属性：

    document.createElement(newElementName)

    具体实现：

    <html>
    <head>
    <style>blah { color: red; }</style>

    <script>document.createElement("blah")</script>
    </head>
    <body>
    <blah>Hello!</blah>
    </body>
    </html>

    更多详细请参考：《HTML5 Shiv》

    批量引入新元素[怿飞]：

    (function(){
        // from: http://dean.edwards.name/weblog/2007/03/sniff/
        if(!/*@cc_on!@*/0) return;

        var html5= “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,

    figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’);
        for(var i = 0, len = html5.length; i < len; i++ )
            document.createElement(html5[i]);
        }
    })();

    很简单，很省事~

  • IE版本判断方法的总结

        做页面设计时，由于IE版本的不同，经常会遇到兼容性问题，有时确实很头疼，在这次专题中用到了HTML注释，顺便汇总一下判断IE版本的一些方法。

    一，HTML注释

        <!–[if XXX]>
    这里是正常的html代码
    <![endif]–>
    这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义：
    <!–[if IE]> / 如果浏览器是IE /
    <!–[if IE 5]> / 如果浏览器是IE 5 的版本 /
    <!–[if IE 6]> / 如果浏览器是IE 6 的版本 /
    <!–[if IE 7]> / 如果浏览器是IE 7 的版本 /

    几个逻辑判断参数：

    lte，lt，gte，gt，!
    lte：就是Less than or equal to的简写，也就是小于或等于的意思。
    lt ：就是Less than的简写，也就是小于的意思。
    gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
    gt ：就是Greater than的简写，也就是大于的意思。
    ! ：自然不用说了

    示例：

    <!– 默认先调用A.css样式表 –>
    <link rel=”stylesheet” type=”text/css” href=”A.css” />
    <!–[if !IE]>
    <!– 非IE下调用B.css样式表 –>
    <link rel=”stylesheet” type=”text/css” href=”B.css” />
    <![endif]–>
    <!–[if lt IE 6]>
    <!– 如果IE浏览器版本小于6,调用C.css样式表 –>
    <link rel=”stylesheet” type=”text/css” href=”C.css” />
    <![endif]–>

    另外，需要额外注意的是，条件注释是在IE5.0以后才被支持的。
    二，利用JS判断

    1.跳转

    <script language=”javascript”>
    function getIE(){
    if(navigator.appName == “Microsoft Internet Explorer”)
    {
    if(navigator.appVersion.match(/7./i)==’7.’)
    {
    //是IE7，不跳转
    }else{
    //不是，跳转
    location.href=’http://www.anymoore.com‘;
    }
    }
    }
    </script>

    <input type=”button” name=”getIEver” value=”getIEver” onclick=”getIE();” />

    2.HTML内嵌

    <span id=”cssIE”></span>
    <script>
    if(navigator.userAgent.indexOf(“MSIE”)>0){ //是否是IE浏览器
    if(navigator.userAgent.indexOf(“MSIE 6.0″)>0){ //6.0 使用A.CSS
    cssIE.innerHTML='<link href=”A.css” rel=”stylesheet” type=”text/css” >’
    }
    if(navigator.userAgent.indexOf(“MSIE 7.0″)>0){//7.0 使用B.CSS
    cssIE.innerHTML='<link href=”B.css” rel=”stylesheet” type=”text/css” >’
    }
    }else{//否则使用C.CSS 还有具体的浏览器 你可以用navigator.userAgent 去获取信息 具体使用 看你自己
    cssIE.innerHTML='<link href=”C.css” rel=”stylesheet” type=”text/css” >’
    }
    </script>

    就到这，希望能帮上你。

  • 使用多个JS框架时产生冲突解决方法

      在做某个专题的时候,用到了mootool和jQuery两个时下流行的框架,mootool实现highslide效果,jQuery用来生成facebook Wall的Ajax效果,结果无论怎么调整,鱼和熊掌都没法兼得,只能择其一,我心不甘,查!

       试了不少方法,不管用,像这个:

    <script type=”text/javascript”>
          jQuery.noConflict();
    </script>

    下面是最后采用的,通过测试完美解决.

    <script src=”http://jquery.com/src/latest/”></script>

    <script type=”text/javascript”>

    JQ = $;  //rename $ function

    </script>

    <script src=”mootool.js”></script>

           即将$重命名为JQ,注意后面使用”$”都需要替换为”JQ”,同时注意调用顺序,先jQuery在mootool.

           同时这个方法还可以解决jQuery与prototype等框架的冲突问题.