弘帝企业智能建站系统交流平台

 找回密码
 立即注册
楼主: admin

【jQuery】$.Pop()弹出层$.Pro()提示层插件介绍

[复制链接]
 楼主| 发表于 2020-10-25 17:38:15 | 显示全部楼层

Iframe层

加载iframe层(内框架),可以在当前页面弹出新页面。
如何使用
传参方式
codeeval

pop.iframe(":www.jq22.com", "JQ22插件库");
[参数1 路径/string] [参数2 标题/string]
路径中首个字符为 : 自动补全http://,如果前2个字符为s: 则自动补全https://,这是一种偷懒方式。
参数2 为空则会自动获取标题,当然只可以在同域中才可以获取到,跨域是不可以的。获取失败则显示地址信息。
对象方式
codeeval

pop.iframe({
title: "百度",
buttonSpcl: "min|max|close",
anim: "fadeIn-zoom",
width: 800,
height: 500,
id: undefined,
place: 5,
drag: true,
dragSize: true,
index: true,
toClose: false,
mask: true,
class: false,
src: ":baidu.com"
});
具体属性请参考最下面的对象属性。
对象属性
title - 标题
类型:String/Html/DOM,默认:

title支持传入字符串 DOM节点 JQ对象,在常见的层都会被p元素包裹住,一些特殊的层则不会被p元素包裹。

buttonSpcl - 弹出层控制按钮
类型:String,默认:

弹出层控制按钮(最大化 最小化 关闭),必须传入字符串,可以使用3种格式传入:
1. min|max|close
2. min,max,close
3. min max close。

anim - 动画效果
类型:String,默认:

弹出层动画效果,必须以字符串传入。

width - 弹出层宽度
类型:Number/%,默认:

设置弹出层宽度

height - 弹出层高度
类型:Number/%,默认:

设置弹出层高度

id - id值
类型:String,默认:

在3.0版本弹出层id已经是不重要的属性,只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

place - 定位
类型:Number/Object,默认:5

定位弹出层的位置,可以输入1-9九宫格位置,1为左上9为右下,也可以使用对象属性手动设置。

九宫格定位eval

pop.alert({
place: 1
})
多个按钮eval

pop.alert({
place: {
top: 0,
left: 0
}
})
drag - 注册拖动层事件
类型:Boolean,默认:

弹出层 注册移动位置事件,使弹出层按住标题可移动弹出层位置。

dragSize - 注册拖动层尺寸事件
类型:Boolean,默认:

弹出层 注册拖动改变尺寸事件,使弹出层可改变尺寸。

index - 注册置顶层事件
类型:Boolean,默认:

弹出层 注册置顶事件,当多个层存在时,点击层可置顶到顶层。

toClose - 注册层外销毁事件
类型:Boolean,默认:

弹出层 注册层外点击销毁事件,当在点击弹出层之外的元素时即可销毁层。

mask - 注册遮罩层
类型:Boolean/Number/String,默认:

为弹出层增加遮罩背景,默认黑色背景,传入值为数字时调整透明度,字符串则直接应用在background-color样式上。

class - 增加类名
类型:String,默认:

为弹出层增加一个类名,注意的是传入abc数值,但是最终附加上的是pop-abc类型,其中pop受到插件配置属性中className属性影响。

src - 设置路径信息
类型:String,默认:true

用于设置弹出层关于路径的属性,在img中用于设置图片路径,在iframe中用于设置页面路径。

iframe层可以应用补全规则,既首字母为: 自动将:替换为http://,s:替换为https://

历史变动
V2.5.2开始支持自动获取,但是不可以跨域。
V2.7.2改变自动补全规则。
V3.0.0在iframe未加载完成显示遮罩层。
扩展性
pop弹出层扩展性非常强,每个弹出层都可以单独设置更多效果。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:39:02 | 显示全部楼层

自定义层

