首页 > 代码库 > FloatHelper
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 = http://www.mamicode.com/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,但是很高兴,自己终于完成了,赞自己一次。
下班回家喽!
FloatHelper
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。