diff --git a/dist/base.js b/dist/base.js
index 681d77f9a..a8846c235 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -420,7 +420,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -736,14 +736,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -765,7 +765,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -776,11 +776,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -1010,7 +1010,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -2504,14 +2504,17 @@ BI.PartTree = BI.inherit(BI.AsyncTree, {
     }
 });
 
-BI.shortcut("bi.part_tree", BI.PartTree);BI.Resizers = new BI.ResizeController();
-BI.Layers = new BI.LayerController();
-BI.Maskers = new BI.MaskersController();
-BI.Bubbles = new BI.BubblesController();
-BI.Tooltips = new BI.TooltipsController();
-BI.Popovers = new BI.PopoverController();
-BI.Broadcasts = new BI.BroadcastController();
-BI.StyleLoaders = new BI.StyleLoaderManager();/**
+BI.shortcut("bi.part_tree", BI.PartTree);BI.prepares.push(function () {
+    BI.Resizers = new BI.ResizeController();
+    BI.Layers = new BI.LayerController();
+    BI.Maskers = new BI.MaskersController();
+    BI.Bubbles = new BI.BubblesController();
+    BI.Tooltips = new BI.TooltipsController();
+    BI.Popovers = new BI.PopoverController();
+    BI.Broadcasts = new BI.BroadcastController();
+    BI.StyleLoaders = new BI.StyleLoaderManager();
+});
+/**
  * CollectionView
  *
  * Created by GUY on 2016/1/15.
@@ -3153,7 +3156,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         // BI-10290 公式combo双击公式内容会收起
         if ((this.element.find(e.target).length > 0 && e.type !== "mousewheel")
             || (this.popupView && this.popupView.element.find(e.target).length > 0)
-            || e.target.className === "CodeMirror-cursor" || $(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
+            || e.target.className === "CodeMirror-cursor" || BI.Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
             return;
         }
         var isHide = this.options.hideChecker.apply(this, [e]);
@@ -3174,7 +3177,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         }
         this.element.removeClass(this.options.comboClass);
 
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
         this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW);
     },
 
@@ -3187,8 +3190,8 @@ BI.Combo = BI.inherit(BI.Widget, {
         this.adjustHeight();
 
         this.element.addClass(this.options.comboClass);
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-        $(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
         this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW);
     },
 
@@ -3356,7 +3359,7 @@ BI.Combo = BI.inherit(BI.Widget, {
     },
 
     destroy: function () {
-        $(document).unbind("mousedown." + this.getName())
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName())
             .unbind("mousewheel." + this.getName())
             .unbind("mouseenter." + this.getName())
             .unbind("mousemove." + this.getName())
@@ -5093,7 +5096,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -5123,7 +5126,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -5132,7 +5135,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -5659,7 +5662,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -8804,9 +8807,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -8816,7 +8819,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -8956,7 +8959,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -9008,7 +9011,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
@@ -9639,7 +9642,7 @@ BI.shortcut("bi.checkbox", BI.Checkbox);/**
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/dist/bundle.js b/dist/bundle.js
index 1cac4b2c2..a953da1d8 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -21486,10 +21486,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -21864,6 +21864,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -26023,7 +26038,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         });
     }
 });// 工程配置
-(function () {
+BI.prepares.push(function () {
     // 注册布局
     var isSupportFlex = BI.isSupportCss3("flex");
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
@@ -26069,7 +26084,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         return ob;
 
     });
-}());/**
+});/**
  * guy
  * 控制器
  * Controller层超类
@@ -26412,7 +26427,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -26629,7 +26644,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -26695,7 +26710,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -26834,10 +26849,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -28006,7 +28021,7 @@ BI.extend(BI.DOM, {
     },
 
     isExist: function (obj) {
-        return $("body").find(obj.element).length > 0;
+        return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
     },
 
     // 预加载图片
@@ -28182,7 +28197,7 @@ BI.extend(BI.DOM, {
     },
 
     getTextSizeWidth: function (text, fontSize) {
-        var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
+        var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo($("body"));
 
         if (fontSize == null) {
             fontSize = 12;
@@ -28200,11 +28215,11 @@ BI.extend(BI.DOM, {
     // 获取滚动条的宽度
     getScrollWidth: function () {
         if (this._scrollWidth == null) {
-            var ul = $("<div>").width(50).height(50).css({
+            var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
                 position: "absolute",
                 top: "-9999px",
                 overflow: "scroll"
-            }).appendTo($("body"));
+            }).appendTo("body");
             this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
             ul.destroy();
         }
@@ -28214,7 +28229,7 @@ BI.extend(BI.DOM, {
     getImage: function (param, fillStyle, backgroundColor) {
         var canvas = document.createElement("canvas");
         var ratio = 2;
-        $("body").append(canvas);
+        BI.Widget._renderEngine.createElement("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w * ratio;
         canvas.height = 24 * ratio;
@@ -28224,7 +28239,7 @@ BI.extend(BI.DOM, {
         ctx.fillStyle = fillStyle || "#3D4D66";
         ctx.textBaseline = "middle";
         ctx.fillText(param, 6 * ratio, 12 * ratio);
-        $(canvas).destroy();
+        BI.Widget._renderEngine.createElement(canvas).destroy();
         var backColor = backgroundColor || "#EAF2FD";
         // IE可以放大缩小所以要固定最大最小宽高
         return {
@@ -30230,7 +30245,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -30239,7 +30254,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30338,7 +30353,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -30346,7 +30361,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30615,7 +30630,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -30624,7 +30639,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -31256,7 +31271,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31310,7 +31325,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -31384,7 +31399,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -32480,14 +32495,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -33124,7 +33139,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -35635,7 +35650,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -35951,14 +35966,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -35980,7 +35995,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -35991,11 +36006,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -36225,7 +36240,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -37719,14 +37734,17 @@ BI.PartTree = BI.inherit(BI.AsyncTree, {
     }
 });
 
-BI.shortcut("bi.part_tree", BI.PartTree);BI.Resizers = new BI.ResizeController();
-BI.Layers = new BI.LayerController();
-BI.Maskers = new BI.MaskersController();
-BI.Bubbles = new BI.BubblesController();
-BI.Tooltips = new BI.TooltipsController();
-BI.Popovers = new BI.PopoverController();
-BI.Broadcasts = new BI.BroadcastController();
-BI.StyleLoaders = new BI.StyleLoaderManager();/**
+BI.shortcut("bi.part_tree", BI.PartTree);BI.prepares.push(function () {
+    BI.Resizers = new BI.ResizeController();
+    BI.Layers = new BI.LayerController();
+    BI.Maskers = new BI.MaskersController();
+    BI.Bubbles = new BI.BubblesController();
+    BI.Tooltips = new BI.TooltipsController();
+    BI.Popovers = new BI.PopoverController();
+    BI.Broadcasts = new BI.BroadcastController();
+    BI.StyleLoaders = new BI.StyleLoaderManager();
+});
+/**
  * CollectionView
  *
  * Created by GUY on 2016/1/15.
@@ -38368,7 +38386,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         // BI-10290 公式combo双击公式内容会收起
         if ((this.element.find(e.target).length > 0 && e.type !== "mousewheel")
             || (this.popupView && this.popupView.element.find(e.target).length > 0)
-            || e.target.className === "CodeMirror-cursor" || $(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
+            || e.target.className === "CodeMirror-cursor" || BI.Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
             return;
         }
         var isHide = this.options.hideChecker.apply(this, [e]);
@@ -38389,7 +38407,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         }
         this.element.removeClass(this.options.comboClass);
 
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
         this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW);
     },
 
@@ -38402,8 +38420,8 @@ BI.Combo = BI.inherit(BI.Widget, {
         this.adjustHeight();
 
         this.element.addClass(this.options.comboClass);
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-        $(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
         this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW);
     },
 
@@ -38571,7 +38589,7 @@ BI.Combo = BI.inherit(BI.Widget, {
     },
 
     destroy: function () {
-        $(document).unbind("mousedown." + this.getName())
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName())
             .unbind("mousewheel." + this.getName())
             .unbind("mouseenter." + this.getName())
             .unbind("mousemove." + this.getName())
@@ -40308,7 +40326,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -40338,7 +40356,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -40347,7 +40365,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -40874,7 +40892,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -44019,9 +44037,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -44031,7 +44049,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -44171,7 +44189,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -44223,7 +44241,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
@@ -44854,7 +44872,7 @@ BI.shortcut("bi.checkbox", BI.Checkbox);/**
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/dist/core.js b/dist/core.js
index 8403827e7..2a8e9dc28 100644
--- a/dist/core.js
+++ b/dist/core.js
@@ -21486,10 +21486,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -21864,6 +21864,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -26023,7 +26038,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         });
     }
 });// 工程配置
-(function () {
+BI.prepares.push(function () {
     // 注册布局
     var isSupportFlex = BI.isSupportCss3("flex");
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
@@ -26069,7 +26084,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         return ob;
 
     });
-}());/**
+});/**
  * guy
  * 控制器
  * Controller层超类
@@ -26412,7 +26427,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -26629,7 +26644,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -26695,7 +26710,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -26834,10 +26849,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -28006,7 +28021,7 @@ BI.extend(BI.DOM, {
     },
 
     isExist: function (obj) {
-        return $("body").find(obj.element).length > 0;
+        return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
     },
 
     // 预加载图片
@@ -28182,7 +28197,7 @@ BI.extend(BI.DOM, {
     },
 
     getTextSizeWidth: function (text, fontSize) {
-        var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
+        var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo($("body"));
 
         if (fontSize == null) {
             fontSize = 12;
@@ -28200,11 +28215,11 @@ BI.extend(BI.DOM, {
     // 获取滚动条的宽度
     getScrollWidth: function () {
         if (this._scrollWidth == null) {
-            var ul = $("<div>").width(50).height(50).css({
+            var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
                 position: "absolute",
                 top: "-9999px",
                 overflow: "scroll"
-            }).appendTo($("body"));
+            }).appendTo("body");
             this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
             ul.destroy();
         }
@@ -28214,7 +28229,7 @@ BI.extend(BI.DOM, {
     getImage: function (param, fillStyle, backgroundColor) {
         var canvas = document.createElement("canvas");
         var ratio = 2;
-        $("body").append(canvas);
+        BI.Widget._renderEngine.createElement("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w * ratio;
         canvas.height = 24 * ratio;
@@ -28224,7 +28239,7 @@ BI.extend(BI.DOM, {
         ctx.fillStyle = fillStyle || "#3D4D66";
         ctx.textBaseline = "middle";
         ctx.fillText(param, 6 * ratio, 12 * ratio);
-        $(canvas).destroy();
+        BI.Widget._renderEngine.createElement(canvas).destroy();
         var backColor = backgroundColor || "#EAF2FD";
         // IE可以放大缩小所以要固定最大最小宽高
         return {
@@ -30230,7 +30245,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -30239,7 +30254,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30338,7 +30353,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -30346,7 +30361,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30615,7 +30630,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -30624,7 +30639,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -31256,7 +31271,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31310,7 +31325,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -31384,7 +31399,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -32480,14 +32495,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -33124,7 +33139,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
diff --git a/dist/fineui.js b/dist/fineui.js
index 053aab943..932819349 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -21727,10 +21727,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -22105,6 +22105,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -26264,7 +26279,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         });
     }
 });// 工程配置
-(function () {
+BI.prepares.push(function () {
     // 注册布局
     var isSupportFlex = BI.isSupportCss3("flex");
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
@@ -26310,7 +26325,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         return ob;
 
     });
-}());/**
+});/**
  * guy
  * 控制器
  * Controller层超类
@@ -26653,7 +26668,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -26870,7 +26885,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -26936,7 +26951,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -27075,10 +27090,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -28247,7 +28262,7 @@ BI.extend(BI.DOM, {
     },
 
     isExist: function (obj) {
-        return $("body").find(obj.element).length > 0;
+        return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
     },
 
     // 预加载图片
@@ -28423,7 +28438,7 @@ BI.extend(BI.DOM, {
     },
 
     getTextSizeWidth: function (text, fontSize) {
-        var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
+        var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo($("body"));
 
         if (fontSize == null) {
             fontSize = 12;
@@ -28441,11 +28456,11 @@ BI.extend(BI.DOM, {
     // 获取滚动条的宽度
     getScrollWidth: function () {
         if (this._scrollWidth == null) {
-            var ul = $("<div>").width(50).height(50).css({
+            var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
                 position: "absolute",
                 top: "-9999px",
                 overflow: "scroll"
-            }).appendTo($("body"));
+            }).appendTo("body");
             this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
             ul.destroy();
         }
@@ -28455,7 +28470,7 @@ BI.extend(BI.DOM, {
     getImage: function (param, fillStyle, backgroundColor) {
         var canvas = document.createElement("canvas");
         var ratio = 2;
-        $("body").append(canvas);
+        BI.Widget._renderEngine.createElement("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w * ratio;
         canvas.height = 24 * ratio;
@@ -28465,7 +28480,7 @@ BI.extend(BI.DOM, {
         ctx.fillStyle = fillStyle || "#3D4D66";
         ctx.textBaseline = "middle";
         ctx.fillText(param, 6 * ratio, 12 * ratio);
-        $(canvas).destroy();
+        BI.Widget._renderEngine.createElement(canvas).destroy();
         var backColor = backgroundColor || "#EAF2FD";
         // IE可以放大缩小所以要固定最大最小宽高
         return {
@@ -30471,7 +30486,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -30480,7 +30495,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30579,7 +30594,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -30587,7 +30602,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -30856,7 +30871,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -30865,7 +30880,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -31497,7 +31512,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -31551,7 +31566,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -31625,7 +31640,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -32721,14 +32736,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -33365,7 +33380,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -35876,7 +35891,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -36192,14 +36207,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -36221,7 +36236,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -36232,11 +36247,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -36466,7 +36481,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -37960,14 +37975,17 @@ BI.PartTree = BI.inherit(BI.AsyncTree, {
     }
 });
 
-BI.shortcut("bi.part_tree", BI.PartTree);BI.Resizers = new BI.ResizeController();
-BI.Layers = new BI.LayerController();
-BI.Maskers = new BI.MaskersController();
-BI.Bubbles = new BI.BubblesController();
-BI.Tooltips = new BI.TooltipsController();
-BI.Popovers = new BI.PopoverController();
-BI.Broadcasts = new BI.BroadcastController();
-BI.StyleLoaders = new BI.StyleLoaderManager();/**
+BI.shortcut("bi.part_tree", BI.PartTree);BI.prepares.push(function () {
+    BI.Resizers = new BI.ResizeController();
+    BI.Layers = new BI.LayerController();
+    BI.Maskers = new BI.MaskersController();
+    BI.Bubbles = new BI.BubblesController();
+    BI.Tooltips = new BI.TooltipsController();
+    BI.Popovers = new BI.PopoverController();
+    BI.Broadcasts = new BI.BroadcastController();
+    BI.StyleLoaders = new BI.StyleLoaderManager();
+});
+/**
  * CollectionView
  *
  * Created by GUY on 2016/1/15.
@@ -38609,7 +38627,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         // BI-10290 公式combo双击公式内容会收起
         if ((this.element.find(e.target).length > 0 && e.type !== "mousewheel")
             || (this.popupView && this.popupView.element.find(e.target).length > 0)
-            || e.target.className === "CodeMirror-cursor" || $(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
+            || e.target.className === "CodeMirror-cursor" || BI.Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
             return;
         }
         var isHide = this.options.hideChecker.apply(this, [e]);
@@ -38630,7 +38648,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         }
         this.element.removeClass(this.options.comboClass);
 
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
         this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW);
     },
 
@@ -38643,8 +38661,8 @@ BI.Combo = BI.inherit(BI.Widget, {
         this.adjustHeight();
 
         this.element.addClass(this.options.comboClass);
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-        $(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
         this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW);
     },
 
@@ -38812,7 +38830,7 @@ BI.Combo = BI.inherit(BI.Widget, {
     },
 
     destroy: function () {
-        $(document).unbind("mousedown." + this.getName())
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName())
             .unbind("mousewheel." + this.getName())
             .unbind("mouseenter." + this.getName())
             .unbind("mousemove." + this.getName())
@@ -40549,7 +40567,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -40579,7 +40597,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -40588,7 +40606,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -41115,7 +41133,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -44260,9 +44278,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -44272,7 +44290,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -44412,7 +44430,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -44464,7 +44482,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
@@ -45095,7 +45113,7 @@ BI.shortcut("bi.checkbox", BI.Checkbox);/**
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/dist/fineui_without_jquery_polyfill.js b/dist/fineui_without_jquery_polyfill.js
index 03cd45cc3..8c5bf5a60 100644
--- a/dist/fineui_without_jquery_polyfill.js
+++ b/dist/fineui_without_jquery_polyfill.js
@@ -11871,10 +11871,10 @@ _.extend(BI.OB.prototype, {
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -12249,6 +12249,21 @@ _.extend(BI.OB.prototype, {
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();(function () {
     var kv = {};
     BI.shortcut = function (xtype, cls) {
@@ -16408,7 +16423,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         });
     }
 });// 工程配置
-(function () {
+BI.prepares.push(function () {
     // 注册布局
     var isSupportFlex = BI.isSupportCss3("flex");
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
@@ -16454,7 +16469,7 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
         return ob;
 
     });
-}());/**
+});/**
  * guy
  * 控制器
  * Controller层超类
@@ -16797,7 +16812,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -17014,7 +17029,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -17080,7 +17095,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
@@ -17219,10 +17234,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
@@ -17800,7 +17815,7 @@ BI.extend(BI.DOM, {
     },
 
     isExist: function (obj) {
-        return $("body").find(obj.element).length > 0;
+        return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
     },
 
     // 预加载图片
@@ -17976,7 +17991,7 @@ BI.extend(BI.DOM, {
     },
 
     getTextSizeWidth: function (text, fontSize) {
-        var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
+        var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo($("body"));
 
         if (fontSize == null) {
             fontSize = 12;
@@ -17994,11 +18009,11 @@ BI.extend(BI.DOM, {
     // 获取滚动条的宽度
     getScrollWidth: function () {
         if (this._scrollWidth == null) {
-            var ul = $("<div>").width(50).height(50).css({
+            var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
                 position: "absolute",
                 top: "-9999px",
                 overflow: "scroll"
-            }).appendTo($("body"));
+            }).appendTo("body");
             this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
             ul.destroy();
         }
@@ -18008,7 +18023,7 @@ BI.extend(BI.DOM, {
     getImage: function (param, fillStyle, backgroundColor) {
         var canvas = document.createElement("canvas");
         var ratio = 2;
-        $("body").append(canvas);
+        BI.Widget._renderEngine.createElement("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w * ratio;
         canvas.height = 24 * ratio;
@@ -18018,7 +18033,7 @@ BI.extend(BI.DOM, {
         ctx.fillStyle = fillStyle || "#3D4D66";
         ctx.textBaseline = "middle";
         ctx.fillText(param, 6 * ratio, 12 * ratio);
-        $(canvas).destroy();
+        BI.Widget._renderEngine.createElement(canvas).destroy();
         var backColor = backgroundColor || "#EAF2FD";
         // IE可以放大缩小所以要固定最大最小宽高
         return {
@@ -19957,7 +19972,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -19966,7 +19981,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -20065,7 +20080,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -20073,7 +20088,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -20342,7 +20357,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -20351,7 +20366,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -20983,7 +20998,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
@@ -21037,7 +21052,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
@@ -21111,7 +21126,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
@@ -22207,14 +22222,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
@@ -22851,7 +22866,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -25161,7 +25176,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
@@ -25477,14 +25492,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -25506,7 +25521,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -25517,11 +25532,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -25751,7 +25766,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
@@ -26345,14 +26360,17 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
 });
 BI.ButtonTree.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.button_tree", BI.ButtonTree);BI.Resizers = new BI.ResizeController();
-BI.Layers = new BI.LayerController();
-BI.Maskers = new BI.MaskersController();
-BI.Bubbles = new BI.BubblesController();
-BI.Tooltips = new BI.TooltipsController();
-BI.Popovers = new BI.PopoverController();
-BI.Broadcasts = new BI.BroadcastController();
-BI.StyleLoaders = new BI.StyleLoaderManager();/**
+BI.shortcut("bi.button_tree", BI.ButtonTree);BI.prepares.push(function () {
+    BI.Resizers = new BI.ResizeController();
+    BI.Layers = new BI.LayerController();
+    BI.Maskers = new BI.MaskersController();
+    BI.Bubbles = new BI.BubblesController();
+    BI.Tooltips = new BI.TooltipsController();
+    BI.Popovers = new BI.PopoverController();
+    BI.Broadcasts = new BI.BroadcastController();
+    BI.StyleLoaders = new BI.StyleLoaderManager();
+});
+/**
  * CollectionView
  *
  * Created by GUY on 2016/1/15.
@@ -26994,7 +27012,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         // BI-10290 公式combo双击公式内容会收起
         if ((this.element.find(e.target).length > 0 && e.type !== "mousewheel")
             || (this.popupView && this.popupView.element.find(e.target).length > 0)
-            || e.target.className === "CodeMirror-cursor" || $(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
+            || e.target.className === "CodeMirror-cursor" || BI.Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
             return;
         }
         var isHide = this.options.hideChecker.apply(this, [e]);
@@ -27015,7 +27033,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         }
         this.element.removeClass(this.options.comboClass);
 
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
         this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW);
     },
 
@@ -27028,8 +27046,8 @@ BI.Combo = BI.inherit(BI.Widget, {
         this.adjustHeight();
 
         this.element.addClass(this.options.comboClass);
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-        $(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
         this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW);
     },
 
@@ -27197,7 +27215,7 @@ BI.Combo = BI.inherit(BI.Widget, {
     },
 
     destroy: function () {
-        $(document).unbind("mousedown." + this.getName())
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName())
             .unbind("mousewheel." + this.getName())
             .unbind("mouseenter." + this.getName())
             .unbind("mousemove." + this.getName())
@@ -28934,7 +28952,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -28964,7 +28982,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -28973,7 +28991,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
@@ -29500,7 +29518,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
@@ -32645,9 +32663,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -32657,7 +32675,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
@@ -32797,7 +32815,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
@@ -32849,7 +32867,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
diff --git a/src/base/base.js b/src/base/base.js
index 7d2fd3e0a..e5eec1d1a 100644
--- a/src/base/base.js
+++ b/src/base/base.js
@@ -1,8 +1,10 @@
-BI.Resizers = new BI.ResizeController();
-BI.Layers = new BI.LayerController();
-BI.Maskers = new BI.MaskersController();
-BI.Bubbles = new BI.BubblesController();
-BI.Tooltips = new BI.TooltipsController();
-BI.Popovers = new BI.PopoverController();
-BI.Broadcasts = new BI.BroadcastController();
-BI.StyleLoaders = new BI.StyleLoaderManager();
\ No newline at end of file
+BI.prepares.push(function () {
+    BI.Resizers = new BI.ResizeController();
+    BI.Layers = new BI.LayerController();
+    BI.Maskers = new BI.MaskersController();
+    BI.Bubbles = new BI.BubblesController();
+    BI.Tooltips = new BI.TooltipsController();
+    BI.Popovers = new BI.PopoverController();
+    BI.Broadcasts = new BI.BroadcastController();
+    BI.StyleLoaders = new BI.StyleLoaderManager();
+});
diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js
index de578e532..40fa4876c 100644
--- a/src/base/combination/combo.js
+++ b/src/base/combination/combo.js
@@ -263,7 +263,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         // BI-10290 公式combo双击公式内容会收起
         if ((this.element.find(e.target).length > 0 && e.type !== "mousewheel")
             || (this.popupView && this.popupView.element.find(e.target).length > 0)
-            || e.target.className === "CodeMirror-cursor" || $(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
+            || e.target.className === "CodeMirror-cursor" || BI.Widget._renderEngine.createElement(e.target).closest(".CodeMirror-hints").length > 0) {// BI-9887 CodeMirror的公式弹框需要特殊处理下
             return;
         }
         var isHide = this.options.hideChecker.apply(this, [e]);
@@ -284,7 +284,7 @@ BI.Combo = BI.inherit(BI.Widget, {
         }
         this.element.removeClass(this.options.comboClass);
 
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
         this.fireEvent(BI.Combo.EVENT_AFTER_HIDEVIEW);
     },
 
@@ -297,8 +297,8 @@ BI.Combo = BI.inherit(BI.Widget, {
         this.adjustHeight();
 
         this.element.addClass(this.options.comboClass);
-        $(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
-        $(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName()).unbind("mousewheel." + this.getName());
+        BI.Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), BI.bind(this._hideIf, this)).bind("mousewheel." + this.getName(), BI.bind(this._hideIf, this));
         this.fireEvent(BI.Combo.EVENT_AFTER_POPUPVIEW);
     },
 
@@ -466,7 +466,7 @@ BI.Combo = BI.inherit(BI.Widget, {
     },
 
     destroy: function () {
-        $(document).unbind("mousedown." + this.getName())
+        BI.Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName())
             .unbind("mousewheel." + this.getName())
             .unbind("mouseenter." + this.getName())
             .unbind("mousemove." + this.getName())
diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js
index 3586c4ebe..9d751f195 100644
--- a/src/base/foundation/message.js
+++ b/src/base/foundation/message.js
@@ -19,7 +19,7 @@ BI.Msg = function () {
         },
         toast: function (message, options, context) {
             options = options || {};
-            context = context || $("body");
+            context = context || BI.Widget._renderEngine.createElement("body");
             var level = options.level || "normal";
             var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
             var toast = BI.createWidget({
@@ -49,7 +49,7 @@ BI.Msg = function () {
             }, 5000);
         },
         _show: function (hasCancel, title, message, callback) {
-            $mask = $("<div class=\"bi-z-index-mask\">").css({
+            $mask = BI.Widget._renderEngine.createElement("<div class=\"bi-z-index-mask\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 2,
                 top: 0,
@@ -58,7 +58,7 @@ BI.Msg = function () {
                 bottom: 0,
                 opacity: 0.5
             }).appendTo("body");
-            $pop = $("<div class=\"bi-message-depend\">").css({
+            $pop = BI.Widget._renderEngine.createElement("<div class=\"bi-message-depend\">").css({
                 position: "absolute",
                 zIndex: BI.zIndex_tip - 1,
                 top: 0,
diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js
index decac852f..e2fb1a38b 100644
--- a/src/base/layer/layer.popover.js
+++ b/src/base/layer/layer.popover.js
@@ -30,7 +30,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         this.startY = 0;
         this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
             var size = self._calculateSize();
-            var W = $("body").width(), H = $("body").height();
+            var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
             self.startX += deltaX;
             self.startY += deltaY;
             self.element.css({
diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js
index 61fd69d9d..2f3583c60 100644
--- a/src/base/single/button/button.basic.js
+++ b/src/base/single/button/button.basic.js
@@ -127,14 +127,14 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var selected = false;
                     hand.mousedown(function (e) {
                         // if (e.button === 0) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             // if (e.button === 0) {
                             if (BI.DOM.isExist(self) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected) {
                                 // self.setSelected(!self.isSelected());
                                 self._trigger();
                             }
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                             // }
                         });
                         if (mouseDown === true) {
@@ -156,7 +156,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
                         }
                         mouseDown = false;
                         selected = false;
-                        $(document).unbind("mouseup." + self.getName());
+                        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         // }
                     });
                     break;
@@ -167,11 +167,11 @@ BI.BasicButton = BI.inherit(BI.Single, {
                     var mouseDown = false;
                     var interval;
                     hand.mousedown(function (e) {
-                        $(document).bind("mouseup." + self.getName(), function (e) {
+                        BI.Widget._renderEngine.createElement(document).bind("mouseup." + self.getName(), function (e) {
                             interval && clearInterval(interval);
                             interval = null;
                             mouseDown = false;
-                            $(document).unbind("mouseup." + self.getName());
+                            BI.Widget._renderEngine.createElement(document).unbind("mouseup." + self.getName());
                         });
                         if (mouseDown === true) {
                             return;
@@ -401,7 +401,7 @@ BI.BasicButton = BI.inherit(BI.Single, {
     },
 
     empty: function () {
-        $(document).unbind("mouseup." + this.getName());
+        BI.Widget._renderEngine.createElement(document).unbind("mouseup." + this.getName());
         BI.BasicButton.superclass.empty.apply(this, arguments);
     },
 
diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js
index 5e6335c5d..b224165eb 100644
--- a/src/base/single/editor/editor.textarea.js
+++ b/src/base/single/editor/editor.textarea.js
@@ -47,9 +47,9 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._focus();
                 self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
             }
-            $(document).bind("mousedown." + self.getName(), function (e) {
+            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                 if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
-                    $(document).unbind("mousedown." + self.getName());
+                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                     self.content.element.blur();
                 }
             });
@@ -59,7 +59,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                 self._blur();
                 self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
             }
-            $(document).unbind("mousedown." + self.getName());
+            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
         });
         if (BI.isKey(o.value)) {
             self.setValue(o.value);
diff --git a/src/base/single/iframe/iframe.js b/src/base/single/iframe/iframe.js
index 8e0c8e539..a6a3d56af 100644
--- a/src/base/single/iframe/iframe.js
+++ b/src/base/single/iframe/iframe.js
@@ -17,7 +17,7 @@ BI.Iframe = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<iframe frameborder='0' src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<iframe frameborder='0' src='" + o.src + "'>");
         BI.Iframe.superclass._init.apply(this, arguments);
     },
 
diff --git a/src/base/single/img/img.js b/src/base/single/img/img.js
index aa5054bc4..9703c4022 100644
--- a/src/base/single/img/img.js
+++ b/src/base/single/img/img.js
@@ -19,7 +19,7 @@ BI.Img = BI.inherit(BI.Single, {
 
     _init: function () {
         var o = this.options;
-        this.options.element = $("<img src='" + o.src + "'>");
+        this.options.element = BI.Widget._renderEngine.createElement("<img src='" + o.src + "'>");
         BI.Img.superclass._init.apply(this, arguments);
     },
 
diff --git a/src/base/single/input/file.js b/src/base/single/input/file.js
index cb8044f7f..49e7b84ba 100644
--- a/src/base/single/input/file.js
+++ b/src/base/single/input/file.js
@@ -582,7 +582,7 @@
         },
 
         select: function () {
-            $(this.wrap.dom.input).click();
+            BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
         },
 
         upload: function (handler) {
diff --git a/src/base/single/single.js b/src/base/single/single.js
index 56875e0c2..3a59edc3f 100644
--- a/src/base/single/single.js
+++ b/src/base/single/single.js
@@ -101,7 +101,7 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.timeout);
         }
         this._hideTooltip();
-        $(this.element).unbind("mouseenter.title" + this.getName())
+        this.element.unbind("mouseenter.title" + this.getName())
             .unbind("mousemove.title" + this.getName())
             .unbind("mouseleave.title" + this.getName());
         this._hoverBinded = false;
diff --git a/src/core/config.js b/src/core/config.js
index b982d76c2..619aef24e 100644
--- a/src/core/config.js
+++ b/src/core/config.js
@@ -1,5 +1,5 @@
 // 工程配置
-(function () {
+BI.prepares.push(function () {
     // 注册布局
     var isSupportFlex = BI.isSupportCss3("flex");
     BI.Plugin.registerWidget("bi.horizontal", function (ob) {
@@ -45,4 +45,4 @@
         return ob;
 
     });
-}());
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/core/controller/controller.layer.js b/src/core/controller/controller.layer.js
index 7e4b6841d..95212f452 100644
--- a/src/core/controller/controller.layer.js
+++ b/src/core/controller/controller.layer.js
@@ -49,7 +49,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
             w = from.element;
         }
         if (BI.isNotEmptyString(w)) {
-            w = $(w);
+            w = BI.Widget._renderEngine.createElement(w);
         }
         if (this.has(name)) {
             return this.get(name);
diff --git a/src/core/controller/controller.popover.js b/src/core/controller/controller.popover.js
index 19967746d..d8367fcda 100644
--- a/src/core/controller/controller.popover.js
+++ b/src/core/controller/controller.popover.js
@@ -93,7 +93,7 @@ BI.PopoverController = BI.inherit(BI.Controller, {
             this.floatContainer[name].visible();
             var popover = this.get(name);
             popover.show && popover.show();
-            var W = $(this.options.render).width(), H = $(this.options.render).height();
+            var W = BI.Widget._renderEngine.createElement(this.options.render).width(), H = BI.Widget._renderEngine.createElement(this.options.render).height();
             var w = popover.element.width(), h = popover.element.height();
             var left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
diff --git a/src/core/controller/controller.resizer.js b/src/core/controller/controller.resizer.js
index 53afad20a..80a5386f1 100644
--- a/src/core/controller/controller.resizer.js
+++ b/src/core/controller/controller.resizer.js
@@ -18,7 +18,7 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             self._resize(ev);
             // }
         }, 30);
-        _global.$ && $(window).resize(fn);
+        BI.Widget._renderEngine.createElement(window).resize(fn);
     },
 
     _resize: function (ev) {
diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js
index 9fed164ae..d790a11cd 100644
--- a/src/core/controller/controller.tooltips.js
+++ b/src/core/controller/controller.tooltips.js
@@ -89,10 +89,10 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
         // var scale = context.element.offset().left / context.element.get(0).getBoundingClientRect().left;
         // var x = (e.pageX || e.clientX) * scale + 15, y = (e.pageY || e.clientY) * scale + 15;
         var x = (e.pageX || e.clientX) + 15, y = (e.pageY || e.clientY) + 15;
-        if (x + tooltip.element.outerWidth() > $("body").outerWidth()) {
+        if (x + tooltip.element.outerWidth() > BI.Widget._renderEngine.createElement("body").outerWidth()) {
             x -= tooltip.element.outerWidth() + 15;
         }
-        if (y + tooltip.element.outerHeight() > $("body").outerHeight()) {
+        if (y + tooltip.element.outerHeight() > BI.Widget._renderEngine.createElement("body").outerHeight()) {
             y -= tooltip.element.outerHeight() + 15;
             !opt.belowMouse && (y = Math.min(y, offset.top - tooltip.element.outerHeight() - 5));
         } else {
diff --git a/src/core/func/function.js b/src/core/func/function.js
index d29408fdb..7ba043dc5 100644
--- a/src/core/func/function.js
+++ b/src/core/func/function.js
@@ -100,7 +100,7 @@ BI.extend(BI.DOM, {
     },
 
     isExist: function (obj) {
-        return $("body").find(obj.element).length > 0;
+        return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
     },
 
     // 预加载图片
@@ -276,7 +276,7 @@ BI.extend(BI.DOM, {
     },
 
     getTextSizeWidth: function (text, fontSize) {
-        var span = $("<span></span>").addClass("text-width-span").appendTo($("body"));
+        var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo($("body"));
 
         if (fontSize == null) {
             fontSize = 12;
@@ -294,11 +294,11 @@ BI.extend(BI.DOM, {
     // 获取滚动条的宽度
     getScrollWidth: function () {
         if (this._scrollWidth == null) {
-            var ul = $("<div>").width(50).height(50).css({
+            var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
                 position: "absolute",
                 top: "-9999px",
                 overflow: "scroll"
-            }).appendTo($("body"));
+            }).appendTo("body");
             this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
             ul.destroy();
         }
@@ -308,7 +308,7 @@ BI.extend(BI.DOM, {
     getImage: function (param, fillStyle, backgroundColor) {
         var canvas = document.createElement("canvas");
         var ratio = 2;
-        $("body").append(canvas);
+        BI.Widget._renderEngine.createElement("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w * ratio;
         canvas.height = 24 * ratio;
@@ -318,7 +318,7 @@ BI.extend(BI.DOM, {
         ctx.fillStyle = fillStyle || "#3D4D66";
         ctx.textBaseline = "middle";
         ctx.fillText(param, 6 * ratio, 12 * ratio);
-        $(canvas).destroy();
+        BI.Widget._renderEngine.createElement(canvas).destroy();
         var backColor = backgroundColor || "#EAF2FD";
         // IE可以放大缩小所以要固定最大最小宽高
         return {
diff --git a/src/core/widget.js b/src/core/widget.js
index 6c30a0f7e..8a29dccaf 100644
--- a/src/core/widget.js
+++ b/src/core/widget.js
@@ -93,10 +93,10 @@
                 // if (o.root !== true) {
                 //     throw new Error("root is a required property");
                 // }
-                this.element = $(o.element);
+                this.element = BI.Widget._renderEngine.createElement(this);
                 this._isRoot = true;
             } else {
-                this.element = $(document.createElement(o.tagName));
+                this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
             if (o.baseCls || o.extraCls || o.cls) {
@@ -471,4 +471,19 @@
             this.purgeListeners();
         }
     });
+    BI.Widget.registerRenderEngine = function (engine) {
+        BI.Widget._renderEngine = engine;
+    };
+    BI.Widget.registerRenderEngine({
+        createElement: function (widget) {
+            if(BI.isWidget(widget)) {
+                var o = widget.options;
+                if (o.element) {
+                    return $(o.element);
+                }
+                return $(document.createElement(o.tagName));
+            }
+            return $(widget);
+        }
+    });
 })();
\ No newline at end of file
diff --git a/src/core/wrapper/layout/adapt/adapt.center.js b/src/core/wrapper/layout/adapt/adapt.center.js
index a09aaf4f2..3f0374825 100644
--- a/src/core/wrapper/layout/adapt/adapt.center.js
+++ b/src/core/wrapper/layout/adapt/adapt.center.js
@@ -18,7 +18,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",
@@ -27,7 +27,7 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/adapt/adapt.horizontal.js b/src/core/wrapper/layout/adapt/adapt.horizontal.js
index 3b672239c..56d74a1af 100644
--- a/src/core/wrapper/layout/adapt/adapt.horizontal.js
+++ b/src/core/wrapper/layout/adapt/adapt.horizontal.js
@@ -19,7 +19,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalAdaptLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             "white-space": "nowrap",
@@ -27,7 +27,7 @@ BI.HorizontalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/adapt/adapt.vertical.js b/src/core/wrapper/layout/adapt/adapt.vertical.js
index 542be037d..ca39e4a7d 100644
--- a/src/core/wrapper/layout/adapt/adapt.vertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.vertical.js
@@ -18,7 +18,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
             height: "100%",
@@ -27,7 +27,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
index a88b91534..a5f34ad71 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
@@ -13,7 +13,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexCenterLayout.superclass.render.apply(this, arguments);
-        this.$wrapper = $("<div>").addClass("flex-wrapper-center-layout-wrapper");
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 6940fc6a9..a46ab363d 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -23,7 +23,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
index 85f4109b3..9bab56711 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
@@ -23,7 +23,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
     render: function () {
         BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
         var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
+        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
         this.populate(this.options.items);
     },
 
diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js
index 20f90e5df..0be85cb66 100644
--- a/src/core/wrapper/layout/layout.horizontal.js
+++ b/src/core/wrapper/layout/layout.horizontal.js
@@ -20,14 +20,14 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HorizontalLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             "white-space": "nowrap",
             "border-spacing": "0px",
             border: "none",
             "border-collapse": "separate"
         });
-        this.$tr = $("<tr>");
+        this.$tr = BI.Widget._renderEngine.createElement("<tr>");
         this.$tr.appendTo(this.$table);
         this.populate(this.options.items);
     },
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index 1714f4da8..7bb7f2c9b 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -25,7 +25,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.TdLayout.superclass.render.apply(this, arguments);
-        this.$table = $("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
+        this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
             position: "relative",
             width: "100%",
             height: "100%",