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

admin

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

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

admin

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": "其他")

admin

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动画的名称。

admin

样式类型
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);
})

admin

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

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

admin

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

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

admin

注册简写模式，这个功能只要是减少代码量，或者起到加密的效果。
如何使用
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注册简写模式，而真正使用中只需要注册一次就可以了。

admin

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急速浏览器 切换到移动端浏览就可以正确显示效果。不过由于文档做了自适应可能也可能看不出来显著效果....