插件描述：原生javript的浮动框生成插件
floatPanel简介
floatPanel.js是一个javascript网页浮动框生成工具
安装
引入css
1 | <link href="css/floatPanel.css" rel="stylesheet" type="text/css"/> |
引入js
1 | <script src="js/floatPanel.js" ></script> |
使用
初始化
创建浮动框,参数为自定义的浮动框的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 | panel.width = 500; |
floatPanel对象的方法支持链式调用
1 | panel.set({height:300}).reposition(); |
属性
| 属性 | 类型 | 默认值 | 描述 |
| id | String | 浮动面板的id, 只能在初始化时传入, 属性不可更改 | |
| node | Object | 面板的元素节点, 初始化时根据`id`生成, 属性不可更改 | |
| width | Number|String | 300 | 面板的宽度值, 与DOM双向绑定 |
| height | Number|String | auto | 面板的高度值, 与DOM双向绑定 |
| left | Number|String | 面板的css`left`值，与DOM双向绑定 | |
| top | Number|String | 面板的css`left`值，与DOM双向绑定 | |
| zIndex | Number|String | 999 | 面板的css`z-index`值，与DOM双向绑定;<br />若是面板启用了`backDrop`，给此对象属性赋值时也会设置`backDrop`的`z-index`为`传入值 - 1` |
| direction | String | up | 面板弹出的方向,可选`'up'`或者`'down' |
| edgeDetection | Boolean | true | 面板定位时, 是否进行屏幕边缘的检测 |
| floatHeight | Number | 10 | 面板定位时，相对定位坐标的垂直距离 |
| floatHeightInvolve | Boolean | false | 面板调用`hide(event)`方法时, 是否将`floatHeight`视作浮动框内部高度纳入计算; **_谨慎使用_** |
| _backDropNode | Object | null | 面板背景的元素节点, 通过`set({backDrop:true})`来控制是否启用，非枚举属性 |
配置项
配置项可以在创建浮动框时传入
1 | var panel = FloatPanel('panel', { yourConfig }); |
也可以调用面板对象的`set()`方法来设置
1 | panel.set({ yourConfig }); |
默认配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var defaultConfig = { width : 300, //面板宽度 height : 'auto', //面板高度 header: { //面板头部 enabled: true, //是否启用 content: 'Panel title', //设置内容 }, footer: { //面板底部 enabled: true, //是否启用 content: 'Panel footer', //设置内容 }, body: { //面板中部 enabled: true, //是否启用 content: 'Panel content', //设置内容 }, closeBtn: true, //面板关闭按钮是否启用 backDrop: false, //面板背景是否启用 direction: 'up', //面板弹出的方向,可选'up'或者'down' edgeDetection: true, //面板定位时, 是否进行屏幕边缘的检测 floatHeight: 10, //面板定位时，相对定位坐标的垂直距离 floatHeightInvolve: false, //浮动高度 floatHeight 是否参与进 hide(event) 时的计算}; |
方法
show([event, callback])
调用此方法显示面板
参数
1 2 3 4 5 6 7 8 9 | - `event` : (`Object`) + > 可选参数 + 一个包含了坐标的**对象**，内部必须含有属性`pageX`和`pageY`, 属性值为`Number` + 传入此对象，面板在显示之前会先调用`reposition(event)`进行定位，并将此参数传入 + 省略则直接显示面板 + 例: `{ pageX: 10, pageY: 10, }`- `callback` : (`Function`) + > 可选参数 + 回调函数, 在面板定位后(若有), 显示前调用 |
hide([event])
调用此方法隐藏面板
参数
1 2 3 4 5 6 | - `event` : (`Object`) + > 可选参数 + 一个包含了坐标的对象，内部必须含有属性`pageX`和`pageY`, 属性值为`Number` + 传入此对象，面板在隐藏之前会先判断坐标是否位于浮动面板内部，若位于内部则不隐藏 + 若设置了面板`floatHeightInvolve`属性为`true`, 则`floatHeight`的值也被视作浮动框内部高度进行计算 + 省略则直接隐藏面板 |
set([config])
调用此方法对面板进行设置
参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | - `config` : (`Object`) + > 可选参数 + 默认配置项请见 [配置项](#配置项) + 一个包含了配置项的对象，可配置的选项如下 + `width` : (`Number | String`), 设置面板的宽度 + `height` : (`Number | String`), 设置面板的高度 + `header` : (`Object`), 设置面板的头部 * `enabled` : (`Boolean`), 是否启用 * `content` : (`String`), 设置内容 + `footer` : (`Object`), 设置面板的头部 * `enabled` : (`Boolean`), 是否启用 * `content` : (`String`), 设置内容 + `body` : (`Object`), 设置面板的头部 * `enabled` : (`Boolean`), 是否启用 * `content` : (`String`), 设置内容 + `closeBtn` : (`Boolean`), 设置面板的关闭按钮是否启用 + `backDrop` : (`Boolean`), 设置面板的背景是否启用 + `direction` : (`String`), 面板弹出的方向,可选'up'或者'down' + `edgeDetection` : (`Boolean`), 面板定位时, 是否进行屏幕边缘的检测 + `floatHeight` : (`Number`), 设置面板定位时上浮的高度 + `floatHeightInvolve` : (`Boolean`), 设置浮动高度`floatHeight`是否参与进`hide(event)`时的计算; **_谨慎使用_** |
reposition([event])
调用此方法使面板重新定位
参数
1 2 3 4 | - `event` : (`Object`) + > 可选参数 + 一个包含了坐标的对象，内部必须含有属性`pageX`和`pageY`, 属性值为`Number` + 省略则定位在当前屏幕中心 |
destroy()
调用此方法将删除并销毁面板对象
mouseenter(func)
此方法接收一个函数，并将函数绑定在面板的鼠标移入事件中
mouseleave(func)
此方法接收一个函数，并将函数绑定在面板的鼠标移出事件中
兼容性
兼容至IE9+
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 好用的TreeTable插件
- 下一个特效： layAdmin极简风格后台系统模板(原创)