floatPanel

Documents

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