VML简单封装
目錄
- 兼容說明
- 封裝代碼
- 使用示例
兼容說明
兼容IE6-IE8
封裝代碼
(function(win, doc){win.vmlEnable = (function () {return function () {return !+"\v1";}})();if (!win.vmlEnable() || win.sunuiVml) {return;}if (!doc.namespaces["sunui-vml"]){doc.createStyleSheet().addRule(".sunui-vml", "behavior:url(#default#VML);display:inline-block;");doc.namespaces.add("sunui-vml", "urn:schemas-microsoft-com:vml");}win.sunuiVml = function(name){return new SunuiVml().create(name || "rect");};function SunuiVml () {}SunuiVml.prototype = {create : function(name){this.node = doc.createElement('<sunui-vml:' + name + ' class="sunui-vml">');return this;},appendTo: function(parent){if(this.node && parent.nodeType === 1){parent.appendChild(this.node);}return this;},attr : function(bag){for(var i in bag){if(bag.hasOwnProperty(i)){this.node.setAttribute(i,bag[i])}}return this;},css: function(bag){for(var i in bag){if(bag.hasOwnProperty(i)) {if (i === 'opacity') {this.node.style.filter = 'alpha(opacity='+ bag[i] * 100 + ')';} else {this.node.style[i] = bag[i];}}}return this;},hasClass: function (cls) {cls = cls || '';if ((cls = cls.replace(/\s/g, '')).length === 0) return false;return new win.RegExp(' ' + cls + ' ').test(' ' + (this.node.className || '').replace(/[\t\r\n]/g, '') + ' ');},addClass: function (cls) {var clss = null;var clazz = null;if (typeof cls === 'function') {cls = cls();}if (!cls) {return this}cls = cls.replace(/(^\s*)|(\s*$)/g, '');if (!cls) {return this}clss = cls.split(/\s+/g);clazz = (this.node.className || '').replace(/(^\s*)|(\s*$)/g, '').replace(/[\t\r\n]/g, '').split(/\s+/g);for (var i = 0; i < clss.length; i++) {if (!this.hasClass(clss[i])) {clazz.push(clss[i])}}this.node.className = clazz.join(" ");return this;},removeClass: function (cls) {var clss = null;var clazz = '';if (typeof cls === 'function') {cls = cls();}if (!cls) {return this}cls = cls.replace(/(^\s*)|(\s*$)/g, '');if (!cls) {return this}clss = cls.split(/\s+/g);clazz = ' ' + this.node.className.replace(/[\t\r\n]/g, '') + ' ';for (var i = 0; i < clss.length; i++) {if (this.hasClass(clss[i])) {while (clazz.indexOf(' ' + clss[i] + ' ') >= 0) {clazz = clazz.replace(' ' + clss[i] + ' ', ' ');}}}clazz = clazz.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');this.node.className = clazz;return this;}} })(window, document);使用示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>IE6-IE8 VML</title> </head> <body style="background: #Fc0e4c"><div id="dd" style="position: relative;width: 200px;height: 100px;border: 1px solid #35FF87"></div> </body> </html> window.onload = function () {if (vmlEnable()) {var re = sunuiVml("roundrect").css({width:"200px",height:"100px", margin: '-1px 0 0 -1px'}).attr({fillcolor:"#FFFF00", filled: true, stroked: true, strokeweight: '1px'}).appendTo(document.getElementById('dd')).css({height: '120px'});re.css({rotation: 30});re.node.innerHTML = '<div style="width: 100px;height: 30px;background: #FF00FF;">測試</div>';sunuiVml("oval").css({position:"relative",left:'5px',top:'20px',width:"12px",height:'12px'}).attr({strokecolor:"blue", filled: false, strokeweight: '1px'}).appendTo(document.body);} }總結
- 上一篇： 逻辑消息树
- 下一篇： angular 架构