简洁的三角箭头面板(flyout-panel.js)【附demo】

     var reqs = [
                "Handlebars",
                "jquery",
                "text!mr-fp/flyout-panel.html",  // 支持行内样式时需要的模板
                "css!mr-fp/flyout-panel.css" // 支持外链样式时需要的样式
            ];
    
    define(reqs , function (Handlebars,$,fpHTML) {
         var FlyOutPanel =  function(options){
             var styles = { // 面板默认样式，参数名顾名思义，标*号为必选参数
                    "panelClass" :     "flyout-panel",
                    "borderWidth" : "1px",
                    "borderColor" : "#000",
                    "bgColor" : "#fff",
                    "panelWidth" : "100px", // *
                    "panelHeight" : "100px",
                    "arrowLeft" : "50%", // *arrowLeft与arrowRight是互斥的（这里有点别扭）
                    "arrowRight" : "auto", // *当前三角箭头相对于面板的位置是left:50%
                    "arrowBorderWidth" : "10px", // *三角箭头的边宽，该三角形所在的div元素现为：20px*20px
                    "contentPadding" : "auto"
                };
             this.options = {
                    "id": "",
                    "styleInline" :  true, // 默认支持行内样式
                    "container" : document.body, // default is document.body, a dom element;
                    "content" :  null, // 面板中的内容元素，jquery元素
                    "triggerBtn" :  null, // 点击显示面板的button,juqery元素，如果未传，则要显式的为相应按钮绑定显示panel事件
                    "styles" : styles,
                    "timer" : 1000  //  默认面板显示1秒后隐藏
                };
            $.extend( true, this.options,options);
             this.styles =  this.options.styles;
             this.hideTimer =  null;
             this._create();
        };
        
        FlyOutPanel.prototype = {
            _create :  function(){
                 var tpl;
                 if( this.options.styleInline){
                     var source = $(fpHTML).html();
                     var template = Handlebars.compile(source);
                    tpl = template( this.styles);
                } else{
                    tpl = ['<div>',
                                '<div class="fp-arrow">',
                                    '<div class="fp-a1"></div>',
                                    '<div class="fp-a2"></div>',
                                '</div>',
                                '<div class="fp-content"></div>',
                            '</div>'].join('');
                }
                 var _el =  this._el = $(tpl).addClass( this.styles.panelClass);
                _el.unselectable();
                 this.containerEl = $( this.options.container).append(_el);
                 this.arrowEl = _el.find('.fp-arrow');
                _el.width( this.styles.panelWidth);
                _el.height( this.styles.panelHeight);
                 this.contentEl = _el.find('.fp-content').append( this.options.content.show());
                 this.triggerBtn = $( this.options.triggerBtn);
                 this.bindEvents();
            },
            setPosition :  function(offset){ // 设置面板的位置以及三角箭头的位置
                 var styles =  this.styles;
                 var _el =  this._el;
                 var _w= _el.width() + parseInt(styles.borderWidth)*2;
                 var arrowLeftPos = _w/2;
                
                 var arrowLeft = styles.arrowLeft,
                    arrowRight = styles.arrowRight,
                    _arrowBorderWidth = parseInt(styles.arrowBorderWidth,"10");
                console.log(arrowLeft + arrowRight);
                
                 if(!isNaN(parseInt(arrowLeft,10))){
                     var _lv = parseInt(arrowLeft,10);
                     if(arrowLeft.indexOf("%")>0){
                        arrowLeftPos = _w*_lv/100;
                    } else{
                        arrowLeftPos = _lv;
                    }
                }
                 if(!isNaN(parseInt(arrowRight,10))){
                     var _rv = parseInt(arrowRight,10);
                     if(arrowRight.indexOf("%")>0){
                        arrowLeftPos = _w*(100-_rv)/100;
                    } else{
                        arrowLeftPos = _w - _rv;
                    }
                }
                
                 if(_w - arrowLeftPos - _arrowBorderWidth <0){
                    arrowLeftPos = _w - _arrowBorderWidth;
                     this.arrowEl.css("right",_arrowBorderWidth + "px").css("left","auto");
                }
                _el.css({"top":offset.top + _arrowBorderWidth,"left":offset.left - arrowLeftPos});
                
                _el.show();
                 this.hideTimer = setTimeout( function(){
                    _el.hide();
                }, this.options.timer);
            },
            bindEvents :  function(){
                 var self =  this,
                    _el =  this._el;
                _el.bind('mouseleave.hide', function(){
                    self.hideTimer = setTimeout( function(){
                        _el.hide();
                    },self.options.timer);
                }).bind('mouseenter', function(){
                    clearTimeout(self.hideTimer);
                });
                 var btn =  this.triggerBtn;
                 if(btn && btn.length){
                    btn.bind('click.show', function(){
                         var pos = calculatePosition(btn);
                        self.setPosition(pos);
                    });
                }
                
            },
            setArrowPositon : function(){
                
            },
        };
        
         function calculatePosition($btn){
             var offset = $btn.offset(),
                top = offset.top + $btn.height(),
                left = offset.left + $btn.width() /2;
            return {'top' : top,'left' : left};
        }
        
         return FlyOutPanel;
    });    
})(); 

