mass Framework css模块 v4

    if ( win ) {

                    win.scrollTo(

                        !top ? val : $( win ).scrollLeft(),

                        top ? val : $( win ).scrollTop()

                        );

                } else {

                    this[ method ] = val;

                }

            });

        };

    });

    var pseudoAdapter = window.VBArray && $.query && $.query.pseudoAdapter

    if(pseudoAdapter){

        pseudoAdapter.hidden = function( el ) {

            return el.type === "hidden" || $.css( el, "display") === "none" ;

        }

    }

 

    function getWindow( node ) {

        return $.type(node,"Window") ?   node : node.nodeType === 9 ? node.defaultView || node.parentWindow : false;

    } ;

});

css模块依赖于node模块的cssName与cssMap，它们是框架支持CSS3新样式的关键。

css_fix模块源码（它是用于对旧式IE的支持——IE6-8）

?

//=========================================

//  样式补丁模块

//==========================================

define("css_fix", !!top.getComputedStyle, function(){

    $.log("已加载css_fix模块");

    var adapter = $.cssAdapter = {},

    ie8 = !!top.XDomainRequest,

    rfilters = /[\w\:\.]+\([^)]+\)/g,

    salpha = "DXImageTransform.Microsoft.Alpha",

    rnumnonpx = /^-?(?:\d*\.)?\d+(?!px)[^\d\s]+$/i,

    rposition = /^(top|right|bottom|left)$/,

    border = {

        thin:   ie8 ? '1px' : '2px',

        medium: ie8 ? '3px' : '4px',

        thick:  ie8 ? '5px' : '6px'

    };

    adapter[ "_default:get" ] = function(node, name){

        //取得精确值，不过它有可能是带em,pc,mm,pt,%等单位

        var ret = node.currentStyle[name];

        if (( rnumnonpx.test(ret) && !rposition.test(ret))) {

            //①，保存原有的style.left, runtimeStyle.left,

            var style = node.style, left = style.left,

            rsLeft =  node.runtimeStyle.left ;

            //②由于③处的style.left = xxx会影响到currentStyle.left，

            //因此把它currentStyle.left放到runtimeStyle.left，

            //runtimeStyle.left拥有最高优先级，不会style.left影响

            node.runtimeStyle.left = node.currentStyle.left;

            //③将精确值赋给到style.left，然后通过IE的另一个私有属性 style.pixelLeft

            //得到单位为px的结果；fontSize的分支见http://bugs.jquery.com/ticket/760

            style.left = name === 'fontSize' ? '1em' : (ret || 0);

            ret = style.pixelLeft + "px";

            //④还原 style.left，runtimeStyle.left

            style.left = left;

            node.runtimeStyle.left = rsLeft;

        }

        if( ret == "medium" ){

            name = name.replace("Width","Style");

            //border width 默认值为medium，即使其为0"

            if(arguments.callee(node,name) == "none"){

                ret = "0px";

            }

        }

        //处理auto值

        if(rposition.test(name) && ret === "auto"){

            ret = "0px";

        }

        return ret === "" ? "auto" : border[ret] ||  ret;

    }

    //=========================　处理　opacity　=========================

    adapter[ "opacity:get" ] = function( node ){

        //这是最快的获取IE透明值的方式，不需要动用正则了！

        var alpha = node.filters.alpha || node.filters[salpha],

        op = alpha ? alpha.opacity: 100;

        return ( op /100 )+"";//确保返回的是字符串

    }

    //http://www.freemathhelp.com/matrix-multiplication.html

    adapter[ "opacity:set" ] = function( node, name, value ){

        var currentStyle = node.currentStyle, style = node.style;

        if(isFinite(value)){//"xxx" * 100 = NaN

            return

        }

        value = (value > 0.999) ? 100: (value < 0.001) ? 0 : value * 100;

        if(!currentStyle.hasLayout)

            style.zoom = 1;//让元素获得hasLayout

        var filter = currentStyle.filter || style.filter || "";

        //http://snook.ca/archives/html_and_css/ie-position-fixed-opacity-filter

        //IE78的透明滤镜当其值为100时会让文本模糊不清

        if(value == 100  ){  //IE78的透明滤镜当其值为100时会让文本模糊不清

            // var str =  "filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) Chroma(Color='#FFFFFF')"+

            //   "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',"+

            //   "M11=1.5320888862379554, M12=-1.2855752193730787,  M21=1.2855752193730796, M22=1.5320888862379558)";

            value = style.filter = filter.replace(rfilters, function(a){

                return /alpha/i.test(a) ? "" : a;//可能存在多个滤镜，只清掉透明部分

            });

            //如果只有一个透明滤镜 就直接去掉

            if(value.trim() == "" && style.removeAttribute){

                style.removeAttribute( "filter" );

            }

            return;

        }

        //如果已经设置过透明滤镜可以使用以下便捷方式

        var alpha = node.filters.alpha || node.filters[salpha];

 

        if( alpha ){

            alpha.opacity = value ;

        }else{

            style.filter  += (filter ? "," : "")+ "alpha(opacity="+ value +")";

        }

    }

    //=========================　处理　user-select　=========================

    //auto——默认值，用户可以选中元素中的内容

    //none——用户不能选择元素中的任何内容

    //text——用户可以选择元素中的文本

    //element——文本可选，但仅限元素的边界内(只有IE和FF支持)

    //all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。

    //-moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。

    adapter[ "userSelect:set" ] = function( node, name, value ) {

        var allow = /none/.test(value) ? "on" : "",

        e, i = 0, els = node.getElementsByTagName('*');

        node.setAttribute('unselectable', allow);

        while (( e = els[ i++ ] )) {

            switch (e.tagName.toLowerCase()) {

                case 'iframe' :

                case 'textarea' :

                case 'input' :

                case 'select' :

                    break;

                default :

                    e.setAttribute('unselectable', allow);

            }

        }

    };

    //=========================　处理　background-position　=========================

    adapter[ "backgroundPosition:get" ] = function( node, name, value ) {

        var style = node.currentStyle;

        return style.backgroundPositionX +" "+style.backgroundPositionX

    };

 

});

github地址

---

做个小广告：

mass Framework是一个模块化的jQuery式框架，拥有jQuery 90%的常用方法，在语言处理，类，特效等方面都做了大量增强，是面向大规模开发的框架。现在jQuery也在做瘦身，把许多不常用的方法废弃掉，这样一来，大家在DOM处理上的API基本一致。mass Framework预计在年底完成升级，完成自己的MVVM框架与一个支持IE6的bootstrap式UI库。

 

 

标签: javascript, mass