完全自定义弹出层,所有对象属性可调,并且没有传参模式。
如何使用
codeeval

pop.custom({
title: "自定义标题",
content: "自定义内容",
box: "body",
sizeAdapt: false,
button: ["info", "我知道了"],
buttonSpcl: "close",
anim: "gather",
width: 500,
height: 400,
id: undefined,
place: 5,
drag: false,
dragSize: false,
index: false,
toClose: true,
mask: true,
class: false
});
这是完全自定义层,头部 内容都是空的,都需要自己填充DOM元素。
建议将pop.custom放入一个自定义方法中以传参在赋值的调用方式,这样比较简单。
对象属性
title - 标题
类型:String/Html/DOM,默认:

title支持传入字符串 DOM节点 JQ对象,在常见的层都会被p元素包裹住,一些特殊的层则不会被p元素包裹。

content - 内容
类型:String,默认:

content只可以传入字符串,并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

box - 在哪里出现
类型:String,默认:"body"

用于设置弹出层出现在哪里,也就是弹出层加载到哪里。

sizeAdapt - 自适应尺寸
类型:Boolean,默认:false

弹出层自适应尺寸,但是也会受到minWidth,maxWidth,minheight,maxheight 4个属性的影响。

button - 按钮
类型:Array,默认:["primary","确定",function(){this.close();}]

弹出层按钮,必须以数组传入,需要多个按钮需要以多维数组格式传入。

单个按钮eval

pop.alert({
button: ["primary", "确定",
function() {
this.close();
}]
})
多个按钮eval

pop.alert({
button: [["primary", "确定1",
function() {
this.close();
}], ["primary", "确定2",
function() {
this.close();
}]]
})
buttonSpcl - 弹出层控制按钮
类型:String,默认:

弹出层控制按钮(最大化 最小化 关闭),必须传入字符串,可以使用3种格式传入:
1. min|max|close
2. min,max,close
3. min max close。

anim - 动画效果
类型:String,默认:

弹出层动画效果,必须以字符串传入。

width - 弹出层宽度
类型:Number/%,默认:

设置弹出层宽度

height - 弹出层高度
类型:Number/%,默认:

设置弹出层高度

id - id值
类型:String,默认:

在3.0版本弹出层id已经是不重要的属性,只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

place - 定位
类型:Number/Object,默认:5

定位弹出层的位置,可以输入1-9九宫格位置,1为左上9为右下,也可以使用对象属性手动设置。

九宫格定位eval

pop.alert({
place: 1
})
多个按钮eval

pop.alert({
place: {
top: 0,
left: 0
}
})
drag - 注册拖动层事件
类型:Boolean,默认:

弹出层 注册移动位置事件,使弹出层按住标题可移动弹出层位置。

dragSize - 注册拖动层尺寸事件
类型:Boolean,默认:

弹出层 注册拖动改变尺寸事件,使弹出层可改变尺寸。

index - 注册置顶层事件
类型:Boolean,默认:

弹出层 注册置顶事件,当多个层存在时,点击层可置顶到顶层。

toClose - 注册层外销毁事件
类型:Boolean,默认:

弹出层 注册层外点击销毁事件,当在点击弹出层之外的元素时即可销毁层。

mask - 注册遮罩层
类型:Boolean/Number/String,默认:

为弹出层增加遮罩背景,默认黑色背景,传入值为数字时调整透明度,字符串则直接应用在background-color样式上。

class - 增加类名
类型:String,默认:

为弹出层增加一个类名,注意的是传入abc数值,但是最终附加上的是pop-abc类型,其中pop受到插件配置属性中className属性影响。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:39:37 | 显示全部楼层

侧边滑动层

侧边滑动层,可以从4个方向滑动。长用于进行扩展操作。
比如显示更新日志,修改密码等等交互体验。
如何使用
传参方式
codeeval

