素材牛VIP会员

JS浮动弹出层面板插件floatPanel

 所属分类:网页特效-对话框/灯箱/提示,弹出层

 浏览:460次-  下载:1次-  评论:1次-  发布时间:2018-12-26
JS浮动弹出层面板插件floatPanel兼容IE9
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
项目地址(website):https://ocean-zh.github.io/floatPanel/
素材描述:原创原生javript的浮动框生成插件

详细介绍

floatPanel简介

floatPanel.js是一个javascript网页浮动框生成工具

安装

引入css

<link href="css/floatPanel.css" rel="stylesheet" type="text/css"/>

引入js

<script src="js/floatPanel.js" ></script>

使用

初始化

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

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

简易使用

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

特性

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

panel.width = 500;

floatPanel对象的方法支持链式调用

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})`来控制是否启用,非枚举属性

配置项

配置项可以在创建浮动框时传入

var panel = FloatPanel('panel', { yourConfig });

也可以调用面板对象的`set()`方法来设置

panel.set({ yourConfig });

默认配置

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])

调用此方法显示面板

参数

- `event` : (`Object`)
    + > 可选参数
    + 一个包含了坐标的**对象**,内部必须含有属性`pageX`和`pageY`, 属性值为`Number`
    + 传入此对象,面板在显示之前会先调用`reposition(event)`进行定位,并将此参数传入
    + 省略则直接显示面板
    + 例: `{ pageX: 10, pageY: 10, }`
- `callback` : (`Function`)
    + > 可选参数
    + 回调函数, 在面板定位后(若有), 显示前调用

hide([event])

调用此方法隐藏面板

参数

- `event` : (`Object`)
    + > 可选参数
    + 一个包含了坐标的对象,内部必须含有属性`pageX`和`pageY`, 属性值为`Number`
    + 传入此对象,面板在隐藏之前会先判断坐标是否位于浮动面板内部,若位于内部则不隐藏
    + 若设置了面板`floatHeightInvolve`属性为`true`, 则`floatHeight`的值也被视作浮动框内部高度进行计算
    + 省略则直接隐藏面板

set([config])

调用此方法对面板进行设置

参数

- `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])

调用此方法使面板重新定位

参数

- `event` : (`Object`)
    + > 可选参数
    + 一个包含了坐标的对象,内部必须含有属性`pageX`和`pageY`, 属性值为`Number`
    + 省略则定位在当前屏幕中心

destroy()

调用此方法将删除并销毁面板对象

mouseenter(func)

此方法接收一个函数,并将函数绑定在面板的鼠标移入事件中

mouseleave(func)

此方法接收一个函数,并将函数绑定在面板的鼠标移出事件中

兼容性

兼容至IE9+

文件目录结构

  • dist
    • ┝ floatPanel.min.css
    • ┝ floatPanel.min.js
  • ┝ index.html
  • src
    • css
      • ┝ bootstrap.min.css
      • ┝ floatPanel.css
      • ┝ floatPanel.min.css
    • js
      • ┝ bootstrap.min.js
      • ┝ floatPanel.js
      • ┝ floatPanel.min.js
      • ┝ jquery-3.1.1.min.js
    • ┝ test.html

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

xi***mo  
2018年12月28日

学习下!

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:1
所需牛币:3 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)