floatPanel

  • 1.

    // --1--
    var panel1 = FloatPanel('panel1');
    document.querySelector('#panel1-show').addEventListener('click',function(event){
        panel1.show({pageX:300,pageY:300});
    });
    
    // --2--
    var panel1_B = FloatPanel('panel1_B',{
        backDrop:true,
        body: { content:'<h3>panel1_backDrop</h3>>'},
    });
    document.querySelector('#panel1_B-show').addEventListener('click',function(event){
        panel1.hide();
        panel1_B.reposition().show();
    });
    panel1_B._backDropNode.addEventListener('click',function(event){
        panel1_B.hide();
    });
                            
  • 2.

    var panel2 = FloatPanel('panel2');
    panel2.set({
        header:{
            content:'Panel2',
        },
        floatHeight: 20,
        closeBtn:false,
    });
    document.querySelector('#panel2-show').addEventListener('click',function(event){
        panel2.show(event);
    });
    document.querySelector('#panel2-hide').addEventListener('click',function(event){
        panel2.hide();
    });
                            
  • 3.

    var panel3 = FloatPanel('panel3').set({floatHeight:40, direction:'down'});
    $('#panel3-hover').on('mouseenter',function(event){
        panel3.show(event);
    });
    $('#panel3-hover').on('mouseleave',function(event){
        panel3.hide(event);
        //在这种 鼠标离开目标即隐藏面板 的应用场景中
        //边缘检测开启时,应在hide()中传入坐标对象
        //避免因为面板被屏幕边缘挤回,覆盖#panel3-hover时产生的错误的事件触发
    });
    panel3.mouseleave(function(event){this.hide()});
                            
  • 4.

    var panel4 = FloatPanel('panel4').set({floatHeight:40,});
    $('#panel4-hover').on('mouseenter',function(event){
        panel4.show(event);
    });
    $('#panel4-hover').on('mousemove',function(event){
        panel4.reposition(event);
    });
    $('#panel4-hover').on('mouseleave',function(event){
        panel4.hide(event);
    });
                            
  • 1.

    点击在(300,300)处显示



    点击显示于屏幕中央, 带背景, 背景点击隐藏

  • 2.

    点击显示于按钮处



    点击隐藏

  • 3.

    鼠标移入向下显示,移出隐藏

    panel3-hover
  • 4.

    鼠标移入显示,移出隐藏,面板跟随鼠标

    panel4-hover