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，但是很高兴，自己终于完成了,赞自己一次。
下班回家喽！