pop.lateral("这里放置html元素", 1, 500);
[参数1 DOM元素/string ] [参数2 方向/number string] [参数3 尺寸/number]
参数1 可是DOM元素 也可以JQ对象元素 也可以是html字符串,参数2可以输入方向字符串 如 top left,数字0-3分别代表一个方向
对象方式
codeeval

pop.lateral({
content: "滑动层,可传入任何html",
width: 500,
height: 500,
direction: 3,
id: undefined,
toClose: true,
mask: false,
class: false
});
具体属性请参考最下面的对象属性。
对象属性
content - 内容
类型:String,默认:

content只可以传入字符串,并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

width - 弹出层宽度
类型:Number/%,默认:

设置弹出层宽度

height - 弹出层高度
类型:Number/%,默认:

设置弹出层高度

direction - 方向
类型:Number/String,默认:

用于设置弹出层方向的属性,可选值 top/0 right/1 bottom/2 left/3 可以使用数字或者字符串。

id - id值
类型:String,默认:

在3.0版本弹出层id已经是不重要的属性,只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

toClose - 注册层外销毁事件
类型:Boolean,默认:

弹出层 注册层外点击销毁事件,当在点击弹出层之外的元素时即可销毁层。

mask - 注册遮罩层
类型:Boolean/Number/String,默认:

为弹出层增加遮罩背景,默认黑色背景,传入值为数字时调整透明度,字符串则直接应用在background-color样式上。

class - 增加类名
类型:String,默认:

为弹出层增加一个类名,注意的是传入abc数值,但是最终附加上的是pop-abc类型,其中pop受到插件配置属性中className属性影响。

历史变动
V3.0.0传参方式 - 支持传入DOM元素 JQ对象 并且可以设置高度。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:40:24 | 显示全部楼层

加载层

等待加载层,可以写入任何html元素中,常用美化数据加载过程。
如何使用
传参方式
codeeval

pop.wait("body", "正在加载中", 30);
[参数1 父元素/string ] [参数2 提示文字/string] [参数3 尺寸/Number]
参数1决定pop.wait出现在哪,输入格式为jQ选择器标准,参数2设置是否含有遮罩层,参数3决定弹出层的尺寸。
codeeval

pop.close("wait");
销毁wait类型层,更多销毁方式请参考
对象方式
codeeval

pop.wait({
box: ".sidebar",
content: "我在快速加载中",
id: undefined,
anim: "fadeIn-zoom",
mask: true,
size: 18,
class: false
});
具体属性请参考最下面的对象属性。
对象属性
box - 在哪里出现
类型:String,默认:"body"

用于设置弹出层出现在哪里,也就是弹出层加载到哪里。

content - 内容
类型:String,默认:

content只可以传入字符串,并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

id - id值
类型:String,默认:

在3.0版本弹出层id已经是不重要的属性,只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

anim - 动画效果
类型:String,默认:

弹出层动画效果,必须以字符串传入。

mask - 注册遮罩层
类型:Boolean/Number/String,默认:

为弹出层增加遮罩背景,默认黑色背景,传入值为数字时调整透明度,字符串则直接应用在background-color样式上。

size - 大小
类型:Number,默认:

用于设置弹出大小的属性,此属性不同于width与heighe,这是一个基于固定值倍数设置尺寸的值。

class - 增加类名
类型:String,默认:

为弹出层增加一个类名,注意的是传入abc数值,但是最终附加上的是pop-abc类型,其中pop受到插件配置属性中className属性影响。

历史变动
V3.0.0参数方式 - 增加显示文字的参数。
V3.0.0销毁方式发生变化
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:41:07 | 显示全部楼层

提示层

tips常常用于一段信息的深度解释,比如在表单中输入各种信息。
如何使用
传参方式
账号:
codeeval

pop.tips(".tipsText", "请输入账号信息", 3000);
[参数1 父元素/string ] [参数2 提示文字/string] [参数3 尺寸/Number]
对象方式
codeeval

