FloatHelper

  1 function FloatHelper() {
  2 }
  3 
  4 FloatHelper.prototype.showFloater = function (Target, Title, Action, ActionCallback, Callback, IsNeedTemplete) {
  5     this.hideFloater();
  6     var FloaterID = "Float_" + Title;
  7     var Floater = $("#" + FloaterID);
  8     if (Floater.length == 0) {
  9         var newFloater = $("<div>");
 10         newFloater.addClass("Absolute FloatDiv");
 11         newFloater.attr("id", FloaterID);
 12         Floater = newFloater;
 13 
 14         if (IsNeedTemplete == undefined || IsNeedTemplete == null || IsNeedTemplete) {
 15             var newDiv = $("<div>");
 16             newDiv.addClass("Template_HoverHead");
 17             var newSpan = $("<span>");
 18             newSpan.addClass("title");
 19             newSpan.html(Title);
 20             newDiv.append(newSpan);
 21 
 22             var newActionDiv = $("<div>");
 23             newActionDiv.addClass("HoverHead_Buttons Right");
 24             var newInput = $("<input>");
 25             newInput.attr({
 26                 "type": "button",
 27                 "value": Action
 28             });
 29 
 30             if (ActionCallback != undefined && ActionCallback != null) {
 31                 newActionDiv.on("click", ActionCallback);
 32                 newFloater.css("cursor", "pointer").click(ActionCallback);
 33                 $("[data-name=" + Title + "]").css("cursor", "pointer").click(function (event) {
 34                     event.preventDefault ? event.preventDefault() : event.returnvalue = false;
 35                     ActionCallback();
 36                 });
 37             }
 38 
 39             newInput.addClass("Action");
 40             newActionDiv.append(newInput);
 41             newDiv.append(newActionDiv);
 42             newFloater.append(newDiv);
 43         }
 44         $(doc.body).append(newFloater);
 45     } else {
 46         Floater.show();
 47     }
 48 
 49     var top, left, TargetTop, width;
 50 
 51     if (Target != null) {
 52         width = Target.width();
 53         TargetTop = Target.offset().top;
 54         top = Math.ceil(TargetTop - Floater.height());
 55         left = Target.offset().left;
 56         Floater.css({
 57             "top": top + "px",
 58             "left": left + "px",
 59             "width": width + "px"
 60         });
 61         this.showOutLine(Title);
 62         if (Callback != undefined && Callback != null) {
 63             Callback();
 64         }
 65     }
 66 };
 67 
 68 FloatHelper.prototype.hideFloater = function (Callback) {
 69     var FloatDiv = $(".FloatDiv");
 70     if (FloatDiv.is(":visible")) {
 71         FloatDiv.remove();
 72         this.hideOutline();
 73         if (Callback != undefined && Callback != null) {
 74             Callback();
 75         }
 76     }
 77 };
 78 
 79 FloatHelper.prototype.resize = function (Callback) {
 80     var FloatDiv = $(".FloatDiv:visible");
 81     if (FloatDiv.length > 0) {
 82         var name = FloatDiv.attr("id").replace("Float_", "");
 83         var Target = $("[data-name = " + name + "]");
 84         var width, top, left;
 85         if (FloatDiv.is(":visible")) {
 86             top = Target.offset().top;
 87             left = Target.offset().left;
 88             width = Target.width();
 89             if (width < 180) {
 90                 width = 180;
 91             }
 92             FloatDiv.css({
 93                 "width": width,
 94                 "top": top,
 95                 "left": left
 96             });
 97             if (Callback != undefined && Callback != null) {
 98                 Callback();
 99             }
100         }
101     }
102 };
103 
104 FloatHelper.prototype.showOutLine = function (name) {
105     var target = $(".FloatDiv:visible");
106     var Floater;
107     if (target.length > 0) {
108         name = name || target.attr("id").replace("Float_", "");
109         var editableDiv = $("[data-name =" + name + " ]");
110         try {
111             this.hideOutline();
112         } catch (e) {
113 
114         }
115         editableDiv.css("outline", "solid 6px #fdc666");
116         Floater = $("#Float_" + name);
117         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]);
118         if (w <= 180) {
119             w = 180;
120             editableDiv.css("width", w - 12);
121             editableDiv.find("ul").addClass("Right Less180");
122         } else {
123             editableDiv.find("ul.Right.Less180").removeClass("Right");
124         }
125         Floater.css({
126             "width": w,
127             "left": editableDiv.offset().left - 6,
128             "top": Math.ceil(editableDiv.offset().top - Floater.height())
129         });
130         if (name == "Background") {
131             Floater.css("top", editableDiv.offset().top);
132         }
133     }
134 };
135 
136 FloatHelper.prototype.hideOutline = function () {
137     _.each($("[data-editable = True]"), function (item) {
138         if (item) {
139             $(item).css("outline", "none");
140         }
141     });
142 };
可视化建站这个项目中的Js,除了DialogHelper，其他的都是自己完成的，感觉自己真厉害啊，虽然写的不是那么完善，可能还会有各种bug，但是很高兴，自己终于完成了,赞自己一次。
下班回家喽！