forked from RubyLouvre/mass-Framework
/
css_fix.js
153 lines (152 loc) · 7.3 KB
/
css_fix.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
//=========================================
// 样式补丁模块
//==========================================
define("css_fix", !!document.dispatchEvent, ["node"], function($) {
var adapter = $.cssHooks = {},
ie8 = !!window.XDomainRequest,
rfilters = /[\w\:\.]+\([^)]+\)/g,
rnumnonpx = /^-?(?:\d*\.)?\d+(?!px)[^\d\s]+$/i,
rposition = /^(top|right|bottom|left)$/,
salpha = "DXImageTransform.Microsoft.Alpha",
border = {
thin: ie8 ? '1px' : '2px',
medium: ie8 ? '3px' : '4px',
thick: ie8 ? '5px' : '6px'
};
$.getStyles = function(node) {
return node.currentStyle;
};
adapter["_default:get"] = function(node, name, styles) {
//取得精确值，不过它有可能是带em,pc,mm,pt,%等单位
var currentStyle = styles || node.currentStyle;
var ret = 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 = 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 (currentStyle[name] === "none") {
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, currentStyle) {
var 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 ? filter + "," : "") + "alpha(opacity=" + value + ")");
}
};
/**========================= 处理 user-select =========================
* auto——默认值，用户可以选中元素中的内容
* none——用户不能选择元素中的任何内容
* text——用户可以选择元素中的文本
* element——文本可选，但仅限元素的边界内(只有IE和FF支持)
* all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
* -moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。
* https://developer.mozilla.org/en-US/docs/CSS/user-select
*/
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) {
case 'IFRAME':
case 'TEXTAREA':
case 'INPUT':
case 'SELECT':
break;
default:
e.setAttribute('unselectable', allow);
}
}
};
//========================= 处理 background-position =========================
adapter["backgroundPosition:get"] = function(node, _, style) {
return style.backgroundPositionX + " " + style.backgroundPositionX;
};
//========================= 处理 rotate =========================
var stransform = "DXImageTransform.Microsoft.Matrix";
adapter.centerOrigin = "margin";
adapter["rotate:set"] = function(node, name, value) {
$._data(node, 'rotate', value);
var matrix = node.filters[stransform];
if (!matrix) {
node.style.filter += "progid:" + stransform + "(M11=1,M12=1,M21=1,M22=1,sizingMethod='auto expand')";
matrix = node.filters[stransform];
}
var _rad = value * Math.PI / 180,
costheta = Math.cos(_rad),
sintheta = Math.sin(_rad);
matrix.M11 = costheta;
matrix.M12 = -sintheta;
matrix.M21 = sintheta;
matrix.M22 = costheta;
name = adapter.centerOrigin;
//可以在这里验证 http://www.useragentman.com/IETransformsTranslator/
//注IE10的IE7-8的兼容模式下无效,需在原生IE6,IE8下试验
node.style[name === 'margin' ? 'marginLeft' : 'left'] = -(node.offsetWidth / 2) + (node.clientWidth / 2) + "px";
node.style[name === 'margin' ? 'marginTop' : 'top'] = -(node.offsetHeight / 2) + (node.clientHeight / 2) + "px";
};
return $;
});
/**
2011.10.21 去掉opacity:setter 的style.visibility处理
2011.11.21 将IE的矩阵滤镜的相应代码转移到这里
2012.5.9 完美支持CSS3 transform 2D
2012.10.25 重构透明度的读写
2012.11.25 添加旋转
CSS3 学习资料 http://demo.doyoe.com/
*/