FloatHelper-白红宇

FloatHelper

阅读量：4586 次

发布时间：2019-06-09

本文共 5266 字，大约阅读时间需要 17 分钟。

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 = $("
     
      "); 10         newFloater.addClass("Absolute FloatDiv"); 11         newFloater.attr("id", FloaterID); 12         Floater = newFloater; 13  14         if (IsNeedTemplete == undefined || IsNeedTemplete == null || IsNeedTemplete) { 15             var newDiv = $("
      
       "); 16             newDiv.addClass("Template_HoverHead"); 17             var newSpan = $("
       "); 18             newSpan.addClass("title"); 19             newSpan.html(Title); 20             newDiv.append(newSpan); 21  22             var newActionDiv = $("
        
         "); 23             newActionDiv.addClass("HoverHead_Buttons Right"); 24             var newInput = $("
         "); 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 };