超轻量级弹窗插件:hpopwin

时间:2020-12-07 20:37:18

开博首篇,据说要打出气势。。。

最近一个项目需要用到弹窗,于是这个插件就此诞生。在写该插件之前也上网搜索了一番,找到不少优秀的插件。优点是都比较美观而且功能丰富,但缺点也是功能远大于需求,带来不必要的开销。所以这次写的插件主要侧重点在于——功能单一。相信不少朋友也需要这种轻量级插件,故放到这里方便大家。

插件支持3个方法:1.提示弹窗;2.确认弹窗;3.对话

闲话少说,先上个图:(运行环境:Safari 6.0.5 (8536.30.1))

超轻量级弹窗插件:hpopwin

该插件基于jQuery-1.8.3,目前支持IE6+和其他主流浏览器,针对IE6/7进行了一些CSS HACK来保证基本显示效果,如下图:

超轻量级弹窗插件:hpopwin

有兴趣的朋友也可以自己美化其在IE6/7下的UI.

API文档:

1.引入框架

首先,引入jquery库,如果已经引入请忽略。

然后,通过以下代码引入插件:

1 <script type='text/javascript' src='plugin/HpopWin/jquery.hpopwin.js'></script>
2 <link rel='stylesheet' type='text/css' href='plugin/HpopWin/theme/default/css/style.css' />

需要提到的是,您可以根据自己的需求,按照default主题的CSS命名规则自定义弹窗UI,然后将主题包放入theme文件夹内,并引用你的css样式后即可正确调用。

2.调用示例:

2.1通过下述方法绑定对象单击触发调用:

1 $('#element').hpopwin('tip',{
2 html:'Your content here',
3 onCancel:function(){
4 //Your script here
5 }
6 })

其中,hpopwin的第一个参数("tip")的其他可选值为"confirm"和"input",参见:3.支持的方法。第二个变量为json数据,参见:4.参数设置。

2.2外部调用

您可以这样直接弹出提示窗(tip):

1 $.hpopwin.tip('content',function(){//Your callback script;});

或者弹出一个确认弹窗(confirm):

1 $.hpopwin.confirm('content',function(){//Your callback script;});

我们考虑到对话(input)窗口一般都是被动响应,因此未对其做外部调用方法,如果您觉得有必要支持该方法——“请联系我!”

3.支持的方法

3.1提示弹窗(tip)

tip用于向用户进行某些消息的提示。因此该方式构造的弹窗未设置确定取消等按钮,仅包含一个关闭按钮,位于弹窗右上角。但我们为关闭按钮设置了回调函数,您可以通过onCancel来编写回调函数。当用户点击关闭后,弹出窗体消失,同时会执行该callback,方便设计师执行一些利于用户体验的动作。

3.2确认弹窗(confirm)

confirm类似于浏览器自带的询问弹窗,一般用于当用户进行危险操作前进行提示。因此该方式构造的弹窗在tip弹窗的基础上增加了确认及取消按钮。当用户点击取消或关闭按钮后,窗体消失,一切就像没发生一样。只有当用户点击确认后,onTrue中的callback函数才会被触发,此时窗体消失。

3.3对话(input)

input用于从客户端获取数据,并进一步处理。用登录框来举例,您可以在弹窗中设置用户名和密码的输入框让用户填写,当用户点击确定后,onTrue中的回调函数(获取输入框中的数据并发送到服务器去验证用户名及密码)会被执行,如果验证成功,则关闭该弹出窗。注意:对话方法创建的弹出窗体不会被主动关闭,但是我们会将弹出窗口和锁屏(见screenlock参数)的句柄通过onTrue:function($objs){}转交给您,方便在满足条件的时候进行关闭操作。

例如:

1 $('#element').hpopwin('input',{
2 html:'Your content here, html is available',
3 onTrue:function($objs){
4 //your function here
5 //if your script allows to close the dialog:
6 $objs.dialog.remove();//remove the dialog window
7 if($objs.lock) $objs.lock.remove();//remove the lock
8 }
9 })

 

4.参数设置

参数设置通过json形式传递给插件。

参数及其默认值:

 1 width: 370,
2 height: 212,
3 oktext: '确定',
4 canceltext: '取消',
5 title: '提示',
6 top: 100,
7 left: 'center',
8 html: 'content',
9 screenlock: true,
10 tagprefix: 'hpopwin_',
11 onTrue: 空函数,
12 onCancel: 空函数

参数就这几个,再多的话你感觉乱我看着也闹心。

width和height是弹窗尺寸,请注意,在默认主题中,如果内容溢出窗口会被隐藏。。。所以如果你想自适应宽度,请修改css或修改插件或等我们更新。催我请注明理由,因为我目前还想不到为什么要这样做。

oktext是确定按钮的文字,canceltext是取消按钮的文字。title是弹窗标题文字。

top是弹窗距浏览器可见窗体顶部距离,您也可以设置成'middle',此时,插件会自动居中;同理left是弹窗与浏览器可见窗体左端距离,"center"代表水平居中。

html是弹窗的文本内容,您可以根据自身需求来定制,支持html。

screenlock开启后,会在弹窗后加锁定层。新版本中将该功能分离,可以单独控制其开关。

tagprefix可以用来定义生成的弹窗html元素的标签前缀,一旦发生冲突,您可以通过修改前缀方便的解决该问题。

onTrue对应的方法有:confirm和input,但请注意前边提到的细节,input不会主动关闭弹窗,直到您使用句柄并用.remove()将弹窗移除。

onCancel对应全部方法,每种方法中的取消按钮和关闭按钮都会激活onCancel。

 

下载地址 (v1.0.2最新版本,如后续更新也会同步更新该文章)

http://pan.baidu.com/share/link?shareid=29506685&uk=36801973

 

好了,就这么多!最后说几件事情:

代码开源,可*二次开发,但请勿将其销售获取利润。不足之处请一定指正。如发现bug请一定反馈。

还想说的是,轻量级是该插件的特点,鉴于目前功能丰富的弹窗插件太多,因此把该插件拓展成NB大杂烩没有多大意义。如果有好的扩展的想法一起讨论,可以另做些独立插件!