pop.tips({
box: ".article",
selector: ".tipsText",
title: "注意",
content: "请输入账号信息",
id: undefined,
anim: "fadeIn-zoom",
class: false,
maxWidth: 200,
time: 10000,
height: "",
width: ""
});
这里我让文档中的侧边栏出现了加载层,第一次调用加载,第二次销毁。
具体属性请参考最下面的对象属性。
对象属性
box - 在哪里出现
类型:String,默认:"body"

用于设置弹出层出现在哪里,也就是弹出层加载到哪里。

selector - 选择器
类型:String,默认:

弹出层选择器相关属性,一般用于获取元素DOM节点获取弹出层需要的属性值应用在层配置中。
在tips与tipsReg为输入目标DOM节点用于层的定位。

title - 标题
类型:String/Html/DOM,默认:

title支持传入字符串 DOM节点 JQ对象,在常见的层都会被p元素包裹住,一些特殊的层则不会被p元素包裹。

content - 内容
类型:String,默认:

content只可以传入字符串,并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

id - id值
类型:String,默认:

在3.0版本弹出层id已经是不重要的属性,只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

anim - 动画效果
类型:String,默认:

弹出层动画效果,必须以字符串传入。

class - 增加类名
类型:String,默认:

为弹出层增加一个类名,注意的是传入abc数值,但是最终附加上的是pop-abc类型,其中pop受到插件配置属性中className属性影响。

time - 延迟销毁
类型:Number,默认:3000

延时销毁pop层所需要等待的时间,单位 毫秒。既1秒为1000

height - 弹出层高度
类型:Number/%,默认:

设置弹出层高度

width - 弹出层宽度
类型:Number/%,默认:

设置弹出层宽度

历史变动
V3.0版本之后tips拆分为两种弹出层,既tips与tipsReg
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:46:28 | 显示全部楼层

图片预览层

img用来显示一张图片进行预览,可以对图片进行放大 缩小 翻滚等浏览效果。
如何使用
传参方式
codeeval

pop.img("static/1.jpg", "图片预览");
[参数1 父元素/string ] [参数2 提示文字/string] [参数3 尺寸/Number]
对象方式
codeeval

pop.img({
width: 600,
height: 400,
drag: true,
src: "1.jpg",
dragSize: true,
toClose: false,
index: true,
buttonSpcl: "min max close",
only: false
});
这里我让文档中的侧边栏出现了加载层,第一次调用加载,第二次销毁。
具体属性请参考最下面的对象属性。
对象属性
width - 弹出层宽度
类型:Number/%,默认:

设置弹出层宽度

height - 弹出层高度
类型:Number/%,默认:

设置弹出层高度

drag - 注册拖动层事件
类型:Boolean,默认:

弹出层 注册移动位置事件,使弹出层按住标题可移动弹出层位置。

src - 设置路径信息
类型:String,默认:true

用于设置弹出层关于路径的属性,在img中用于设置图片路径,在iframe中用于设置页面路径。

iframe层可以应用补全规则,既首字母为: 自动将:替换为http://,s:替换为https://

dragSize - 注册拖动层尺寸事件
类型:Boolean,默认:

弹出层 注册拖动改变尺寸事件,使弹出层可改变尺寸。

toClose - 注册层外销毁事件
类型:Boolean,默认:

弹出层 注册层外点击销毁事件,当在点击弹出层之外的元素时即可销毁层。

index - 注册置顶层事件
类型:Boolean,默认:

弹出层 注册置顶事件,当多个层存在时,点击层可置顶到顶层。

buttonSpcl - 弹出层控制按钮
类型:String,默认:

弹出层控制按钮(最大化 最小化 关闭),必须传入字符串,可以使用3种格式传入:
1. min|max|close
2. min,max,close
3. min max close。

only - 唯一性
类型:Boolean,默认:false