_createFlyoutPanels :  function(){
                     var self =  this;
                     var _el =  this.el;
                     var $eyePanel = _el.find('.eye-panel'),
                        $eyeBtn =  this._settingEl.find('.eye-btn');
                     this.eyePanel =  new FlyoutPanel({
                        "styleInline" :  false,
                        'container' :  _el,
                        'content' : $eyePanel,
                        'triggerBtn' : $eyeBtn,
                        'styles' : {
                            'panelWidth' : "160px",
                            'panelHeight' : "100px",
                        }
                    });
                    
                },

var tpl;
if( this.options.styleInline){//行内样式Dom结构
     var source = $(fpHTML).html();
     var template = Handlebars.compile(source);
    tpl = template( this.styles);
} else{//外部样式Dom结构
    tpl = ['<div>',
                '<div class="fp-arrow">',
                    '<div class="fp-a1"></div>',
                    '<div class="fp-a2"></div>',
                '</div>',
                '<div class="fp-content"></div>',
            '</div>'].join('');
}

< script  id ="fp-template"  type ="text/x-handlebars-template" >
<div class="{{panelClass}}" style="position:fixed;border:{{borderWidth}} solid {{borderColor}};background-color:{{bgColor}};width:{{panelWidth}};height:{{panelHeight}};display:none;-moz-box-sizing : border-box;box-sizing : border-box;">
    <div class="fp-arrow" style="position:absolute;width:0;left:{{arrowLeft}};right:{{arrowRight}};">
        <div class="fp-a1" style="position:absolute;border:solid transparent;height:0;width:0;bottom:0;border-bottom-color:{{borderColor}};border-width:{{arrowBorderWidth}};left:50%;margin-left:-{{arrowBorderWidth}}"></div>
        <div class="fp-a2" style="position:absolute;border:solid transparent;height:0;width:0;bottom:-{{borderWidth}};border-bottom-color:{{bgColor}};border-width:{{arrowBorderWidth}};left:50%;margin-left:-{{arrowBorderWidth}}"></div>
    </div>
    <div class="fp-content" style="padding:{{contentPadding}}"></div>
</div>
</ script >

@borderColor: #000;
@borderWidth: 5px;
@bgColor : #fff;
@arrowBorderWidth : 10px;
@panelWidth : 100px;
@panelHeight : 100px;
@arrowOffset : 1px;
@arrowBorderWidth : 10px;
@arrowLeft : 20%;
@arrowRight : auto;
@contentPadding : auto;

.flyout-panel{
    position: fixed;
    border:  @borderWidth solid @borderColor;
    display: none;
    background:  @bgColor;
    width :  @panelWidth;
    height:  @panelHeight;
    .fp-arrow {
        position: fixed;
        width :  0;
        left :  @arrowLeft;
        right:  @arrowRight;
        >div{
            position: absolute;
            border:  solid transparent;
            height:  0;
            width:  0;
            bottom: 0;
        }
        .fa-a1{
            border-bottom-color :  @borderColor;
            border-width :  @arrowBorderWidth;
            left: 50%;
            margin-left:  -@arrowBorderWidth;
        }
        .fa-a2{
            border-bottom-color :  @bgColor;
            border-width :  @arrowBorderWidth;
            left: 50%;
            top: @borderWidth;
            margin-left:  -@arrowBorderWidth;
        }
    }
}