VML简单封装

最新推荐文章于 2021-10-30 18:31:06 发布

daodfs1

最新推荐文章于 2021-10-30 18:31:06 发布

阅读量108

点赞数

分类专栏：前端文章标签： vml 封装 js javascript 前端

本文链接：https://blog.csdn.net/daodfs111/article/details/105417840

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

兼容说明

兼容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);
    }
}

daodfs1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VML简单封装

目录兼容说明封装代码使用示例兼容说明兼容IE6-IE8封装代码(function(win, doc){ win.vmlEnable = (function () {return function () {return !+"\v1";}})(); if (!win.vmlEnable() || win.sunuiVml) {return;} win.sunuiVml...
复制链接

扫一扫

专栏目录