锁定弹出层在本类型层的唯一性,也就是每次调用层都会自动销毁上一个同类型的弹出层。

历史变动
V3.0版本之后img拆分为两种弹出层,既img与imgReg
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:47:05 | 显示全部楼层

遮罩层

pop弹出层遮罩层独立版,可以独立呼出。不同于其他层,mask独立版可以应用动画效果。
如何使用
传参方式
codeeval

pop.mask("body", false);
[参数1 父元素/string ] [参数2 颜色/string]
参数1决定pop.mask出现在哪,输入格式为jQ选择器标准,参数2设置颜色 可选择 0-1(默认黑色 只调整透明度),rgba-rgb格式,#fff-16进制格式,参数3 附加的css样式,输入格式必须是对象,参考JQ css方法。
对象方式
codeeval

pop.mask({
box: "body",
only: false,
color: false
});
对象模式其实就是简写模式,因为遮罩层确实没什么可调整的东西。
具体属性请参考最下面的对象属性。
对象属性
box - 在哪里出现
类型:String,默认:"body"

用于设置弹出层出现在哪里,也就是弹出层加载到哪里。

only - 唯一性
类型:Boolean,默认:false

锁定弹出层在本类型层的唯一性,也就是每次调用层都会自动销毁上一个同类型的弹出层。

color - 颜色
类型:String/Number,默认:

用于设置关于颜色的属性
在mask做为弹出层背景颜色使用。

历史变动
暂无
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:47:50 | 显示全部楼层

图片预览-注册模式

pop.img用来预览一张图片,可以旋转 放大缩小 移动查看细节等等。
pop.img分为调用模式与注册模式,两者区别很大。在调用中pop.img可以懒加载一张页面中不存在的图片,但是注册模式下只是预览页面中图片。
如何使用
注册模式图片预览

传参方式

codeeval

  • pop.imgReg("img", "blockquote[img");

[参数1 图片地址/string ] [参数2 图片标题/string]传参模式为调用模式,只需要参数1输入图片地址即可懒加载一张图像,参数2为标题,为空则显示图片地址对象方式

codeeval

  • pop.imgReg({
  • selector: "img",
  • father: "blockquote[img",
  • });

注册模式下每张图片的标题需要图标本身的title属性来获取,如果没有则显示地址。对象方式为注册模式,这个模式下可以预览页面中的图片,如果是加载失败的也会以加载失败显示出来,对象模式代码中注册的是上面8张图片。具体属性请参考最下面的对象属性。对象属性[color=rgba(0, 0, 0, 0.87)]selector - 选择器
类型:String,默认:
弹出层选择器相关属性,一般用于获取元素DOM节点获取弹出层需要的属性值应用在层配置中。
在tips与tipsReg为输入目标DOM节点用于层的定位。

历史变动暂无
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:49:15 | 显示全部楼层

提示层-注册模式

tipsReg是tips的注册版,可以实现移动到DOM节点上显示一段话,以起到代替默认title属性的提示作用。
如何使用
鼠标移动到按钮对比效果:

buttonbutton2
传参方式
codeeval

pop.tipsReg("button.tipsReg", "title", "h", 3000);
[参数1 元素选择器/string ] [参数2 自定义属性/string]
参数选择哪些元素出现pop.tips层,参数写法参照JQ选择器。参数2 则是显示哪个自定义标签的字符串内容,默认title
当前是为所有元素添加pop.tips事件,当然只有包含title自定义属性的元素才会触发显示层。
codeeval

pop.tipsReg({
selector: false,
direction: false,
label: "title",
labelTitle: "h",
maxWidth: 200,
time: 3000
});
具体属性请参考最下面的对象属性。
对象属性
selector - 选择器
类型:String,默认:

弹出层选择器相关属性,一般用于获取元素DOM节点获取弹出层需要的属性值应用在层配置中。
在tips与tipsReg为输入目标DOM节点用于层的定位。

