js实现浮动面板插件floatPanel

js实现浮动面板插件floatPanel

原生javript的浮动框生成插件,floatPanel.js是一个javascript网页浮动框生成工具。

使用方法
在页面引入相关CSS样式

1
2
<script src="js/floatPanel.js" ></script>
<link href="css/floatPanel.css" rel="stylesheet" type="text/css"/>

初始化
创建浮动框,参数为自定义的浮动框的id值,返回构建的浮动框对象,默认初始化在当前视区中心

1
2
3
4
5
6
var panel = FloatPanel('panel');
//根据需要,创建浮动框时可以传入配置项
var panel = FloatPanel('panel', {
    closeBtn: true,
    floatHeight: 10,
});

简易使用

1
2
3
4
5
6
7
8
9
10
11
//浮动框定位,传入坐标对象,省略则定位于屏幕中心
panel.reposition({
    pageX: 50,
    pageY: 50,
});
//若是由鼠标事件触发,可以直接传入事件通知对象(event)
EventTarget.addEventListener('click',function(event){
    panel.reposition(event);
});
//浮动框显示
panel.show();

特性
floatPanel对象的部分属性值与DOM是**双向绑定**的,修改该属性的值将使DOM即时更新,DOM的改变同样会影响属性值

1
2
3
panel.width = 500;
floatPanel对象的方法支持链式调用
panel.set({height:300}).reposition();
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论