请选择 进入手机版 | 继续访问电脑版

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

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

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

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

启用遮罩层 的扩展方法

通过*.mask可以直接为弹出层设置遮罩层,这里只可以设置添加不可以去除,也只有没有遮罩层弹出层有效。
他的存在主要为了方便传参方式调用下显示遮罩层,这是因为所有弹出层在传参调用方式下没有设置遮罩层的选项。
如何使用
codeeval

pop.alert().mask(.7);
传入数字是是调整透明度,如果是字符串 如#fff rgba(0,0,0) 则是修改background-color样式属性,注意css书写规则有效性。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 17:58:09 | 显示全部楼层
pop.version用来获取pop版本号,如果需要获取更新等访问JQ22.com 搜索pop查看最新版本

codeeval

  • pop.alert(pop.version)


pop.clientInfo用来获取当前设备类型,会以字符串返回。
codeeval

pop.alert(pop.clientInfo)


pop.pcIn检查是否PC端,返回值 true(PC端)/false(其他)
codeeval

pop.alert(pop.pcIn ? "PC": "其他")
回复 支持 反对

使用道具 举报

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

动画效果

pop内置15个预设动画效果,动画效果基于css3制作,只需要简单添加指定的样式即可增加新的动画效果,
如何使用
codeeval

pop.alert({
anim: "fadeIn-zoom"
})
内置pop动画效果列表:
1. spread
2. shake
3. rollIng-left
4. rollIng-right
5. slide-top
6. slide-bottom
7. slide-left
8. slide-right
9. fadeIn
10. fadeIn-zoom
11. fadeIn-alert
12. don
13. roll
14. sandra
15. gather
添加新动画效果
一句话概括就是动画是基于css样式中的animation属性,下面给大家一个模板,只需要按需更改即可,然后放进页面中即可,或者放入css样式文件中引入到页面中。
codeeval

.showAlert[anim = *] {
animation: +.3s;
}.hideAlert[anim = *] {
animation: +.3s forwards;
}
其中的*是pop使用的动画名称,而+是你绑定的css动画的名称。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 18:00:44 | 显示全部楼层

按钮

样式类型
pop内置6个按钮样式,对应 正常的 警告的 危险的 禁止的 默认的等颜色的按钮,目前个人认为是足够用的,所以没有继续更新了。当然了,按钮也是可以自己添加的,因为都是使用的css样式而已。
codeeval

pop.alert({
height: 80,
content: "按钮演示",
height: 80,
width: 80,
button: ["primary", "好的"]
});
内置pop按钮样式列表:
1. ban
2. primary
3. default
4. success
5. info
6. warning
7. danger
添加新的按钮效果
只要你会写css样式就可以随意增加自己的按钮样式,当然你也可以以这样方式覆盖掉原有的样式效果。
codeeval

.pop - button[type = "*"] {}
*号为pop使用的按钮样式名称,简单的说pop是通过自定义属性增加样式的。
自定义事件
pop 按钮事件参数会返回pop_Event对象,pop_Event对象包含了当前层所有属性与扩展方法。
codeeval

pop.alert("点击确定",
function(ev) {
console.log(this, ev);
})
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 18:01:32 | 显示全部楼层

pop样式覆盖

pop样式在加载时会直接加载到最顶部,所以只要通过css继承就可以轻松进行pop样式的覆盖,这样就可以达到自己想要的效果。
如何使用
codeeval

pop.alert({
class: "abc"
});
这里演示的是为pop新增一个样式pop-abc,新增样式按照样式继承完全覆盖pop预设的样式,一样的道理,直接写pop的样式也会直接覆盖默认的pop样式,基于这个思路完全可以让pop大变样。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 18:01:59 | 显示全部楼层

注册至window对象

注册到window对象,这样的好处是可以省去pop,直接可以alert()调用,缺点是pop部分层方法和window对象中的方法冲突,这样一来pop会覆盖掉window中的方法。
如何使用
codeeval

pop.cfg("window", true);
pop.alert();
alert();
当参数为真 pop.alert等同于alert,但是原有的window中的alert方法会被覆盖掉,如果不想这么做可以使用简写模式。
参数为假会还原原有的window对象中的方法。
回复 支持 反对

使用道具 举报

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

注册至简写模式

注册简写模式,这个功能只要是减少代码量,或者起到加密的效果。
如何使用
codeeval

pop.cfg("simplify", true);
p(1, "文字");
p[1]("文字");
两种调用方式效果是一致的,其中1为注册的简写模式key,可以通过simplifyAry进行修改增加。
PS.第一种调用方式参数1 为简写模式下的key,其他参数则和普通使用一致。
codeeval

pop.cfg("simplify", true);
var d = p;
d(1, "文字");
d[1]("文字");
PS.如果不想使用p也可以这样。
更新列表
codeeval

pop.cfg({
simplify: true,
simplifyAry: {
"555": "alert"
}
});
p(555, "文字");
p[555]("文字");
每次配置simplifyAry参数值都是增加,如果有已经存在的就进行覆盖,不会进行删除操作。
注意!simplifyAry传入必须以对象传入。
注意
文档中我多次使用了pop.cfg注册简写模式,而真正使用中只需要注册一次就可以了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-10-25 18:03:00 | 显示全部楼层
viewport其实就是移动端布局,当viewport为真时只是在页面中插入一个标签
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
因为css中的1px不等于设备中的1px,所以为了在移动端更好的浏览器在页面中插入这个标签。
这里我找到了一篇博客园的文章供详细了解一下,当然也可以直接在页面插入这句标签,在viewport为真时候pop也不会插入。
了解更多点击这里
如何使用
codeeval

pop.cfg("viewport", true);
pop.alert("文字");
使用360急速浏览器 切换到移动端浏览就可以正确显示效果。不过由于文档做了自适应可能也可能看不出来显著效果....
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-28 21:01 , Processed in 0.056816 second(s), 12 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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