direction - 方向
类型:Number/String,默认:

用于设置弹出层方向的属性,可选值 top/0 right/1 bottom/2 left/3 可以使用数字或者字符串。

label - 自定义属性
类型:String,默认:

设置关于获取元素自定义属性的值的数值,一般用于设置层一些预设值使用。
目前在tips与tipsReg作为弹出层显示内容使用

labelTitle - 自定义属性[附加]
类型:String,默认:

配合label属性使用,一般是label附加属性值,要与label起到一个联动作用。

time - 延迟销毁
类型:Number,默认:3000

延时销毁pop层所需要等待的时间,单位 毫秒。既1秒为1000
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:49:50 | 显示全部楼层

全局配置

pop.cfg是pop非常重要的全局配置方法。一些全局通用属性都在cfg中调用使用,并且一般只需要调用一次。
使用方法
修改一项配置eval

pop.cfg("className", "pop")
批量修改项配置eval

pop.cfg({
"className": "pop"
})
添加到js标签中
顾明思议就是讲配置项写在js标签中,在初始化插件会自动读取并应用对应设置。
其中标签自定义属性应用等级要高于标签中的对象格式配置。
<script className="pop" src="static/js_pop.min.js">{"className":"pop"}</script>
属性列表
className - 插件类名头
类型:String,默认:pop

主要为了兼容已经使用pop类名的网页,如果你的网页中并没有使用.pop开头的样式那么就不需要改动此选项。

zIndex - 初始zIndex值
类型:Number,默认:10000

弹出层初始的z-index值,每次呼出操作都会增加z-index值,如果你的网页中没有大于10000z-index值的元素 请保持不动,必须弹出层的z-index在你的页面中处于最高值才可以保证显示效果。

minWidth - 弹出层最小宽度
类型:Number,默认:10000

弹出层最小宽度,一些特定弹出层会无视此属性,当然也可以在弹出层在次设置尺寸参数,这样会覆盖掉全局的最小宽度设置。

minHeight - 弹出层最小高度
类型:Number,默认:10000

弹出层最小高度,一些特定弹出层会无视此属性,当然也可以在弹出层在次设置尺寸参数,这样会覆盖掉全局的最小高度设置。

boundary - 弹出层距离边界的距离
类型:Number,默认:5

弹出层距离边界最小距离,此属性只要保证弹出层在各种移动位置变换尺寸不会被溢出页面外,如果值为负数或者0则没有限制。

resize - 弹性显示弹出层
类型:Boolean,默认:false

浏览器可视区域发生尺寸变化时 弹出层进行位置修正。
此属性为true,可使pop层永远在屏幕中显示。

window - 注册至window
类型:Boolean,默认:false

将pop所有方法注册到window,这样pop.alert()就可以以alert()呼出,但是同样的window的alert()会被pop插件方法覆盖。

viewport - 纠正移动端布局
类型:Object,默认:

由于手机1px不等于pc的1px原因电脑中显示正常的页面通常在手机中会自动进行缩放,但是视觉看的文字太小不适合流浪所以此属性时为了让移动端1px与PC端1px相等。

simplify - 注册简写模式
类型:Boolean,默认:false

注册简写模式,注册以后可以以p[1]();或p(1);即可呼出pop.alert();弹出层,书写代码较少。

simplify - 注册简写模式
类型:Object,默认:

简写模式支持列表,可自定义简写模式下列表。

maskColor - 遮罩层默认颜色
类型:String,默认:rgba(0,0,0,.4)

设置遮罩层默认的背景色与透明度,必须以rgba()格式,如果使用#fff格式则没有透明度效果。

历史变动
移除 closeTime属性,现在通过计算自动获取。
移除 placeType属性,现在通过计算固定top与left固定位置。
移除 dragScroll属性,现在强制不可使用滚动条。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-4-25 09:24 , Processed in 0.096090 second(s), 12 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表