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 )+"
";//确保返回的是字符串
}
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 || "
";
//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
};
});
|
做个小广告：
mass Framework是一个模块化的jQuery式框架，拥有jQuery 90%的常用方法，在语言处理，类，特效等方面都做了大量增强，是面向大规模开发的框架。现在jQuery也在做瘦身，把许多不常用的方法废弃掉，这样一来，大家在DOM处理上的API基本一致。mass Framework预计在年底完成升级，完成自己的MVVM框架与一个支持IE6的bootstrap式UI库。
标签:
javascript,
mass