FloatHelper

 function FloatHelper() {
 }

 FloatHelper.prototype.showFloater = function (Target, Title, Action, ActionCallback, Callback, IsNeedTemplete) {
     this.hideFloater();
     var FloaterID = "Float_" + Title;
     var Floater = $("#" + FloaterID);
     if (Floater.length == 0) {
         var newFloater = $("<div>");
         newFloater.addClass("Absolute FloatDiv");
         newFloater.attr("id", FloaterID);
         Floater = newFloater;

         if (IsNeedTemplete == undefined || IsNeedTemplete == null || IsNeedTemplete) {
             var newDiv = $("<div>");
             newDiv.addClass("Template_HoverHead");
             var newSpan = $("<span>");
             newSpan.addClass("title");
             newSpan.html(Title);
             newDiv.append(newSpan);

             var newActionDiv = $("<div>");
             newActionDiv.addClass("HoverHead_Buttons Right");
             var newInput = $("<input>");
             newInput.attr({
                 "type": "button",
                 "value": Action
             });

             if (ActionCallback != undefined && ActionCallback != null) {
                 newActionDiv.on("click", ActionCallback);
                 newFloater.css("cursor", "pointer").click(ActionCallback);
                 $("[data-name=" + Title + "]").css("cursor", "pointer").click(function (event) {
                     event.preventDefault ? event.preventDefault() : event.returnvalue = false;
                     ActionCallback();
                 });
             }

             newInput.addClass("Action");
             newActionDiv.append(newInput);
             newDiv.append(newActionDiv);
             newFloater.append(newDiv);
         }
         $(doc.body).append(newFloater);
     } else {
         Floater.show();
     }

     var top, left, TargetTop, width;

     if (Target != null) {
         width = Target.width();
         TargetTop = Target.offset().top;
         top = Math.ceil(TargetTop - Floater.height());
         left = Target.offset().left;
         Floater.css({
             "top": top + "px",
             "left": left + "px",
             "width": width + "px"
         });
         this.showOutLine(Title);
         if (Callback != undefined && Callback != null) {
             Callback();
         }
     }
 };

 FloatHelper.prototype.hideFloater = function (Callback) {
     var FloatDiv = $(".FloatDiv");
     if (FloatDiv.is(":visible")) {
         FloatDiv.remove();
         this.hideOutline();
         if (Callback != undefined && Callback != null) {
             Callback();
         }
     }
 };

 FloatHelper.prototype.resize = function (Callback) {
     var FloatDiv = $(".FloatDiv:visible");
     if (FloatDiv.length > 0) {
         var name = FloatDiv.attr("id").replace("Float_", "");
         var Target = $("[data-name = " + name + "]");
         var width, top, left;
         if (FloatDiv.is(":visible")) {
             top = Target.offset().top;
             left = Target.offset().left;
             width = Target.width();
             if (width < 180) {
                 width = 180;
             }
             FloatDiv.css({
                 "width": width,
                 "top": top,
                 "left": left
             });
             if (Callback != undefined && Callback != null) {
                 Callback();
             }
         }
     }
 };

 FloatHelper.prototype.showOutLine = function (name) {
     var target = $(".FloatDiv:visible");
     var Floater;
     if (target.length > 0) {
         name = name || target.attr("id").replace("Float_", "");
         var editableDiv = $("[data-name =" + name + " ]");
         try {
             this.hideOutline();
         } catch (e) {

         }
         editableDiv.css("outline", "solid 6px #fdc666");
         Floater = $("#Float_" + name);
         var w = editableDiv.width() + 12 + Math.round(editableDiv.css("padding-left").match(/^[0-9]*/g)[0]) + Math.round(editableDiv.css("padding-right").match(/^[0-9]*/g)[0]);
         if (w <= 180) {
             w = 180;
             editableDiv.css("width", w - 12);
             editableDiv.find("ul").addClass("Right Less180");
         } else {
             editableDiv.find("ul.Right.Less180").removeClass("Right");
         }
         Floater.css({
             "width": w,
             "left": editableDiv.offset().left - 6,
             "top": Math.ceil(editableDiv.offset().top - Floater.height())
         });
         if (name == "Background") {
             Floater.css("top", editableDiv.offset().top);
         }
     }
 };

 FloatHelper.prototype.hideOutline = function () {
     _.each($("[data-editable = True]"), function (item) {
         if (item) {
             $(item).css("outline", "none");
         }
     });
 };

可视化建站这个项目中的Js,除了DialogHelper，其他的都是自己完成的，感觉自己真厉害啊，虽然写的不是那么完善，可能还会有各种bug，但是很高兴，自己终于完成了,赞自己一次。

下班回家喽！